Ralph Steyer
jQuery
Das universelle JavaScript-Framework für das interaktive Web und mobile Apps
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
© 2009-2024 ciando GmbH