Geleitwort | 6 |
Über die Autoren | 8 |
Die Fachgutachter | 10 |
Inhaltsverzeichnis | 12 |
Einleitung | 20 |
Der Inhalt dieses Buches | 21 |
Voraussetzungen für dieses Buch | 22 |
Zielgruppe dieses Buches | 23 |
Die Geschichte des Projekts jQuery | 23 |
Schreibweisen | 25 |
Herunterladen des Beispielcodes | 25 |
1 Erste Schritte | 26 |
1.1 Was bietet jQuery? | 26 |
1.2 Warum jQuery so gut funktioniert | 28 |
1.3 Unsere erste Webseite mit jQuery | 30 |
1.3.1 jQuery herunterladen | 30 |
1.3.2 Einrichten von jQuery in einem HTML-Dokument | 30 |
1.3.3 jQuery-Code hinzufügen | 33 |
1.3.4 Das fertige Produkt | 35 |
1.4 Einfaches JavaScript und jQuery im Vergleich | 36 |
1.5 Entwicklungswerkzeuge | 37 |
1.5.1 Firebug | 38 |
1.6 Zusammenfassung | 41 |
2 Elemente auswählen | 42 |
2.1 Das Document Object Model | 42 |
2.2 Die Funktion $() | 44 |
2.3 CSS-Selektoren | 45 |
2.3.1 Listenelemente formatieren | 46 |
2.3.2 Attributselektoren | 48 |
2.3.3 Links formatieren | 48 |
2.4 jQuery-Selektoren | 50 |
2.4.1 Zeilen abwechselnd formatieren | 51 |
2.4.2 Formularselektoren | 55 |
2.5 Methoden zum Durchlaufen des DOM | 56 |
2.5.1 Einzelne Zellen formatieren | 57 |
2.5.2 Verkettung | 59 |
2.6 Zugriff auf DOM-Elemente | 60 |
2.7 Zusammenfassung | 61 |
2.7.1 Literatur | 61 |
2.8 Übungsaufgaben | 62 |
3 Ereignisbehandlung | 64 |
3.1 Aufgaben beim Laden der Seite durchführen | 64 |
3.1.1 Die Codeausführung zeitlich abstimmen | 64 |
3.1.2 Mehrere Skripte auf einer Seite | 65 |
3.1.3 Kurzschreibweisen | 67 |
3.1.4 Argumente an den .ready()-Callback übergeben | 67 |
3.2 Einfache Ereignisse | 68 |
3.2.1 Ein einfacher Formatwechsler | 68 |
3.2.2 Die anderen Schaltflächen aktivieren | 71 |
3.2.3 Ereignishandler-Kontext | 72 |
3.2.4 Weitere Konsolidierung | 74 |
3.2.5 Kurzformen für Ereignisse | 76 |
3.3 Zusammengesetzte Ereignisse | 77 |
3.3.1 Erweiterte Funktionen anzeigen und ausblenden | 77 |
3.3.2 Anklickbare Elemente hervorheben | 79 |
3.4 Der Weg eines Ereignisses | 81 |
3.4.1 Nebenwirkungen des Event Bubbling | 83 |
3.5 Den Weg ändern: das Ereignisobjekt | 83 |
3.5.1 Ereignisziele | 85 |
3.5.2 Die Ereignisweiterleitung abbrechen | 85 |
3.5.3 Standardaktionen | 86 |
3.5.4 Ereignisdelegierung | 87 |
3.5.5 Methoden für die Ereignisdelegierung | 90 |
3.6 Ereignishandler entfernen | 90 |
3.6.1 Namensräume für Ereignisse | 91 |
3.6.2 Ereignisse erneut binden | 92 |
3.7 Benutzerinteraktion simulieren | 94 |
3.7.1 Tastaturereignisse | 95 |
3.8 Zusammenfassung | 98 |
3.8.1 Literatur | 99 |
3.9 Übungsaufgaben | 99 |
4 Formatierung und Animation | 100 |
4.1 Inline-Bearbeitung mit CSS | 100 |
4.2 Anzeigen und Verbergen | 105 |
4.3 Effekte und Speed | 108 |
4.3.1 Anzeigen mit »Geschwindigkeit« | 108 |
4.3.2 Ein- und ausblenden | 109 |
4.3.3 Auseinander- und zusammenfalten | 110 |
4.3.4 Zusammengesetzte Effekte | 111 |
4.4 Benutzerdefinierte Animationen erstellen | 112 |
4.4.1 Effekte manuell erstellen | 113 |
4.4.2 Mehrere Eigenschaften gleichzeitig animieren | 114 |
4.5 Gleichzeitige und aneinandergereihte Effekte | 118 |
4.5.1 Mit einem einzelnen Satz von Elementen arbeiten | 118 |
4.5.2 Mit mehreren Sätzen von Elementen arbeiten | 122 |
4.5.3 Kurz und bündig | 126 |
4.6 Zusammenfassung | 127 |
4.6.1 Literatur | 127 |
4.7 Übungsaufgaben | 127 |
5 DOM-Bearbeitung | 128 |
5.1 Attribute bearbeiten | 128 |
5.1.1 Nicht-Klassenattribute | 129 |
5.1.2 Eigenschaften von DOM-Elementen | 132 |
5.2 Bearbeitung des DOM-Baums | 133 |
5.2.1 Neues zur Funktion $() | 133 |
5.2.2 Neue Elemente erstellen | 134 |
5.2.3 Neue Elemente einfügen | 135 |
5.2.4 Elemente verschieben | 136 |
5.2.5 Elemente verschachteln | 138 |
5.2.6 Umgekehrte Einfügemethoden | 140 |
5.3 Elemente kopieren | 144 |
5.3.1 Klonen für interne Zitate | 145 |
5.4 Get- und Set-Methoden für Inhalte | 147 |
5.4.1 Weitere Formatanpassungen | 149 |
5.5 Methoden zur DOM-Bearbeitung – kurz und bündig | 151 |
5.6 Zusammenfassung | 152 |
5.6.1 Literatur | 152 |
5.7 Übungsaufgaben | 152 |
6 Daten mit Ajax senden | 154 |
6.1 Daten bei Bedarf laden | 154 |
6.1.1 HTML anhängen | 156 |
6.1.2 Mit JavaScript-Objekten arbeiten | 159 |
6.1.3 XML-Dokumente laden | 165 |
6.2 Ein Datenformat auswählen | 168 |
6.3 Daten an den Server übergeben | 169 |
6.3.1 GET-Requests durchführen | 170 |
6.3.2 POST-Requests durchführen | 174 |
6.3.3 Formulare serialisieren | 175 |
6.4 Unterschiedliche Inhalte liefern | 177 |
6.5 Die Anforderung im Auge behalten | 179 |
6.6 Fehlerbehandlung | 181 |
6.7 Ereignisse in Ajax | 183 |
6.8 Sicherheitseinschränkungen | 184 |
6.8.1 JSONP für fremde Daten verwenden | 185 |
6.9 Zusätzliche Optionen | 187 |
6.9.1 Die grundlegende Methode ajax | 187 |
6.9.2 Standardoptionen ändern | 188 |
6.9.3 Teile einer HTML-Seite laden | 189 |
6.10 Zusammenfassung | 191 |
6.10.1 Literatur | 191 |
6.11 Übungsaufgaben | 192 |
7 Plug-ins verwenden | 194 |
7.1 Plug-ins finden und Unterstützung bekommen | 194 |
7.2 Ein Plug-in verwenden | 195 |
7.2.1 Das Cycle-Plug-in herunterladen und einbinden | 195 |
7.2.2 Einfache Plug-in-Anwendungen | 195 |
7.2.3 Parameter an Plug-in-Methoden übergeben | 197 |
7.2.4 Voreingestellte Parameter | 198 |
7.2.5 Andere Arten von Plug-ins | 199 |
7.3 Die UI-Plug-in-Bibliothek von jQuery | 201 |
7.3.1 Effekte | 201 |
7.3.2 Interaktionskomponenten | 205 |
7.3.3 Widgets | 206 |
7.3.4 JQuery-UI-ThemeRoller | 209 |
7.4 Zusammenfassung | 210 |
7.5 Übungsaufgaben | 210 |
8 Plug-ins entwickeln | 212 |
8.1 Das Alias $ innerhalb von Plug-ins verwenden | 212 |
8.2 Neue globale Funktionen hinzufügen | 213 |
8.2.1 Mehrere Funktionen hinzufügen | 215 |
8.3 JQuery Objektmethoden hinzufügen | 218 |
8.3.1 Kontext von Objektmethoden | 219 |
8.3.2 Implizite Iteration | 220 |
8.3.3 Verkettete Methoden | 221 |
8.4 Methodenparameter | 222 |
8.4.1 Parameter-Maps | 223 |
8.4.2 Voreinstellungen für Parameterwerte | 224 |
8.4.3 Callback-Funktionen | 225 |
8.4.4 Anpassbare Voreinstellungen | 227 |
8.5 Die Widget-Factory von jQuery UI | 228 |
8.5.1 Ein Widget erstellen | 229 |
8.5.2 Widgets entfernen | 231 |
8.5.3 Widgets aktivieren und deaktivieren | 232 |
8.5.4 Widget-Optionen übernehmen | 232 |
8.5.5 Untermethoden hinzufügen | 233 |
8.5.6 Widget-Ereignisse auslösen | 234 |
8.6 Designempfehlungen für Plug-ins | 235 |
8.6.1 Plug-ins veröffentlichen | 236 |
8.7 Zusammenfassung | 236 |
8.8 Übungsaufgaben | 237 |
9 Komplexe Selektoren und Durchlaufen des DOM | 238 |
9.1 Auswahl und Durchlaufen – Teil 2 | 238 |
9.1.1 Dynamisches Filtern von Tabellen | 240 |
9.1.2 Streifenmuster für Tabellenzeilen | 242 |
9.1.3 Filter und Streifenmuster kombinieren | 244 |
9.1.4 Weitere Selektoren und Traversierungsmethoden | 245 |
9.2 Selektoren anpassen und optimieren | 245 |
9.2.1 Ein eigenes Selektor-Plug-in schreiben | 245 |
9.2.2 Selektor-Performance | 247 |
9.3 Durchlaufen des DOM – Hinter den Kulissen | 250 |
9.3.1 jQuery-Objekteigenschaften | 251 |
9.3.2 Der DOM-Elementstack | 253 |
9.3.3 Ein Plug-in für DOM-Traversierungsmethoden schreiben | 254 |
9.3.4 Performance von DOM-Traversierungsmethoden | 256 |
9.4 Zusammenfassung | 258 |
9.4.1 Literatur | 258 |
9.5 Übungsaufgaben | 258 |
10 Komplexe Ereignisse | 260 |
10.1 Ereignisse – Teil 2 | 260 |
10.1.1 Zusätzliche Datenseiten laden | 262 |
10.1.2 Daten beim Darüberfahren mit der Maus anzeigen | 263 |
10.2 Ereignisdelegation | 264 |
10.2.1 Die jQuery-Delegationsmethoden verwenden | 265 |
10.2.2 Eine Delegationsmethode wählen | 266 |
10.2.3 Frühe Delegation | 267 |
10.2.4 Ein Kontextargument verwenden | 268 |
10.3 Benutzerdefinierte Ereignisse | 268 |
10.3.1 Unendliches Scrollen | 270 |
10.3.2 Benutzerdefinierte Ereignisparameter | 271 |
10.4 Ereignisse drosseln | 272 |
10.4.1 Andere Arten der Drosselung | 273 |
10.5 Spezielle Ereignisse | 274 |
10.5.1 Weitere Informationen zu speziellen Ereignissen | 276 |
10.6 Zusammenfassung | 276 |
10.6.1 Literatur | 276 |
10.7 Übungsaufgaben | 277 |
11 Anspruchsvolle Effekte | 278 |
11.1 Animation – Teil 2 | 278 |
11.2 Animationen beobachten und unterbrechen | 280 |
11.2.1 Den Animationsstatus bestimmen | 281 |
11.2.2 Eine laufende Animation anhalten | 282 |
11.3 Globale Effekteigenschaften | 283 |
11.3.1 Globales Deaktivieren aller Effekte | 283 |
11.3.2 Feineinstellung der Animationsübergänge | 284 |
11.3.3 Die Effektdauer festlegen | 284 |
11.4 Easing mit mehreren Eigenschaften | 287 |
11.5 Verzögerte Objekte | 287 |
11.5.1 Animations-Promises | 289 |
11.6 Zusammenfassung | 292 |
11.6.1 Literatur | 292 |
11.7 Übungsaufgaben | 292 |
12 DOM-Manipulation für Fortgeschrittene | 294 |
12.1 Tabellenzeilen sortieren | 294 |
12.1.1 Serverseitiges Sortieren | 294 |
12.1.2 Sortierung mit Ajax | 295 |
12.1.3 Sortierung mit JavaScript | 296 |
12.2 Elemente verschieben und einfügen – Teil 2 | 297 |
12.2.1 Links um bestehenden Text herum einfügen | 297 |
12.2.2 Einfache JavaScript-Arrays sortieren | 298 |
12.2.3 DOM-Elemente sortieren | 299 |
12.3 Daten zusammen mit DOM-Elementen ablegen | 301 |
12.3.1 Zusätzliche Vorberechnungen | 302 |
12.3.2 Nicht-String-Daten speichern | 303 |
12.3.3 Umkehren der Sortierrichtung | 305 |
12.4 HTML5 mit eigenen Datenattributen einsetzen | 307 |
12.5 Zeilen mit JSON sortieren und erzeugen | 309 |
12.5.1 Das JSON-Objekt modifizieren | 311 |
12.5.2 Inhalte bei Bedarf wiederherstellen | 312 |
12.6 Attributmanipulation für Fortgeschrittene | 314 |
12.6.1 Elementerstellung per Kurzschrift | 314 |
12.6.2 DOM-Manipulation mit Hooks | 315 |
12.7 Zusammenfassung | 317 |
12.7.1 Literatur | 318 |
12.8 Übungsaufgaben | 318 |
13 Ajax für Fortgeschrittene | 320 |
13.1 Fortschreitende Verbesserung mit Ajax | 320 |
13.1.1 JSONP-Daten einsammeln | 322 |
13.2 Ajax-Fehlerbehandlung | 325 |
13.3 Das jqXHR-Objekt | 327 |
13.3.1 Ajax-Promises | 328 |
13.3.2 Antworten cachen | 329 |
13.4 Ajax-Anfragen drosseln | 331 |
13.5 Ajax-Funktionen erweitern | 332 |
13.5.1 Konverter für Datentypen | 332 |
13.5.2 Ajax-Prefilter | 337 |
13.5.3 Alternative Transporte | 337 |
13.6 Zusammenfassung | 341 |
13.6.1 Literatur | 341 |
13.7 Übungsaufgaben | 341 |
A JavaScript-Closures | 342 |
A.1 Innere Funktionen | 342 |
A.1.1 Gesprengte Ketten | 343 |
A.1.2 Gültigkeitsbereiche von Variablen | 345 |
A.2 Interaktion zwischen Closures | 347 |
A.3 Closures in jQuery | 348 |
A.3.1 Argumente für $(document).ready() | 348 |
A.3.2 Ereignishandler | 349 |
A.3.3 Handler in Schleifen binden | 350 |
A.3.4 Benannte und anonyme Funktionen | 352 |
A.4 Gefahren durch Speicherlecks | 353 |
A.4.1 Unerwünschte Verweisschleifen | 354 |
A.4.2 Internet Explorer und sein Speicherleck-Problem | 355 |
A.5 Zusammenfassung | 357 |
B JavaScript mit QUnit testen | 358 |
B.1 QUnit herunterladen | 358 |
B.2 Das Dokument einrichten | 359 |
B.3 Tests organisieren | 360 |
B.4 Tests hinzufügen und ausführen | 361 |
B.4.1 Asynchrones Testen | 363 |
B.5 Andere Testarten | 364 |
B.6 Praktische Erwägungen | 365 |
B.6.1 Literatur | 366 |
B.7 Zusammenfassung | 366 |
C Kurzreferenz | 368 |
C.1 Selektorausdrücke | 368 |
C.2 Methoden zum Durchlaufen des DOM | 371 |
C.3 Ereignismethoden | 373 |
C.4 Effektmethoden | 376 |
C.5 DOM-Manipulationsmethoden | 378 |
C.6 Ajax-Methoden | 381 |
C.7 Verzögerte Objekte | 383 |
C.8 Verschiedene Eigenschaften und Funktionen | 384 |
Index | 386 |
A | 386 |
B | 387 |
C | 387 |
D | 387 |
E | 388 |
F | 390 |
G | 390 |
H | 390 |
I | 391 |
J | 391 |
K | 392 |
L | 392 |
M | 392 |
N | 393 |
O | 393 |
P | 393 |
Q | 393 |
R | 393 |
S | 393 |
T | 394 |
U | 394 |
V | 394 |
W | 395 |
X | 395 |
Y | 395 |
Z | 395 |
Sonderzeichen | 395 |