jQuery lernen und einsetzen (eBook)

Jonathan Chaffer ist Mitglied der Rapid Development Group, einer Web-Entwicklungsfirma in Grand Rapids, Michigan. Zu seiner Arbeit gehört die Projektüberwachung und Implementierung einer Vielzahl von Technologien mit einem Schwerpunkt auf PHP, MySQL und JavaScript. Er leitet außerdem jQuery-Trainingsseminare für Webentwickler. In der Open-Source-Gemeinschaft ist Jonathan sehr aktiv beim Drupal-CMSProjekt, das jQuery als JavaScript-Framework ausgewählt hat. Er ist der Schöpfer des Content Construction Kits, eines beliebten Moduls für die Verwaltung strukturierter Inhalte auf Drupal-Sites. Er ist für die wesentlichen Überarbeitungen im Drupal-Menüsystem und der Entwickler-API verantwortlich. Jonathan lebt mit seiner Frau Jennifer in Grand Rapids. Karl Swedberg ist Webentwickler bei Fusionary Media in Grand Rapids, Michigan, wo er viel Zeit damit verbringt, tolle Sachen mit JavaScript anzustellen. Als Mitglied des jQuery-Teams ist Karl zuständig für die Pflege der jQuery-API-Site unter api.jquery.com. Er veröffentlicht außerdem Anleitungen in seinem Blog learningjquery.com und präsentiert auf Workshops und Konferenzen. Wenn er nicht gerade programmiert, verbringt Karl gern seine Zeit mit der Familie, röstet in seiner Garage Kaffee und trainiert im örtlichen Fitnessclub.

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