|
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 |
|