jQuery

Frank Bongers lebt und arbeitet in Berlin als freier Webdesigner, Autor und Dozent für Webprogrammierung. Seit 1999 verfolgt er die Entwicklung der Schlüsseltechnologien XML und XSLT.

Maximillian Vollendorf ist selbstständiger Webdesigner und kümmert sich in seiner Agentur form + fakten um Beratung, Konzeption und Umsetzung von komplexen Webprojekten. Er setzt jQuery seit Langem produktiv ein.

... Vorwort ... 17
1 ... jQuery kennenlernen ... 21
1.1 ... Was jQuery alles kann ... 21
1.2 ... Ein Framework? Eine Community! ... 23
1.3 ... Nicht ohne mein JavaScript ... 24
1.3.1 ... Gründe für das Entstehen von Frameworks ... 25
1.3.2 ... Nochmals – was ist ein Framework? ... 25
1.3.3 ... Aufgaben eines Frameworks ... 26
1.3.4 ... Aktuelle Frameworks für JavaScript ... 27
1.3.5 ... Frameworks – ein Rückblick ... 28
1.4 ... jQuery – viel mit wenig erreichen ... 29
2 ... Den Arbeitsplatz einrichten ... 31
2.1 ... Rechner und Betriebssystem ... 31
2.1.1 ... Windows ... 32
2.1.2 ... Mac OS X ... 32
2.1.3 ... Linux ... 32
2.2 ... Browser ... 33
2.2.1 ... Internet Explorer ... 33
2.2.2 ... Google Chrome ... 33
2.2.3 ... Firefox ... 33
2.2.4 ... Safari ... 34
2.2.5 ... Opera ... 35
2.3 ... Webserver ... 35
2.4 ... IDEs und Editoren ... 36
3 ... jQuery – der Einstieg ... 41
3.1 ... Vergleich: JavaScript mit und ohne jQuery ... 41
3.2 ... jQuery einbinden ... 43
3.2.1 ... jQuery 1.x oder 2.x – was denn nun? ... 44
3.2.2 ... jQuery online und offline nutzen ... 45
3.2.3 ... jQuery lokal einbinden ... 45
3.2.4 ... jQuery aus dem Google Online Repository einbinden ... 47
3.2.5 ... Das Beste aus beiden Welten ... 48
3.3 ... Das erste richtige Beispiel mit jQuery ... 48
3.4 ... Wir haben fertig ... 52
3.5 ... Das Mausereignis – Bindung eines Click- Events ... 54
3.5.1 ... Zunächst – die »aufdringliche« Variante ... 54
3.5.2 ... Etwas weniger aufdringlich, bitte! ... 55
3.5.3 ... Ein unaufdringlicher Dreizeiler, dank jQuery ... 56
3.6 ... Give me more! – Verkettung von jQuery-Methoden ... 60
3.6.1 ... Den Elternknoten eines Elements manipulieren ... 61
3.7 ... Zusammenfassung ... 66
4 ... jQuery – die Übersicht ... 67
4.1 ... Im Zentrum – das jQuery-Objekt ... 67
4.1.1 ... Drei Arten von jQuery-Methoden ... 68
4.2 ... Die Funktion $() und ihre Signatur ... 69
4.2.1 ... Leerer Aufruf ohne Argument ... 69
4.2.2 ... DOM- Elemente, jQuery-Objekt oder Plain Object als Argument ... 69
4.2.3 ... HTML- String als Argument ... 73
4.2.4 ... Callback-Funktion als Argument ... 76
4.2.5 ... CSS- Selektor als Argument ... 77
4.3 ... CSS- Selektoren für die primäre Collection ... 80
4.3.1 ... Die Basisselektoren ... 81
4.3.2 ... Mehrfachklassenselektor ... 82
4.3.3 ... Gruppen- und Kontextselektoren ... 82
4.3.4 ... Attributselektoren ... 85
4.3.5 ... Basis- Filterausdrücke für Selektoren ... 89
4.3.6 ... Inhaltsfilter ... 94
4.3.7 ... Filter für Formularelemente ... 97
4.3.8 ... Sichtbarkeitsfilter ... 98
4.3.9 ... Child- Filter – nach Position ... 100
4.3.10 ... Child- Filter – nach Typ und Position ... 104
4.4 ... Accessoren – Eigenschaften der Collection ... 106
4.4.1 ... Methode .each(callback) ... 107
4.4.2 ... Methode .get() und .get(index) ... 109
4.4.3 ... Methode .index(subject) ... 110
4.4.4 ... Methode .size() ... 110
4.4.5 ... Eigenschaft .length ... 110
4.4.6 ... Eigenschaften .selector und .context ... 111
4.4.7 ... Methode .toArray() ... 112
4.4.8 ... Methode .is() ... 112
4.5 ... Traversieren – ausgehend von Collections ... 113
4.5.1 ... Was ist und wann benötigt man eine »Traverse«? ... 113
4.5.2 ... jQuery- Methoden zur Achsen-Traverse ... 114
4.5.3 ... jQuery- Methoden zur erweiterten Achsen-Traverse ... 119
4.5.4 ... Filtern von Collections ... 127
4.5.5 ... Aufheben einer Filterung ... 133
4.5.6 ... Kopieren einer Collection ... 134
4.6 ... Events und Event-Handling ... 137
4.6.1 ... Das Event-Objekt in JavaScript ... 137
4.6.2 ... Das jQuery-Event-Objekt ... 139
4.6.3 ... Die jQuery-Methoden zu Event-Bindung ... 147
4.6.4 ... Direktes Binden und Lösen von Event- Listenern ... 148
4.6.5 ... Convenience-Methoden für direkte Event- Bindung ... 156
4.6.6 ... Shortcut-Methoden für direkte Event- Bindungen ... 158
4.6.7 ... Delegierendes Binden und Lösen von Event-Listenern ... 167
4.6.8 ... Triggern und Erzeugen von Events ... 173
4.7 ... Inhalte, Attribute, Datenspeicher ... 179
4.7.1 ... Lesen, Ändern und Entfernen von Attributen und DOM-Eigenschaften ... 181
4.7.2 ... Manipulation von Text- und Elementinhalt ... 186
4.7.3 ... Beliebige Daten an DOM-Elementen speichern ... 191
4.8 ... Formulare verarbeiten mit jQuery ... 194
4.8.1 ... Filterausdrücke für Formularelemente ... 194
4.8.2 ... Filter für Zustände von Formularinputs ... 198
4.8.3 ... Binden von Events an Formularelemente ... 202
4.8.4 ... Serialisierung von Formulardaten ... 204
4.8.5 ... Extraktion von Formularfeldwerten ... 207
4.9 ... DOM- Manipulation ... 211
4.9.1 ... Methoden zum Einfügen von Knoten ... 213
4.9.2 ... Entfernen von Knoten ... 218
4.9.3 ... Ersetzen von Knoten ... 221
4.9.4 ... Wrapping-Methoden ... 223
4.10 ... CSS und Style-Eigenschaften ... 229
4.10.1 ... Methoden für das class-Attribut ... 230
4.10.2 ... CSS- Eigenschaften manipulieren ... 238
4.10.3 ... Abmessungen von Containern ... 240
4.10.4 ... Position von Containern ... 242
4.10.5 ... Scrollen und Scrollposition ... 246
4.11 ... Animationen ... 249
4.11.1 ... Animationen ohne jQuery – CSS3- Transitions und CSS3-Animations ... 249
4.11.2 ... jQuery und CSS-Animationen ... 255
4.11.3 ... jQuery-Animationen – Zeigen und Verstecken ... 259
4.11.4 ... Slides – Zeigen und Verstecken mit Animation ... 263
4.11.5 ... Fades – Zeigen und Verstecken über Opacity ... 268
4.11.6 ... Utility-Methoden für Animationen ... 270
4.11.7 ... Animation mehrerer CSS-Parameter ... 274
4.11.8 ... Die Queue – Warteschlange für Effekte ... 283
4.11.9 ... Vollständiges Beispiel zu .queue() ... 287
4.11.10 ... Utilities für Queue und Animationen ... 290
4.12 ... Deferreds und Promises ... 291
4.12.1 ... Erzeugen eines Deferred-Objekts ... 292
4.12.2 ... Erzeugen eines Promise-Objekts ... 293
4.12.3 ... Test des Zustands des Deferred-Objekts ... 299
4.12.4 ... Das Deferred auflösen oder zurückweisen: Resolve, Reject, Notify ... 300
4.12.5 ... Bindung von Callbacks an Deferreds und Promises ... 306
4.12.6 ... Methode deferred.always() ... 307
4.12.7 ... Methode deferred.done() ... 308
4.12.8 ... Methode deferred.fail() ... 308
4.12.9 ... Methode deferred.progress() ... 309
4.12.10 ... Callback-Bindung mit neuem Promise als Rückgabewert ... 310
4.12.11 ... Methode deferred.then() ... 311
4.12.12 ... Methode deferred.pipe() ... 316
4.12.13 ... Deferreds im Einsatz mit Animationen ... 316
4.12.14 ... $.when() – Zusammenfassen mehrerer Promises ... 322
4.13 ... Managen von Callback-Ketten mit $.Callbacks() ... 328
4.13.1 ... Callback-Liste erstellen mit $.Callbacks() ... 328
4.13.2 ... Callback-Liste erweitern – callbacks.add() ... 329
4.13.3 ... Callback-Liste reduzieren – callbacks.remove() ... 330
4.13.4 ... Callback-Liste überprüfen – callbacks.has() ... 330
4.13.5 ... Callbacks feuern – callbacks.fire() und callbacks.fireWith() ... 331
4.13.6 ... Callback-Liste leeren – callbacks.empty() ... 333
4.13.7 ... Callback-Liste stilllegen – callbacks.disable() ... 333
4.13.8 ... Die Flags der Callback-Liste ... 333
4.13.9 ... Callback-Liste verriegeln – callbacks.lock() ... 336
4.13.10 ... Ein Click-Counter mit Callback-Liste ... 338
4.14 ... Ajax & JSON ... 341
4.14.1 ... Grundlagen zu Ajax ... 342
4.14.2 ... Daten und Datentypen für Ajax ... 346
4.14.3 ... jQuery und Ajax ... 348
4.14.4 ... Low- level Ajax-Ultilities ... 348
4.14.5 ... Das jqXHR-Objekt als Promise ... 361
4.14.6 ... Ajax- Utilities und Convenience-Requests ... 365
4.14.7 ... Globale Handler-Methoden ... 377
4.15 ... Utilities des $-Objekts – praktisches Dies und Das ... 380
4.15.1 ... Konfliktvermeidung mit anderen Frameworks ... 381
4.15.2 ... Browser- und Feature-Detection ... 387
4.15.3 ... Utilities zur Array-Verarbeitung ... 389
4.15.4 ... Utility zur Stringbearbeitung ... 394
4.15.5 ... Utilities für DOM-Knotenverarbeitung ... 395
4.15.6 ... Utilities für Funktionsaufrufe ... 398
4.15.7 ... Objektverarbeitung und Erweiterung von jQuery ... 400
4.15.8 ... Test- Utilities ... 405
4.16 ... Zusammenfassung und Ausblick ... 408
5 ... jQuery – der Praxiseinsatz ... 409
5.1 ... Wie organisiere ich meine Scripte ... 410
5.1.1 ... Die klassische Notation ... 411
5.1.2 ... Verwendung von Objekt-Literalen ... 412
5.1.3 ... Das Modul-Muster ... 414
5.1.4 ... Sinn und Unsinn dieses Beispiels ... 416
5.1.5 ... Zusammenfassung ... 418
5.2 ... Schönere Navigationen ... 418
5.2.1 ... Die FlyOut-Navigation ... 419
5.2.2 ... Flyout mit CSS-Transitions ... 430
5.2.3 ... Flyout- Menü mit dem Plugin-Transit ... 434
5.2.4 ... Die Tabs: Karteireiter ... 436
5.2.5 ... Das Akkordeon ... 441
5.2.6 ... Das Tree-Menu ... 445
5.2.7 ... Zusammenfassung ... 451
5.3 ... Von Tooltips und Links ... 451
5.3.1 ... Tooltips ... 451
5.3.2 ... Links sammeln, im Footer ausgeben ... 454
5.4 ... Spiel mit Bildern ... 456
5.4.1 ... Galerie I: Einfache Slideshow ... 459
5.4.2 ... Galerie II: Imagebox ... 468
5.4.3 ... Die Original Lightbox ... 478
5.5 ... Ajax mit jQuery einsetzen ... 480
5.5.1 ... Laden von HTML-Elementen ... 481
5.5.2 ... Laden von JSON ... 489
5.5.3 ... Laden von JSONP ... 495
5.5.4 ... Zusammenfassung ... 497
5.6 ... Formulare beherrschen mit jQuery ... 497
5.6.1 ... Formulare validieren ... 498
5.6.2 ... Formulare senden mit Ajax ... 504
5.6.3 ... Datepicker ... 507
5.6.4 ... Nächste Ausbaustufe: Autocomplete ... 509
5.7 ... Flexible Tabellen mit jQuery ... 513
5.7.1 ... Die Zebra-Tabelle ... 513
5.7.2 ... Die Tabelle sortieren ... 517
5.7.3 ... Paginierung von Tabellen ... 524
5.7.4 ... Grid- Plugins ... 529
5.7.5 ... Zusammenfassung ... 534
5.8 ... Von Browsern und Fenstern ... 535
5.8.1 ... Cookies ... 535
5.8.2 ... Die History des Browsers ... 541
5.8.3 ... Scrolling ... 545
5.8.4 ... Für faule Browser: Lazy-Load ... 548
5.8.5 ... Zusammenfassung ... 550
6 ... jQuery UI ... 551
6.1 ... Download und Konfiguration von jQuery UI ... 552
6.1.1 ... Der Download Builder von jQuery UI ... 553
6.2 ... Theming von jQuery UI ... 554
6.2.1 ... Scoped Themes ... 556
6.3 ... Einsatz von jQuery UI ... 558
6.3.1 ... Dateistruktur von jQuery UI ... 558
6.4 ... Einbinden von jQuery UI ... 559
6.5 ... CSS-Klassen eines UI-Widgets ... 560
6.6 ... Layout- Widgets aus jQuery UI ... 563
6.6.1 ... Dialog- Widget ... 563
6.6.2 ... Progressbar ... 570
6.6.3 ... Akkordeon-Widget ... 574
6.6.4 ... Tab- Widget ... 577
6.7 ... Formular- Widgets aus jQuery UI ... 579
6.7.1 ... Datepicker ... 580
6.7.2 ... Slider ... 586
6.7.3 ... Button ... 589
6.7.4 ... Autocomplete ... 593
6.8 ... Effekte und Interaktionen aus jQuery UI ... 594
6.8.1 ... Die Effekte aus jQuery UI ... 596
6.8.2 ... Interaktionen aus jQuery UI ... 603
6.8.3 ... Drag & Drop mit Draggables und Droppables ... 610
6.8.4 ... Sortierbare Elemente – Sortables ... 623
6.8.5 ... Größenveränderbare Elemente – Resizables ... 635
6.8.6 ... Auswählbare Elemente – Selectables ... 643
6.9 ... Zusammenfassung und Ausblick ... 648
7 ... Plugin- Entwicklung für jQuery ... 649
7.1 ... Das Plugin- Repository von jQuery ... 650
7.1.1 ... Suche im Repository ... 651
7.1.2 ... Ein Plugin downloaden ... 652
7.1.3 ... Ein Plugin anwenden ... 654
7.2 ... Selbst ist der Mann – eigene Plugins schreiben ... 658
7.2.1 ... Plugin- Gattungen: Functions und Methods ... 659
7.3 ... jQuery- Function-Plugin ... 659
7.3.1 ... Function-Plugin – der Aufbau ... 660
7.3.2 ... Beispiel für ein Function-Plugin – ein einfacher Logger ... 660
7.3.3 ... Beispiel für ein Function-Plugin – Ein CSS-Tool ... 662
7.4 ... jQuery- Method-Plugin ... 663
7.4.1 ... Method- Plugin – der Aufbau ... 664
7.5 ... Method- Plugin – Setzen von CSS-Styles ... 665
7.5.1 ... Method- Plugin mit Argument ... 665
7.5.2 ... Method- Plugin mit mehreren Argumenten ... 666
7.5.3 ... Method- Plugin mit Konfigurationsobjekt ... 667
7.5.4 ... toggleClick – Ein Ersatz für die Event- Methode .toggle() ... 671
7.5.5 ... multiToggle – Noch ein Ersatz für die Event-Methode .toggle() ... 673
7.5.6 ... Method- Plugin mit Subroutinen ... 677
7.6 ... Das jQuery- Method-Plugin rekapituliert ... 683
7.7 ... Zusammenfassung und Ausblick ... 684
8 ... Responsive Webdesign ... 685
8.1 ... Wann macht ein Responsive Layout Sinn? ... 686
8.2 ... Methodik: Mobile first vs. Desktop first ... 686
8.3 ... Media- Queries ... 687
8.3.1 ... Media- Angabe für verlinkte Stylesheets ... 688
8.3.2 ... Media- Angabe für Stylesheet-Import ... 688
8.3.3 ... Media- Angabe innerhalb eines Stylesheets ... 688
8.4 ... Syntax der CSS-Media-Angabe ... 689
8.4.1 ... Typangabe des User Agents ... 689
8.4.2 ... Query- Aspekt der Media-Query ... 691
8.4.3 ... Keywords für Media-Queries ... 691
8.5 ... Media- Features des User Agents ... 693
8.5.1 ... Media- Features: width, height ... 694
8.5.2 ... Media- Features: device-width, device-height ... 694
8.5.3 ... Media- Feature: orientation ... 695
8.5.4 ... Media- Features: aspect-ratio, device-aspect- ratio ... 695
8.5.5 ... Media- Feature: color ... 695
8.5.6 ... Media- Feature: color-index ... 696
8.5.7 ... Media- Feature: monochrome ... 696
8.5.8 ... Media- Feature: resolution ... 697
8.6 ... Einsatz der Media-Query im Responsive Layout ... 697
8.6.1 ... Anpassung des Layouts anhand der Viewport-Breite ... 698
8.7 ... Responsive Design und jQuery ... 700
8.7.1 ... Reihenfolge von Containern ändern ... 700
8.7.2 ... Bilder in verschiedenen Auflösungen ... 702
8.7.3 ... Slider mit Touch ... 703
8.7.4 ... Maurerhandwerk mit JavaScript und jQuery ... 706
8.8 ... Zusammenfassung und Ausblick ... 708
9 ... Going mobile mit jQuery ... 709
9.1 ... Ein Seitenblick auf die mobile Welt ... 709
9.2 ... Emulatoren und IDEs für Mobilgeräte ... 711
9.2.1 ... Emulatoren und IDEs für iPhone ... 711
9.2.2 ... Dreamweaver CC für jQuery Mobile ... 714
9.3 ... Ins mobile Web mit jQuery Mobile ... 716
9.3.1 ... Download oder Einbinden von der Website ... 718
9.3.2 ... Der jQuery Mobile Download Builder ... 719
9.4 ... Ein erstes Dokument mit jQuery Mobile ... 720
9.4.1 ... jQuery Mobile-Dateien im Header einbinden ... 720
9.4.2 ... Grundstrukturen im Body ... 721
9.4.3 ... Mehrere Seiten in einem Dokument ... 722
9.4.4 ... Eine einfache Navigation ... 723
9.4.5 ... Navigationen in der Toolbar ... 725
9.5 ... Seitenübergänge ... 727
9.6 ... Listenbuttons ... 729
9.6.1 ... Listviews mit Count-Bubbles ... 730
9.6.2 ... Listenbuttons in Splitviews ... 731
9.6.3 ... Listview mit Splitansicht – verbesserte Version ... 733
9.6.4 ... Seiten per Ajax ansprechen ... 735
9.7 ... Navbar- Button-Leisten ... 736
9.7.1 ... Navbar im Header ... 736
9.7.2 ... Navbar im Content-Bereich ... 737
9.7.3 ... Navbar im Footer-Bereich ... 738
9.7.4 ... Button- Leisten und Data-Grid ... 738
9.7.5 ... Button- Leisten mit Icons ... 741
9.8 ... Layoutraster – Inhalte anordnen ... 744
9.9 ... Collapsibles – Platzsparende Inhalte ... 746
9.9.1 ... Collapsibles ... 746
9.9.2 ... Collapsible-Sets ... 747
9.10 ... Formulare mit jQuery Mobile ... 749
9.10.1 ... Progressiv erweiterte Formularelemente ... 750
9.10.2 ... Native Formularelemente ... 751
9.10.3 ... Formularelemente im Einzelnen ... 751
9.10.4 ... Formulare versenden ... 756
9.10.5 ... Plugin-Methoden ... 756
9.10.6 ... Zurücksetzen (Degradieren) von Formularelementen ... 759
9.11 ... Themes und Swatches – Farben und Hintergründe ... 759
9.11.1 ... Eigene Themes – »Roll your own« mit dem ThemeRoller ... 765
9.12 ... Das mobileinit-Event ... 771
9.12.1 ... Enhancement des jQuery Mobile-Dokuments ... 772
9.12.2 ... Die Optionen des $.mobile- Konfigurationsobjekts ... 775
9.12.3 ... HTML5- data-Attribute in jQuery Mobile ... 779
9.13 ... Events in jQuery Mobile ... 792
9.14 ... Methoden von jQuery Mobile ... 798
9.15 ... Zusammenfassung ... 806
10 ... Der eigene jQuery-Build ... 807
10.1 ... Voraussetzungen zum Erstellen eines Builds ... 808
10.1.1 ... Installation von Git ... 809
10.1.2 ... Installation von NodeJS ... 811
10.1.3 ... Installation von Grunt und Bower ... 812
10.2 ... Das Git- Repository klonen ... 813
10.3 ... Einen Build des vollständigen jQuerys erzeugen ... 814
10.4 ... Einen individuellen jQuery-Build aufbauen ... 816
11 ... QUnit – Testen mit jQuery ... 821
11.1 ... Ideen zum Testen von JavaScript ... 821
11.1.1 ... Das alert-Statement ... 821
11.1.2 ... Die Konsole als Ausgabemedium ... 822
11.1.3 ... Eine Funktion durchleuchten ... 822
11.2 ... Testen mit Unit-Tests ... 825
11.2.1 ... Enter QUnit ... 826
11.3 ... Ein Blick auf QUnit ... 826
11.3.1 ... Download und Einbinden von QUnit ... 827
11.4 ... Ein Test mit QUnit – die Methode test() ... 831
11.5 ... Assertions ... 832
11.5.1 ... ok() ... 832
11.5.2 ... equal() und notEqual() ... 835
11.5.3 ... deepEqual() und notDeepEqual() ... 837
11.5.4 ... strictEqual() und notStrictEqual() ... 838
11.6 ... Module – mehrere Tests unter einer Haube ... 840
11.7 ... Testen asynchroner Anwendungen ... 842
11.7.1 ... Das Kontextproblem bei asynchronen Tests ... 842
11.7.2 ... Explizites Stoppen und Starten des Tests ... 843
11.7.3 ... Testlauf in Wartestellung – asyncTest() ... 844
11.8 ... Zusammenfassung und Ausblick ... 846
... Anhang ... 847
A ... HTML und CSS ... 847
A.1 ... Trennungen – Struktur, Präsentation, Verhalten ... 847
A.2 ... HTML – Beschreibung der Struktur ... 849
A.3 ... Aufbau von HTML-Dokumenten ... 852
A.4 ... CSS – Beschreibung der Präsentation ... 864
B ... JavaScript und DOM ... 887
B.1 ... JavaScript – Beschreibung des Verhaltens ... 887
B.2 ... Die Synthese – das Document Object Model ... 915
... Index ... 921

Das Praxisbuch zu jQuery richtet sich an Entwickler und Designer, die idealerweise mit den Grundlagen der Webentwicklung bereits vertraut sind und sich für den Aufbau von interaktiven und dynamischen Websites ohne großen Programmieraufwand mit JavaScript interessieren. Die aktuelle dritte Auflage wurde im Vergleich zur vorangegangenen Auflage um über 200 Seiten erweitert. Neu hinzugekommen sind vier neue Kapitel unter anderem zum Responsive Webdesign und dem Erstellen eines eigenen jQuery-Builds. Der ausführliche Anhang mit einer einfachen Einführung in HTML, CSS und JavaScript rundet das umfassende Handbuch ab, welches in der Gesamtnote mit "Sehr gut" zu bewerten ist. dotnetpro 201403

»Gesamtnote Sehr gut!« dotnetpro zur Vorauflage

»Das Fachbuch eignet sich für den Einsteiger und für den jQuery-Profi.« der webdesigner zur Vorauflage