Ralph Steyer
jQuery
Das universelle JavaScript-Framework für das interaktive Web und mobile Anwendungen
1 Einleitung
14
1.1 Das Umfeld
14
1.2 Frameworks und Toolkits
15
1.3 Was behandeln wir in diesem Buch?
16
1.3.1 Das Kern-Framework jQuery
17
1.3.2 Plugins, UI und Mobile
17
1.3.3 Wen sehe ich als Zielgruppe für das Buch?
18
1.4 Schreibkonventionen
19
1.4.1 Listings
19
1.5 Was benötigen Sie beziehungsweise was nutzt Ihnen?
19
1.5.1 Hardware und Betriebssystem
19
1.5.2 jQuery, jQuery Mobile, jQuery UI & mehr
20
1.6 Die Browser
24
1.6.1 Verschiedene Betriebssysteme und virtuelle Maschinen zum Testen
26
1.7 Die Entwicklungsumgebungen und nützliche Helferlein
27
1.7.1 Editoren – oft bereits mit gewisser Hilfestellung
27
1.7.2 Integrierte Entwicklungsumgebungen
28
1.7.3 Kleine Helferlein
29
1.7.4 Node.js und Git
30
1.7.5 Integrierte Entwicklungstools in Browser und Browser-Add-ons
33
1.7.6 Der Webserver zum realistischen Testen
34
1.8 Zusammenfassung
35
2 Sprung ins kalte Wasser
36
2.1 Zugriff auf Elemente und Schutz des DOM
36
2.2 Veränderung der Webseite mit DHTML
41
2.3 Animiertes Verkleinern und Vergrößern eines Elements
43
2.4 Attribute dynamisch verändern
49
2.5 Zusammenfassung
51
3 Grundlagenwissen
52
3.1 Das WWW, das Web 2.0 und das Client-Server-Prinzip im Internet
52
3.1.1 Programmierung im WWW
53
3.1.2 Das Web 2.0 und AJAX
53
3.2 JavaScript und das Verhältnis zu jQuery
54
3.2.1 Die allgemeine Einbindung von JavaScript in Webseiten
55
3.2.2 JSON
57
3.3 DOM und Objekte
58
3.3.1 DOM und der Zugriff auf Elemente einer Webseite
58
3.4 Style Sheets und DHTML
60
3.4.1 CSS – die Standardsprache des Webs
60
3.4.2 Die konkrete Syntax von CSS-Deklarationen
61
3.4.3 Selektoren
62
3.5 Zusammenfassung
62
4 Wie jQuery grundsätzlich arbeitet
64
4.1 Grundsätzliches zum Zugriff auf Elemente der Webseite
65
4.1.1 Ein Beispiel für unterschiedliche Knoten
65
4.2 Der jQuery-Namensraum und das jQuery-Objekt
68
4.3 Spezielle Datentypen und Strukturen in Query
69
4.3.1 Methoden
70
4.3.2 Optionen
70
4.3.3 jqXHR
70
4.4 Die Funktion jQuery() und der Alias $()
70
4.4.1 Der Kontext
72
4.4.2 Verketten von Methoden und die jQuery-Warteschlange
73
4.4.3 Funktionsaufrufe nacheinander ausführen – die jQuery-Warteschlange
74
4.4.4 jQuery.sub(), jQuery.then() und jQuery.when()
75
4.5 Funktionen nach Aufbau des DOM ausführen
75
4.5.1 Callback oder anonyme Funktion als Parameter für jQuery()
76
4.5.2 Das ready-Event
78
4.5.3 document.ready() in eine externe JavaScript-Datei auslagern
78
4.5.4 Mit jQuery.holdReady() das ready-Event beeinflussen
79
4.6 Ein Element mit jQuery() erstellen und in die Webseite einfügen
79
4.6.1 Ein trickreiches kleines Problem – können Sie es lösen?
81
4.6.2 Optionen zum Initialisieren von Attributen
84
4.7 Direkter Zugriff auf DOM-Elemente mit get( )
86
4.8 Gemeinsame Verwendung von jQuery und anderen Frameworks
87
4.8.1 Die Funktion jQuery.noConflict()
88
4.8.2 Einen alternativen Alias verwenden
88
4.9 Mehr zum Kontext
90
4.9.1 context, selector und nodeName
90
4.10 jQuery.support und jQuery.browser – Browser-Identifizierung
92
4.11 Zusammenfassung
92
5 Umgang mit Selektoren und Filtern
94
5.1 Klassische DOM-Zugriffsmethoden
94
5.1.1 Objektfelder
94
5.1.2 Zugriff über einen Namen
95
5.1.3 Verwandtschaftsbeziehungen
95
5.1.4 Elementnamen, IDs und Klassennamen
95
5.1.5 DOM-Zugriffsmöglichkeiten versus jQuery
95
5.2 Was versteht man unter Selektoren?
96
5.2.1 Was ist ein Selektor?
96
5.2.2 Was sind Filter?
96
5.2.3 CSS3, SQL und XPath als Grundlagen und Hintergrund
97
5.3 Basisselektoren und hierarchische Selektoren
98
5.3.1 Beispiele zur Verdeutlichung
100
5.3.2 Potenzielle Fallen
110
5.4 Filterausdrücke
110
5.4.1 Basisfilter
111
5.4.2 Inhaltsfilter
118
5.4.3 Sichtbarkeitsfilter
121
5.4.4 Kindfilter
125
5.4.5 Attributfilter
128
5.4.6 Filter für Formularelemente und Formularfilter
132
5.4.7 Formularfilter zur Auswahl aufgrund des Zustands
135
5.5 Filtermethoden
137
5.5.1 Praktische Beispiele von Filtermethoden
138
5.6 Zusammenfassung
145
6 Zugriff auf die Elemente einer Webseite
146
6.1 Inhalte von Knoten abfragen und verändern – html() und text()
146
6.1.1 Ein Beispiel zu html() und text()
147
6.2 Inhalt von Formularfeldern – val()
150
6.2.1 Ein Beispiel für den Zugriff auf Formularfelder
150
6.3 Zugriff auf Attribute mit attr()
152
6.4 Einfügen von Knoten in eine Webseite
153
6.4.1 append() und prepend()
153
6.4.2 appendTo() und prependTo()
159
6.5 Knoten nachher oder vorher einfügen
165
6.5.1 after() und before()
165
6.5.2 insertAfter() und insertBefore()
165
6.6 Ummanteln
166
6.6.1 Einzeln mit wrap() ummanteln
166
6.6.2 Alles ummanteln mit wrapAll()
169
6.6.3 Innere Bereiche ummanteln mit wrapInner()
170
6.6.4 Den Mantel abnehmen – unwrap()
171
6.7 Ersetzen mit replaceWith() und replaceAll()
171
6.7.1 Ersetzen mit replaceWith()
171
6.7.2 Alles ersetzen mit replaceAll()
175
6.8 Überflüssige Knoten entfernen
178
6.8.1 Die Methoden empty() und remove()
178
6.8.2 Die Alternative zu remove() – detach()
185
6.8.3 Löschen von Attributen
185
6.9 Vervielfachen mit clone()
185
6.10 Suchen & Finden
185
6.10.1 Von Kindern und Eltern
186
6.10.2 Von Geschwistern
190
6.10.3 Nachfolger mit has() suchen
192
6.11 Finden mit find() und contents()
192
6.12 Mit each() über Arrays und Objekte iterieren
194
6.12.1 jQuery.each()
195
6.12.2 Die Methode each()
199
6.13 Die Methode add()
201
6.14 Die Methoden end() und andSelf()
202
6.15 Zusammenfassung
203
7 Layout und Formatieren mit Style Sheets unter jQuery
204
7.1 Hintergrundinformationen
204
7.1.1 CSS in jQuery – Vermischung von Layout und Funktionalität?
205
7.2 Die Methode css()
206
7.2.1 Abfragen von Stileigenschaften
206
7.2.2 Setzen von Eigenschaften
206
7.3 Klassen von Elementen verändern
207
7.3.1 Klassen hinzufügen – addClass()
207
7.3.2 Klassen wegnehmen – removeClass()
214
7.3.3 Klassen umschalten mit toggleClass()
215
7.3.4 Test auf eine Klasse – hasClass()
215
7.4 Methoden zur Positionierung
216
7.4.1 Bestimmen der Position mit position()
216
7.4.2 Position relativ zum Dokument – offset()
221
7.4.3 Methoden zum Scrollen
225
7.5 Höhe und Breite
227
7.5.1 height() und width()
227
7.6 Innere und äußere Maße
231
7.7 jQuery.cssHooks
233
7.8 Zusammenfassung
234
8 Ein Praxisbeispiel – eine Datumskomponente
236
8.1 Das Ziel
236
8.1.1 Die Basiswebseite
237
8.2 Die CSS-Datei – Templates
238
8.3 Die JavaScript-Datei
238
8.4 Zusammenfassung
244
9 Ereignisbehandlung unter jQuery
246
9.1 Grundlagen zu Ereignissen, Eventhandlern, Triggern und Datenbindung
247
9.1.1 Ereignisse
247
9.1.2 Allgemeines zu Eventhandlern
247
9.1.3 HTML-Eventhandler
248
9.1.4 JavaScript/DOM-Eventhandler
248
9.1.5 Das Ereignisobjekt
249
9.1.6 Blubbern und die Bubble-Phase
250
9.1.7 Datenbindung
252
9.1.8 Trigger
252
9.2 Das Ereignisobjekt in jQuery
252
9.2.1 Der Konstruktor von jQuery.Event
253
9.2.2 Die Eigenschaften des Ereignisobjekts jQuery.Event
253
9.2.3 Die Methoden eines Objekts vom Typ jQuery.Event
258
9.3 Ich habe fertig – $(document).ready()
260
9.4 Event-Helper
261
9.5 Erweiterte Methoden für das Eventhandling
265
9.5.1 Datenbindung
265
9.5.2 Triggern
270
9.6 Live Events
275
9.6.1 Die Methode live()
275
9.6.2 Die Methode delegate()
276
9.6.3 Die Methoden die() und undelegate()
280
9.7 jQuery.proxy()
280
9.8 Weiterentwicklung der Datumskomponente
283
9.9 Veraltete Hilfsfunktionen für die Interaktion
285
9.9.1 Die Funktion hover()
285
9.9.2 toggle()
286
9.10 Zusammenfassung
286
10 Effekte und Animationen
288
10.1 Grundsätzliche Anwendung
288
10.1.1 Speed is all you need
288
10.1.2 Die Angabe eines Callback
290
10.1.3 Verkettung
290
10.1.4 Warteschlangen
291
10.1.5 Beendigung mit stop(), finish() und jQuery.fx.off
291
10.1.6 Endlosanimationen
292
10.1.7 Art der Animationen – Easing
292
10.2 Konkrete Effekte mit Standardmethoden
293
10.2.1 Anzeigen und Wegblenden – die Methoden show() und hide()
294
10.2.2 Gleiteffekte – slideDown(), slideUp() und slideToggle()
294
10.2.3 Transparenzeffekte – fadeIn(), fadeOut() und fadeTo() sowie toggle()
296
10.3 Individuelle Animationen mit animate()
300
10.4 Zusammenfassung
308
11 AJAX und das Web 2.0
310
11.1 AJAX und XMLHttpRequest (XHR) – Grundlagen
310
11.1.1 Ein XMLHttpRequest-Objekt manuell erzeugen
311
11.1.2 Die Methoden eines XHR-Objekts
312
11.1.3 Die Eigenschaften eines XHR-Objekts
312
11.1.4 Das Datenformat bei einer AJAX-Kommunikation
313
11.1.5 Exemplarischer Ablauf einer AJAX-Anfrage
314
11.2 Spezialitäten bei der AJAX-Unterstützung in jQuery
315
11.2.1 JSONP und Remote Requests
315
11.2.2 Das jqXHR-Objekt
315
11.2.3 Grundsätzliches zu Methoden in jQuery für AJAX-Anfragen
316
11.2.4 Vermeidung von Caching
317
11.3 Anwendung der Standardmethoden für AJAX
318
11.3.1 $.get() und $.post()
318
11.3.2 JSON-Daten anfordern und verarbeiten – getJSON() und parseJSON()
327
11.4 Ein Skript per AJAX nachladen – jQuery.getScript()
328
11.5 Die allgemeine Variante zum Laden von Daten – load()
331
11.5.1 Filter angeben
332
11.6 Serialisieren von Daten
336
11.6.1 Die Methode serialize()
336
11.6.2 Die Methode serializeArray()
337
11.6.3 Die allgemeine Version zum Serialisieren – $.param()
338
11.7 Vorgabewerte für AJAX – jQuery.ajaxSetup()
339
11.8 AJAX Events und AJAX-Eventhandler
339
11.8.1 Lokale Ereignisse
339
11.8.2 Globale Ereignisse
341
11.9 Die vollständige Kontrolle
342
11.9.1 jQuery.ajax()
342
11.9.2 Erweiterte Techniken für $.ajax()
350
11.10 Zusammenfassung
352
12 jQuery UI
354
12.1 Was versteht man unter jQuery UI?
355
12.1.1 Komponenten zur Unterstützung der Interaktion
355
12.1.2 Widgets
355
12.1.3 Erweiterte Effekte
356
12.1.4 Das Themen-Framework samt ThemeRoller
356
12.2 Der Einstieg in jQuery UI
356
12.3 Wie nutzt man jQuery UI grundsätzlich?
357
12.3.1 Download und der ThemeRoller
357
12.3.2 Die Bereitstellung und Einbindung lokaler Ressourcen
362
12.3.3 Einbindung über ein CDN
362
12.4 Verwenden der Komponenten in jQuery UI
363
12.4.1 Die Defaulteinstellung
364
12.4.2 Einige grundsätzliche Regeln zu Komponenten und Widgets
367
12.4.3 Eigenschaften/Optionen von Komponenten
368
12.4.4 Methoden von Komponenten
370
12.4.5 Events bei Komponenten und Widgets
373
12.5 Ein Überblick über die Komponenten und Widgets
373
12.5.1 Die Interaktionskomponenten
374
12.5.2 Die Widgets
374
12.6 Effekte
386
12.6.1 Die Methode effekt()
386
12.6.2 Farbanimationen mit animate()
387
12.7 Zusammenfassung
387
13 jQuery Mobile
388
13.1 Grundlagen
389
13.1.1 Die Plattformen
389
13.1.2 Widgets und Features
390
13.1.3 Download und Bereitstellung
391
13.1.4 Themes und der ThemeRoller
393
13.1.5 Codiqa
394
13.2 Das Rollensystem und data-role
395
13.3 Der grundsätzliche Aufbau einer mobilen Seite
396
13.3.1 Ein erstes vollständiges Beispiel
398
13.4 Verknüpfen von Seiten
399
13.4.1 Externe Links mit Hijax
399
13.4.2 Interne Links und das spezielle Verständnis einer Seite
400
13.4.3 Zurück in der Historie
400
13.5 Die Übergänge
402
13.6 Dialoge
403
13.7 Schaltflächen
404
13.7.1 Schaltflächen mit Icons
404
13.7.2 Blockelement oder Inline-Element
405
13.7.3 Gruppierung
406
13.8 Toolbars und Navigationsbars
408
13.9 Listen
410
13.10 Formularelemente
411
13.10.1 Feldcontainer
412
13.10.2 Die verschiedenen Formularelemente
412
13.10.3 Deaktivieren von Elementen
412
13.10.4 Plugin-Methoden bei Formularelementen
413
13.10.5 Abschicken der Formulardaten
413
13.11 Spezielle Ereignisse
413
13.11.1 Berührungsereignisse
414
13.11.2 Änderung der Orientierung
414
13.11.3 Verschiebeereignisse
414
13.11.4 Seitenereignisse
415
13.11.5 Ein Beispiel mit Reaktionen auf Events
415
13.12 Kollabierte und expandierte Inhalte
418
13.13 Zusammenfassung
419
14 PluginPlugins
420
14.1 Die PluginPlugin-Seite von jQuery
420
14.2 Ein vorhandenes Plugin suchen und verwenden
422
14.3 Eigene Plugins erstellen
427
14.3.1 Warum eigene Plugins erstellen?
427
14.3.2 Erstellen eines ersten Plugins
427
14.3.3 Die wesentlichen Regeln zur Erstellung eines einfachen Plugins
430
14.3.4 Regeln zur Erstellung komplexerer Plugins
430
14.3.5 Ein Beispiel für ein Plugin mit Optionen
432
14.3.6 Ein weiteres Beispiel für ein Plugin mit Optionen
433
14.3.7 Ein Plugin veröffentlichen
435
14.4 Zusammenfassung
435
15 Anhang:
15 Anhang:
436
436
15.1 Case-Sensitivität
436
15.2 Variablen, Literale und Datentypen
436
15.2.1 Die klassischen JavaScript-Datentypen
437
15.3 Funktionen und Methoden
438
15.3.1 Funktionsaufruf versus Funktionsreferenz
439
15.3.2 Benannte versus anonyme Funktion
439
15.3.3 Callbacks
439
15.4 Objekte in JavaScript
440
15.4.1 Der Konstruktor
440
15.4.2 Deklarative Objekterzeugung mit einem Objektliteral
440
15.4.3 Zugriff auf Objektbestandteile
441
15.4.4 Arrays
441
Index
444
© 2009-2024 ciando GmbH