| Inhalt | 7 |
| Vorwort | 17 |
| 1 Einleitung | 21 |
| 1.1 Das Umfeld | 21 |
| 1.2 Frameworks und Toolkits | 22 |
| 1.3 Was behandeln wir in diesem Buch? | 23 |
| 1.3.1 Das Kern-Framework jQuery | 24 |
| 1.3.2 Plugins, UI, Mobile & Co | 24 |
| 1.3.3 Wen sehe ich als Zielgruppe für das Buch? | 25 |
| 1.4 Schreibkonventionen | 26 |
| 1.4.1 Listings | 26 |
| 1.5 Was benötigen Sie beziehungsweise was nutzt Ihnen? | 26 |
| 1.5.1 Hardware und Betriebssystem | 26 |
| 1.5.2 jQuery, jQuery Mobile, jQuery UI & mehr | 27 |
| 1.6 Die Browser | 34 |
| 1.6.1 Verschiedene Betriebssysteme und virtuelle Maschinen zum Testen | 35 |
| 1.7 Die Entwicklungsumgebungen und nützliche Helferlein | 36 |
| 1.7.1 Editoren – oft bereits mit gewisser Hilfestellung | 37 |
| 1.7.2 Integrierte Entwicklungsumgebungen | 37 |
| 1.7.3 Kleine Helferlein | 42 |
| 1.7.4 Node.js und Git | 43 |
| 1.7.5 Integrierte Entwicklungstools in Browser und Browser-Add-ons | 44 |
| 1.7.6 Der Webserver zum realistischen Testen | 45 |
| 1.8 Zusammenfassung | 46 |
| 2 Sprung ins kalte Wasser | 47 |
| 2.1 Zugriff auf Elemente und Schutz des DOM | 47 |
| 2.2 Veränderung der Webseite mit DHTML | 53 |
| 2.3 Animiertes Verkleinern und Vergrößern eines Elements | 56 |
| 2.4 Attribute dynamisch verändern | 61 |
| 2.5 Zusammenfassung | 63 |
| 3 Grundlagenwissen | 65 |
| 3.1 Das WWW, das Web 2.0 und das Client-Server-Prinzip im Internet | 65 |
| 3.1.1 Programmierung im WWW | 66 |
| 3.1.2 Das Web 2.0 und Ajax | 66 |
| 3.2 JavaScript und das Verhältnis zu jQuery | 67 |
| 3.2.1 Die allgemeine Einbindung von JavaScript in Webseiten | 68 |
| 3.2.2 JSON | 70 |
| 3.3 DOM und Objekte | 71 |
| 3.3.1 DOM und der Zugriff auf Elemente einer Webseite | 72 |
| 3.4 Style Sheets und DHTML | 73 |
| 3.4.1 CSS – die Standardsprache des Webs | 73 |
| 3.4.2 Die konkrete Syntax von CSS-Deklarationen | 74 |
| 3.4.3 Selektoren | 75 |
| 3.5 Zusammenfassung | 75 |
| 4 Wie jQuery grundsätzlich arbeitet | 77 |
| 4.1 Grundsätzliches zum Zugriff auf Elemente der Webseite | 78 |
| 4.1.1 Ein Beispiel für unterschiedliche Knoten | 79 |
| 4.2 Der jQuery-Namensraum und das jQuery-Objekt | 82 |
| 4.3 Spezielle Datentypen und Strukturen in Query | 83 |
| 4.3.1 Methoden | 83 |
| 4.3.2 Optionen | 84 |
| 4.3.3 jqXHR | 84 |
| 4.4 Die Funktion jQuery() und der Alias $() | 84 |
| 4.4.1 Der Kontext | 86 |
| 4.4.2 Verketten von Methoden und die jQuery-Warteschlange | 87 |
| 4.4.3 Funktionsaufrufe nacheinander ausführen – die jQuery-Warteschlange | 87 |
| 4.4.4 jQuery.then() und jQuery.when() | 88 |
| 4.5 Funktionen nach Aufbau des DOM ausführen | 89 |
| 4.5.1 Callback oder anonyme Funktion als Parameter für jQuery() | 89 |
| 4.5.2 Das ready-Event | 91 |
| 4.5.3 document.ready() in eine externe JavaScript-Datei auslagern | 92 |
| 4.5.4 Mit jQuery.holdReady() das ready-Event beeinflussen | 93 |
| 4.6 Ein Element mit jQuery() erstellen und in die Webseite einfügen | 93 |
| 4.6.1 Ein trickreiches kleines Problem – können Sie es lösen? | 95 |
| 4.6.2 Optionen zum Initialisieren von Attributen | 99 |
| 4.7 Direkter Zugriff auf DOM-Elemente mit get( ) | 101 |
| 4.8 Gemeinsame Verwendung von jQuery und anderen Frameworks | 101 |
| 4.8.1 Die Funktion jQuery.noConflict() | 102 |
| 4.8.2 Einen alternativen Alias verwenden | 103 |
| 4.9 Datenspeicherung im DOM | 104 |
| 4.10 Mehr zum Kontext und jQuery-Utilities | 110 |
| 4.11 Zusammenfassung | 112 |
| 5 Umgang mit Selektoren und Filtern | 113 |
| 5.1 Klassische DOM-Zugriffsmethoden | 113 |
| 5.1.1 Objektfelder | 114 |
| 5.1.2 Zugriff über einen Namen | 114 |
| 5.1.3 Verwandtschaftsbeziehungen | 114 |
| 5.1.4 Elementnamen, IDs und Klassennamen | 114 |
| 5.1.5 DOM-Zugriffsmöglichkeiten versus jQuery | 115 |
| 5.2 Was versteht man unter Selektoren? | 115 |
| 5.2.1 Was ist ein Selektor? | 115 |
| 5.2.2 Was sind Filter? | 116 |
| 5.2.3 CSS3, SQL und XPath als Grundlagen und Hintergrund | 116 |
| 5.3 Basisselektoren und hierarchische Selektoren | 117 |
| 5.3.1 Beispiele zur Verdeutlichung | 119 |
| 5.3.2 Potenzielle Fallen | 130 |
| 5.4 Filterausdrücke | 130 |
| 5.4.1 Basisfilter | 131 |
| 5.4.2 Inhaltsfilter | 138 |
| 5.4.3 Sichtbarkeitsfilter | 141 |
| 5.4.4 Kindfilter | 145 |
| 5.4.5 Attributfilter | 148 |
| 5.4.6 Filter für Formularelemente und Formularfilter | 153 |
| 5.4.7 Formularfilter zur Auswahl aufgrund des Zustands | 157 |
| 5.5 Filtermethoden | 159 |
| 5.5.1 Praktische Beispiele von Filtermethoden | 160 |
| 5.6 Zusammenfassung | 169 |
| 6 Zugriff auf die Elemente einer Webseite | 171 |
| 6.1 Inhalte von Knoten abfragen und verändern – html() und text() | 171 |
| 6.1.1 Ein Beispiel zu html() und text() | 172 |
| 6.2 Inhalt von Formularfeldern – val() | 176 |
| 6.2.1 Ein Beispiel für den Zugriff auf Formularfelder | 176 |
| 6.3 Zugriff auf Attribute und Eigenschaften mit attr() und prop() | 178 |
| 6.3.1 Zugriff auf Attribute | 178 |
| 6.3.2 Zugriff auf Eigenschaften | 178 |
| 6.3.3 Unterschied zwischen Attributen und Eigenschaften | 179 |
| 6.3.4 Das Beispiel zum Zugriff auf Eigenschaften und Attribute | 180 |
| 6.4 Einfügen von Knoten in eine Webseite | 186 |
| 6.4.1 append() und prepend() | 186 |
| 6.4.2 appendTo() und prependTo() | 191 |
| 6.5 Knoten nachher oder vorher einfügen | 196 |
| 6.5.1 after() und before() | 197 |
| 6.5.2 insertAfter() und insertBefore() | 197 |
| 6.6 Ummanteln | 197 |
| 6.6.1 Einzeln mit wrap() ummanteln | 197 |
| 6.6.2 Alles ummanteln mit wrapAll() | 200 |
| 6.6.3 Innere Bereiche ummanteln mit wrapInner() | 201 |
| 6.6.4 Den Mantel ablegen – unwrap() | 202 |
| 6.7 Ersetzen mit replaceWith() und replaceAll() | 202 |
| 6.7.1 Ersetzen mit replaceWith() | 202 |
| 6.7.2 Alles ersetzen mit replaceAll() | 206 |
| 6.8 Überflüssige Knoten entfernen | 208 |
| 6.8.1 Die Methoden empty() und remove() | 208 |
| 6.8.2 Die Alternative zu remove() – detach() | 214 |
| 6.8.3 Löschen von Attributen | 215 |
| 6.9 Vervielfachen mit clone() | 215 |
| 6.10 Suchen & Finden | 215 |
| 6.10.1 Von Kindern und Eltern | 216 |
| 6.10.2 Von Geschwistern | 219 |
| 6.10.3 Nachfolger mit has() suchen | 221 |
| 6.11 Finden mit find() und contents() | 221 |
| 6.12 Mit each() und map() über Arrays und Objekte iterieren | 223 |
| 6.12.1 jQuery.each() und jQuery.map() | 224 |
| 6.12.2 Die Methoden each() und map() | 229 |
| 6.13 Die Methode add() | 230 |
| 6.14 Die Methoden end() und andSelf() | 232 |
| 6.15 Zusammenfassung | 233 |
| 7 Layout und Formatieren mit Style Sheets unter jQuery | 235 |
| 7.1 Hintergrundinformationen | 235 |
| 7.1.1 CSS in jQuery – Vermischung von Layout und Funktionalität? | 236 |
| 7.2 Die Methode css() | 237 |
| 7.2.1 Abfragen von Stileigenschaften | 237 |
| 7.2.2 Setzen von Eigenschaften | 237 |
| 7.3 Klassen von Elementen verändern | 238 |
| 7.3.1 Klassen hinzufügen – addClass() | 238 |
| 7.3.2 Klassen wegnehmen – removeClass() | 247 |
| 7.3.3 Klassen umschalten mit toggleClass() | 247 |
| 7.3.4 Test auf eine Klasse – hasClass() | 248 |
| 7.4 Methoden zur Positionierung | 248 |
| 7.4.1 Bestimmen der Position mit position() | 249 |
| 7.4.2 Position relativ zum Dokument – offset() | 254 |
| 7.4.3 Methoden zum Scrollen | 258 |
| 7.5 Höhe und Breite | 261 |
| 7.5.1 height() und width() | 261 |
| 7.6 Innere und äußere Maße | 265 |
| 7.7 jQuery.cssHooks | 268 |
| 7.8 Zusammenfassung | 270 |
| 8 Ein Praxisbeispiel – eine Datumskomponente | 271 |
| 8.1 Das Ziel | 271 |
| 8.1.1 Die Basiswebseite | 272 |
| 8.2 Die CSS-Datei – Templates | 273 |
| 8.3 Die JavaScript-Datei | 274 |
| 8.4 Zusammenfassung | 279 |
| 9 Ereignisbehandlung unter jQuery | 281 |
| 9.1 Grundlagen zu Ereignissen, Eventhandlern, Triggern und Datenbindung | 282 |
| 9.1.1 Ereignisse | 282 |
| 9.1.2 Allgemeines zu Eventhandlern | 282 |
| 9.1.3 HTML-Eventhandler | 283 |
| 9.1.4 JavaScript/DOM-Eventhandler | 283 |
| 9.1.5 Das Ereignisobjekt | 284 |
| 9.1.6 Blubbern und die Bubble-Phase | 285 |
| 9.1.7 Datenbindung | 287 |
| 9.1.8 Trigger | 287 |
| 9.1.9 Delegation | 288 |
| 9.1.10 Versprechen (Promises) | 288 |
| 9.2 Das Ereignisobjekt in jQuery | 289 |
| 9.2.1 Der Konstruktor von jQuery.Event | 289 |
| 9.2.2 Die Eigenschaften des Ereignisobjekts jQuery.Event | 290 |
| 9.2.3 Die Methoden eines Objekts vom Typ jQuery.Event | 294 |
| 9.2.4 Die Ausführung des bereitstehenden Ereignisses anhalten | 297 |
| 9.3 Ich habe fertig – $(document).ready() | 298 |
| 9.4 Event-Helper | 298 |
| 9.5 Erweiterte Methoden für das Eventhandling | 303 |
| 9.5.1 Datenbindung | 303 |
| 9.5.2 Triggern | 308 |
| 9.6 Live Events | 312 |
| 9.6.1 Die veraltete Methode live() | 312 |
| 9.6.2 Die veraltete Methode delegate() und die delegate-Variante von on() | 313 |
| 9.6.3 Die Methoden die() und undelegate() | 317 |
| 9.7 jQuery.proxy() | 317 |
| 9.8 Weiterentwicklung der Datumskomponente | 320 |
| 9.9 Zusammenfassung | 322 |
| 10 Effekte und Animationen | 323 |
| 10.1 Grundsätzliche Anwendung | 323 |
| 10.1.1 Speed is all you need | 323 |
| 10.1.2 Die Angabe eines Callback | 325 |
| 10.1.3 Verkettung | 325 |
| 10.1.4 Warteschlangen | 326 |
| 10.1.5 Beendigung mit stop(), finish() und jQuery.fx.off | 326 |
| 10.1.6 Endlosanimationen | 327 |
| 10.1.7 Art der Animationen – Easing | 327 |
| 10.2 Konkrete Effekte mit Standardmethoden | 329 |
| 10.2.1 Anzeigen und Wegblenden – die Methoden show() und hide() | 329 |
| 10.2.2 Gleiteffekte – slideDown(), slideUp() und slideToggle() | 329 |
| 10.2.3 Transparenzeffekte – fadeIn(), fadeOut() und fadeTo() sowie toggle() | 332 |
| 10.3 Individuelle Animationen mit animate() | 336 |
| 10.4 Zusammenfassung | 344 |
| 11 Asynchrone Programmierung | 345 |
| 11.1 Ajax und XMLHttpRequest (XHR) – Grundlagen | 346 |
| 11.1.1 Ein XMLHttpRequest-Objekt manuell erzeugen | 346 |
| 11.1.2 Die Methoden eines XHR-Objekts | 347 |
| 11.1.3 Die Eigenschaften eines XHR-Objekts | 348 |
| 11.1.4 Das Datenformat bei einer Ajax-Kommunikation | 348 |
| 11.1.5 Exemplarischer Ablauf einer Ajax-Anfrage | 349 |
| 11.2 Spezialitäten bei der Ajax-Unterstützung in jQuery | 350 |
| 11.2.1 JSONP und Remote Requests | 350 |
| 11.2.2 Das jqXHR-Objekt | 351 |
| 11.2.3 Grundsätzliches zu Methoden in jQuery für Ajax-Anfragen | 351 |
| 11.2.4 Vermeidung von Caching | 353 |
| 11.3 Anwendung der Standardmethoden für Ajax | 353 |
| 11.3.1 $.get() und $.post() | 353 |
| 11.3.2 JSON-Daten anfordern und verarbeiten – getJSON() und parseJSON() | 362 |
| 11.4 Ein Skript per Ajax nachladen – jQuery.getScript() | 364 |
| 11.5 Die allgemeine Variante zum Laden von Daten – load() | 366 |
| 11.5.1 Filter angeben | 367 |
| 11.6 Serialisieren von Daten | 371 |
| 11.6.1 Die Methode serialize() | 371 |
| 11.6.2 Die Methode serializeArray() | 373 |
| 11.6.3 Die allgemeine Version zum Serialisieren – $.param() | 373 |
| 11.7 Vorgabewerte für Ajax – jQuery.ajaxSetup() | 374 |
| 11.8 Ajax Events und Ajax-Eventhandler | 374 |
| 11.8.1 Lokale Ereignisse | 374 |
| 11.8.2 Globale Ereignisse | 376 |
| 11.9 Die vollständige Kontrolle | 377 |
| 11.9.1 jQuery.ajax() | 377 |
| 11.9.2 Erweiterte Techniken für $.ajax() | 385 |
| 11.10 Web Worker | 387 |
| 11.10.1 Was ist ein Web Worker? | 387 |
| 11.10.2 Erzeugen von Web Workern | 388 |
| 11.10.3 Die Kommunikation mit einem Web Worker | 389 |
| 11.10.4 Einen Worker mit terminate() beenden | 389 |
| 11.10.5 Ein Beispiel zu einem klassischen Web Worker | 390 |
| 11.11 Deferred Object und Promises | 392 |
| 11.11.1 Das Umfeld – Promises | 393 |
| 11.11.2 Die speziellen jQuery-Methoden zum Umgang mit einem Deferred Object | 396 |
| 11.11.3 Ein konkretes Beispiel mit Deferred Objects | 398 |
| 11.12 Ajax mit Deferred Objects | 399 |
| 11.12.1 Generische Ajax-Methoden mit then() verketten | 400 |
| 11.12.2 Das Laden von Skripts mit Deferred Objects | 400 |
| 11.12.3 JSONP und Deferred Objects | 401 |
| 11.12.4 Mehrere Ajax-Anfragen ausführen und synchronisieren | 402 |
| 11.13 Das Callbacks Object | 403 |
| 11.14 Zusammenfassung | 407 |
| 12 jQuery UI | 409 |
| 12.1 Was versteht man unter jQuery UI? | 410 |
| 12.1.1 Komponenten zur Unterstützung der Interaktion | 410 |
| 12.1.2 Widgets | 410 |
| 12.1.3 Erweiterte Effekte | 411 |
| 12.1.4 Das Themen-Framework samt ThemeRoller | 411 |
| 12.2 Der Einstieg in jQuery UI | 412 |
| 12.3 Wie nutzt man jQuery UI grundsätzlich? | 413 |
| 12.3.1 Download und der ThemeRoller | 413 |
| 12.3.2 Die Bereitstellung und Einbindung lokaler Ressourcen | 417 |
| 12.3.3 Einbindung über ein CDN | 418 |
| 12.4 Verwenden der Komponenten in jQuery UI | 419 |
| 12.4.1 Die Defaulteinstellung | 420 |
| 12.4.2 Einige grundsätzliche Regeln zu Komponenten und Widgets | 423 |
| 12.4.3 Eigenschaften/Optionen von Komponenten | 423 |
| 12.4.4 Methoden von Komponenten | 426 |
| 12.4.5 Events bei Komponenten und Widgets | 430 |
| 12.5 Ein Überblick über die Komponenten und Widgets | 430 |
| 12.5.1 Die Interaktionskomponenten | 430 |
| 12.5.2 Die Widgets | 431 |
| 12.6 Effekte | 443 |
| 12.6.1 Die Methode effekt() | 443 |
| 12.6.2 Farbanimationen mit animate() | 443 |
| 12.7 Zusammenfassung | 444 |
| 13 jQuery Mobile | 445 |
| 13.1 Grundlagen | 446 |
| 13.1.1 Die Plattformen | 447 |
| 13.1.2 Widgets und Features | 449 |
| 13.1.3 Download und Bereitstellung | 449 |
| 13.1.4 Themes und der ThemeRoller | 451 |
| 13.2 Das Rollensystem und data-role | 452 |
| 13.3 Der grundsätzliche Aufbau einer mobilen Seite | 452 |
| 13.3.1 Ein erstes vollständiges Beispiel | 453 |
| 13.4 Verknüpfen von Seiten | 454 |
| 13.4.1 Externe Links mit Hijax | 455 |
| 13.4.2 Interne Links und das spezielle Verständnis einer Seite | 455 |
| 13.4.3 Zurück in der Historie | 456 |
| 13.5 Die Übergänge | 458 |
| 13.6 Dialoge | 459 |
| 13.7 Schaltflächen | 460 |
| 13.7.1 Schaltflächen mit Icons | 460 |
| 13.7.2 Blockelement oder Inline-Element | 461 |
| 13.7.3 Gruppierung | 462 |
| 13.8 Toolbars und Navigationsbars | 463 |
| 13.9 Listen | 465 |
| 13.10 Formularelemente | 466 |
| 13.10.1 Feldcontainer | 467 |
| 13.10.2 Die verschiedenen Formularelemente | 467 |
| 13.10.3 Deaktivieren von Elementen | 468 |
| 13.10.4 Plugin-Methoden bei Formularelementen | 468 |
| 13.10.5 Abschicken der Formulardaten | 468 |
| 13.11 Spezielle Ereignisse | 468 |
| 13.11.1 Berührungsereignisse | 469 |
| 13.11.2 Änderung der Orientierung | 469 |
| 13.11.3 Verschiebeereignisse | 469 |
| 13.11.4 Seitenereignisse | 470 |
| 13.11.5 Ein Beispiel mit Reaktionen auf Events | 470 |
| 13.12 Kollabierte und expandierte Inhalte | 472 |
| 13.13 Zusammenfassung | 474 |
| 14 Plugins | 475 |
| 14.1 Die Plugin-Seiten von jQuery | 475 |
| 14.2 Ein vorhandenes Plugin suchen und verwenden | 478 |
| 14.3 Eigene Plugins erstellen | 485 |
| 14.3.1 Warum eigene Plugins erstellen? | 485 |
| 14.3.2 Erstellen eines ersten Plugins | 486 |
| 14.3.3 Die wesentlichen Regeln zur Erstellung eines einfachen Plugins | 488 |
| 14.3.4 Regeln zur Erstellung komplexerer Plugins | 489 |
| 14.3.5 Ein Beispiel für ein Plugin mit Optionen | 490 |
| 14.3.6 Ein weiteres Beispiel für ein Plugin mit Optionen | 492 |
| 14.3.7 Ein Plugin veröffentlichen | 493 |
| 14.4 Zusammenfassung | 497 |
| 15 Das Habitat rund um jQuery | 499 |
| 15.1 Sizzle | 499 |
| 15.2 QUnit | 502 |
| 15.2.1 xUnit-Testing | 502 |
| 15.3 Bootstrap | 508 |
| 15.3.1 Responsive Design | 508 |
| 15.3.2 Bootstrap zur Umsetzung von RWD | 509 |
| 15.3.3 Herunterladen von Bootstrap | 510 |
| 15.3.4 Eine Basis-Vorlage | 510 |
| 15.3.5 Ein Kontaktbeispiel | 511 |
| 15.4 Zusammenfassung | 513 |
| 16 Anhang | 515 |
| 16.1 Grundlagen zu JavaScript | 515 |
| 16.1.1 Case-Sensitivität | 515 |
| 16.1.2 Variablen, Literale und Datentypen | 515 |
| 16.1.3 Funktionen und Methoden | 517 |
| 16.1.4 Objekte in JavaScript | 519 |
| 16.2 Die Webseite zum Buch | 521 |
| Index | 523 |
| Leere Seite | 2 |
