jQuery (eBook)

Der Diplom-Mathematiker Ralph Steyer arbeitet seit 1996 selbstständig im Bereich EDV-Schulung, Programmierung und Beratung. Seine Spezialgebiete sind die Internetprogrammierung und objektorientierte Software-Entwicklung. Unter anderem unterrichtet er an einer Bankakademie und einer Fachhochschule. Er schreibt außerdem regelmäßig für verschiedene Computermagazine und ist Autor zahlreicher Fachbücher und Videopublikationen. Seine Webseite finden Sie unter www.rjs.de und seinen Blog unter blog.rjs.de.

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