Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
Vorwort
17
1 jQuery kennenlernen
23
1.1 Was jQuery alles kann
23
1.2 Ein Framework? Eine Community!
25
1.3 Nicht ohne mein JavaScript
26
1.3.1 Gründe für das Entstehen von Frameworks
27
1.3.2 Nochmals – was ist ein Framework?
27
1.3.3 Aufgaben eines Frameworks
28
1.3.4 Aktuelle Frameworks für JavaScript
29
1.3.5 Frameworks – ein Rückblick
30
1.4 jQuery – viel mit wenig erreichen
31
2 Den Arbeitsplatz einrichten
33
2.1 Rechner und Betriebssystem
33
2.1.1 Windows
34
2.1.2 macOS
34
2.1.3 Linux
34
2.2 Browser
35
2.2.1 Google Chrome
35
2.2.2 Internet Explorer
35
2.2.3 Firefox
35
2.2.4 Safari
36
2.3 Webserver
37
2.4 IDEs und Editoren
38
3 jQuery – der Einstieg
43
3.1 Vergleich: JavaScript mit und ohne jQuery
43
3.2 jQuery einbinden
45
3.2.1 jQuery 1.x , 2.x oder 3.x – was denn nun?
46
3.2.2 jQuery online und offline nutzen
48
3.2.3 jQuery lokal einbinden
48
3.2.4 jQuery aus dem Google Online Repository einbinden
50
3.2.5 Das Beste aus beiden Welten
51
3.3 Das erste richtige Beispiel mit jQuery
51
3.4 Wir haben fertig
55
3.5 Das Mausereignis – Bindung eines Click-Events
57
3.5.1 Zunächst – die »aufdringliche« Variante
57
3.5.2 Etwas weniger aufdringlich, bitte!
58
3.5.3 Ein unaufdringlicher Dreizeiler, dank jQuery
59
3.6 Give me more! – Verkettung von jQuery-Methoden
63
3.6.1 Den Elternknoten eines Elements manipulieren
64
3.7 Zusammenfassung
68
4 jQuery – die Übersicht
71
4.1 Im Zentrum – das jQuery-Objekt
71
4.1.1 Drei Arten von jQuery-Methoden
72
4.2 Die Funktion $() und ihre Signatur
73
4.2.1 Leerer Aufruf ohne Argument
73
4.2.2 DOM-Elemente, jQuery-Objekt oder Plain Object als Argument
73
4.2.3 HTML-String als Argument
77
4.2.4 Callback-Funktion als Argument
80
4.2.5 CSS-Selektor als Argument
81
4.3 CSS-Selektoren für die primäre Collection
85
4.3.1 Die Basisselektoren
85
4.3.2 Mehrfachklassenselektor
86
4.3.3 Gruppen- und Kontextselektoren
87
4.3.4 Attributselektoren
90
4.3.5 Basis-Filterausdrücke für Selektoren
94
4.3.6 Inhaltsfilter
99
4.3.7 Filter für Formularelemente
101
4.3.8 Sichtbarkeitsfilter
103
4.3.9 Child-Filter – nach Position
105
4.3.10 Child-Filter – nach Typ und Position
108
4.4 Accessoren – Eigenschaften der Collection
110
4.4.1 Methode .each(callback)
111
4.4.2 Methode .get() und .get(index)
112
4.4.3 Methode .index(subject)
113
4.4.4 Eigenschaft .length
114
4.4.5 Methode .toArray()
114
4.4.6 Methode .is()
115
4.5 Traversieren – ausgehend von Collections
115
4.5.1 Was ist und wann benötigt man eine »Traverse«?
116
4.5.2 jQuery-Methoden zur Achsen-Traverse
117
4.5.3 jQuery-Methoden zur erweiterten Achsen-Traverse
121
4.5.4 Filtern von Collections
129
4.5.5 Aufheben einer Filterung
135
4.5.6 Kopieren einer Collection
136
4.6 Events und Event-Handling
138
4.6.1 Das Event-Objekt in JavaScript
139
4.6.2 Das jQuery-Event-Objekt
141
4.6.3 Die jQuery-Methoden zu Event-Bindung
149
4.6.4 Direktes Binden und Lösen von Event-Listenern
149
4.6.5 Convenience-Methoden für direkte Event-Bindung
157
4.6.6 Shortcut-Methoden für direkte Event-Bindungen
159
4.6.7 Delegierendes Binden und Lösen von Event-Listenern
166
4.6.8 Triggern und Erzeugen von Events
172
4.7 Inhalte, Attribute, Datenspeicher
178
4.7.1 Lesen, Ändern und Entfernen von Attributen und DOM-Eigenschaften
180
4.7.2 Manipulation von Text- und Elementinhalt
185
4.7.3 Beliebige Daten an DOM-Elementen speichern
189
4.8 Formulare verarbeiten mit jQuery
193
4.8.1 Filterausdrücke für Formularelemente
193
4.8.2 Filter für Zustände von Formularinputs
196
4.8.3 Binden von Events an Formularelemente
201
4.8.4 Serialisierung von Formulardaten
202
4.8.5 Extraktion von Formularfeldwerten
206
4.9 DOM-Manipulation
210
4.9.1 Methoden zum Einfügen von Knoten
212
4.9.2 Entfernen von Knoten
217
4.9.3 Ersetzen von Knoten
220
4.9.4 Wrapping-Methoden
221
4.10 CSS und Style-Eigenschaften
227
4.10.1 Methoden für das class-Attribut
229
4.10.2 CSS-Eigenschaften manipulieren
236
4.10.3 Abmessungen von Containern
238
4.10.4 Position von Containern
240
4.10.5 Scrollen und Scrollposition
244
4.11 Animationen
247
4.11.1 Animationen ohne jQuery – CSS3-Transitions und CSS3-Animations
248
4.11.2 jQuery und CSS-Animationen
253
4.11.3 jQuery-Animationen – Zeigen und Verstecken
258
4.11.4 Slides – Zeigen und Verstecken mit Animation
261
4.11.5 Fades – Zeigen und Verstecken über Opacity
266
4.11.6 Utility-Methoden für Animationen
268
4.11.7 Animation mehrerer CSS-Parameter
272
4.11.8 Die Queue – Warteschlange für Effekte
281
4.11.9 Vollständiges Beispiel zu .queue()
285
4.11.10 Utilitys für Queue und Animationen
287
4.12 Deferreds und Promises
289
4.12.1 Erzeugen eines Deferred-Objekts
290
4.12.2 Erzeugen eines Promise-Objekts
291
4.12.3 Test des Zustands des Deferred-Objekts
297
4.12.4 Das Deferred auflösen oder zurückweisen: Resolve, Reject, Notify
298
4.12.5 Bindung von Callbacks an Deferreds und Promises
304
4.12.6 Methode deferred.always()
305
4.12.7 Methode deferred.done()
306
4.12.8 Methode deferred.fail()
306
4.12.9 Methode deferred.progress()
307
4.12.10 Callback-Bindung mit neuem Promise als Rückgabewert
308
4.12.11 Methode deferred.then()
309
4.12.12 Methode deferred.pipe()
312
4.12.13 $.when() – Zusammenfassen mehrerer Promises
320
4.13 Managen von Callback-Ketten mit $.Callbacks()
326
4.13.1 Callback-Liste erstellen mit $.Callbacks()
326
4.13.2 Callback-Liste erweitern – callbacks.add()
327
4.13.3 Callback-Liste reduzieren – callbacks.remove()
328
4.13.4 Callback-Liste überprüfen – callbacks.has()
328
4.13.5 Callbacks feuern – callbacks.fire() und callbacks.fireWith()
329
4.13.6 Callback-Liste leeren – callbacks.empty()
330
4.13.7 Callback-Liste stilllegen – callbacks.disable()
331
4.13.8 Die Flags der Callback-Liste
331
4.13.9 Callback-Liste verriegeln – callbacks.lock()
334
4.13.10 Ein Click-Counter mit Callback-Liste
336
4.14 Ajax & JSON
338
4.14.1 Grundlagen zu Ajax
339
4.14.2 Daten und Datentypen für Ajax
343
4.14.3 jQuery und Ajax
345
4.14.4 Low-Level-Ajax-Ultilitys
346
4.14.5 Das jqXHR-Objekt als Promise
359
4.14.6 Ajax-Utilitys und Convenience-Requests
362
4.14.7 Globale Handler-Methoden
374
4.15 Utilitys des $-Objekts – praktisches Dies und Das
377
4.15.1 Konfliktvermeidung mit anderen Frameworks
378
4.15.2 Browser- und Feature-Detection
384
4.15.3 Utility zur Array-Verarbeitung
386
4.15.4 Utility zur String-Bearbeitung
391
4.15.5 Utilitys für DOM-Knotenverarbeitung
392
4.15.6 Utilitys für Funktionsaufrufe
394
4.15.7 Objektverarbeitung und Erweiterung von jQuery
396
4.15.8 Test-Utilitys
401
4.16 Zusammenfassung und Ausblick
405
5 jQuery – der Praxiseinsatz
407
5.1 Über die vorgestellten Beispiele
407
5.2 Wie organisiere ich meine Scripte
408
5.2.1 Die einfache Notation
409
5.2.2 Verwendung von Objektliteralen
410
5.2.3 Das Modulmuster
412
5.2.4 Zusammenfassung
413
5.3 jQuery oder nicht jQuery, das ist hier die Frage
414
5.4 Navigationen
419
5.4.1 Die Tabs: Karteireiter
419
5.4.2 Das Akkordeon
423
5.4.3 Zusammenfassung
427
5.5 Von Tooltips und Links
428
5.5.1 Tooltips
428
5.5.2 Links sammeln, im Footer ausgeben
430
5.6 Spiel mit Bildern
432
5.6.1 Eine Slideshow
436
5.7 Ajax mit jQuery einsetzen
445
5.7.1 Laden von HTML-Elementen
446
5.7.2 Laden von JSON
450
5.7.3 Laden von JSONP
456
5.7.4 Zusammenfassung
458
5.8 Formulare beherrschen mit jQuery
458
5.8.1 Formulare validieren
459
5.8.2 Formulare senden mit Ajax
465
5.8.3 Datepicker
468
5.8.4 Nächste Ausbaustufe: Autocomplete
470
5.9 Flexible Tabellen mit jQuery
474
5.9.1 Die Tabelle sortieren
475
5.9.2 Paginierung von Tabellen
481
5.9.3 Grid-Plugins
486
5.9.4 Zusammenfassung
490
5.10 Von Browsern und Fenstern
490
5.10.1 Cookies
490
5.10.2 Die History des Browsers
496
5.10.3 Scrolling
499
5.10.4 Für faule Browser: Lazy-Load
503
5.10.5 Zusammenfassung
506
6 jQuery UI
507
6.1 Download und Konfiguration von jQuery UI
508
6.1.1 Der Download Builder von jQuery UI
509
6.2 Theming von jQuery UI
510
6.2.1 Scoped Themes
512
6.3 Einsatz von jQuery UI
514
6.3.1 Dateistruktur von jQuery UI
514
6.4 Einbinden von jQuery UI
514
6.5 CSS-Klassen eines UI-Widgets
516
6.6 Layout-Widgets aus jQuery UI
518
6.6.1 Dialog-Widget
519
6.6.2 Progressbar
525
6.6.3 Akkordeon-Widget
530
6.6.4 Tab-Widget
532
6.7 Formular-Widgets aus jQuery UI
535
6.7.1 Datepicker
535
6.7.2 Slider
541
6.7.3 Button
544
6.7.4 Autocomplete
547
6.8 Effekte und Interaktionen aus jQuery UI
548
6.8.1 Die Effekte aus jQuery UI
551
6.8.2 Interaktionen aus jQuery UI
558
6.8.3 Drag & Drop mit Draggables und Droppables
565
6.8.4 Sortierbare Elemente – Sortables
579
6.8.5 Größenveränderbare Elemente – Resizables
592
6.8.6 Auswählbare Elemente – Selectables
599
6.9 Zusammenfassung und Ausblick
605
7 Plugin-Entwicklung für jQuery
607
7.1 Das Plugin-Repository von jQuery
608
7.1.1 Suche im jQuery-Repository
609
7.1.2 Ein Plugin downloaden
610
7.1.3 Ein Plugin anwenden
611
7.2 Selbst ist der Mann – eigene Plugins schreiben
616
7.2.1 Plugin-Gattungen: »Functions« und »Methods«
616
7.3 jQuery-Function-Plugin
617
7.3.1 Function-Plugin – der Aufbau
617
7.3.2 Beispiel für ein Function-Plugin – ein einfacher Logger
617
7.3.3 Beispiel für ein Function-Plugin – ein CSS-Tool
619
7.4 jQuery-Method-Plugin
621
7.4.1 Method-Plugin – der Aufbau
622
7.5 Method-Plugin – Setzen von CSS-Styles
622
7.5.1 Method-Plugin mit Argument
623
7.5.2 Method-Plugin mit mehreren Argumenten
624
7.5.3 Method-Plugin mit Konfigurationsobjekt
624
7.5.4 toggleClick – ein Ersatz für die Event-Methode .toggle()
628
7.5.5 multiToggle – noch ein Ersatz für die Event-Methode .toggle()
631
7.5.6 Method-Plugin mit Subroutinen
634
7.5.7 Plugins mit Callback-Funktionen
640
7.6 Das jQuery-Method-Plugin rekapituliert
642
7.7 Zusammenfassung und Ausblick
643
8 Responsive Webdesign
645
8.1 Wann macht ein Responsive Layout Sinn?
646
8.2 Methodik: Mobile first vs. Desktop first
646
8.3 Media-Queries
647
8.3.1 Media-Angabe für verlinkte Stylesheets
648
8.3.2 Media-Angabe für Stylesheet-Import
648
8.3.3 Media-Angabe innerhalb eines Stylesheets
649
8.4 Syntax der CSS-Media-Angabe
649
8.4.1 Typangabe des User Agents
650
8.4.2 Query-Aspekt der Media-Query
651
8.4.3 Keywords für Media-Queries
652
8.5 Media-Features des User Agents
653
8.5.1 Media-Features: width, height
654
8.5.2 Media-Features: device-width, device-height
654
8.5.3 Media-Feature: orientation
655
8.5.4 Media-Features: aspect-ratio, device-aspect-ratio
655
8.5.5 Media-Feature: color
655
8.5.6 Media-Feature: color-index
656
8.5.7 Media-Feature: monochrome
656
8.5.8 Media-Feature: resolution
656
8.6 Einsatz der Media-Query im Responsive Layout
657
8.6.1 Anpassung des Layouts anhand der Viewport-Breite
658
8.7 Responsive Design und jQuery
660
8.7.1 Reihenfolge von Containern ändern
660
8.7.2 Bilder in verschiedenen Auflösungen
662
8.7.3 Slider mit Touch
663
8.7.4 Maurerhandwerk mit JavaScript und jQuery
666
8.8 Zusammenfassung und Ausblick
668
9 Going mobile mit jQuery
669
9.1 Ein Seitenblick auf die mobile Welt
669
9.2 Emulatoren und IDEs für Mobilgeräte
671
9.3 Ins mobile Web mit jQuery Mobile
672
9.3.1 Download oder Einbinden von der Website
673
9.3.2 Der jQuery Mobile Download Builder
674
9.4 Ein erstes Dokument mit jQuery Mobile
675
9.4.1 jQuery-Mobile-Dateien im Header einbinden
675
9.4.2 Grundstrukturen im Body
676
9.4.3 Mehrere Seiten in einem Dokument
677
9.4.4 Eine einfache Navigation
679
9.4.5 Navigationen in der Toolbar
680
9.5 Seitenübergänge
683
9.6 Listenbuttons
684
9.6.1 Listviews mit Count-Bubbles
686
9.6.2 Listenbuttons in Splitviews
686
9.6.3 Listview mit Splitansicht – verbesserte Version
689
9.6.4 Seiten per Ajax ansprechen
690
9.7 Navbar-Button-Leisten
691
9.7.1 Navbar im Header
692
9.7.2 Navbar im Content-Bereich
692
9.7.3 Navbar im Footer-Bereich
693
9.7.4 Button-Leisten und Data-Grid
694
9.7.5 Button-Leisten mit Icons
696
9.8 Layoutraster – Inhalte anordnen
697
9.9 Collapsibles – platzsparende Inhalte
699
9.9.1 Collapsibles
699
9.9.2 Collapsible-Sets
701
9.10 Formulare mit jQuery Mobile
703
9.10.1 Progressiv erweiterte Formularelemente
703
9.10.2 Native Formularelemente
704
9.10.3 Formularelemente im Einzelnen
704
9.10.4 Formulare versenden
708
9.10.5 Plugin-Methoden
709
9.10.6 Zurücksetzen (Degradieren) von Formularelementen
712
9.11 Themes und Swatches – Farben und Hintergründe
712
9.11.1 Eigene Themes – »Roll your own« mit dem ThemeRoller
717
9.12 Das mobileinit-Event
722
9.12.1 Enhancement des jQuery-Mobile-Dokuments
723
9.12.2 Die Optionen des $.mobile-Konfigurationsobjekts
727
9.12.3 HTML5-data-Attribute in jQuery Mobile
731
9.13 Events in jQuery Mobile
744
9.14 Methoden von jQuery Mobile
750
9.15 Zusammenfassung
758
10 Der eigene jQuery-Build
759
10.1 Voraussetzungen zum Erstellen eines Builds
760
10.1.1 Installation von Git
761
10.1.2 Installation von NodeJS
762
10.1.3 Installation von Grunt und Bower
764
10.2 Das Git-Repository klonen
765
10.3 Einen Build des vollständigen jQuerys erzeugen
766
10.4 Einen individuellen jQuery-Build aufbauen
767
11 QUnit – Testen mit jQuery
771
11.1 Ideen zum Testen von JavaScript
771
11.1.1 Das alert-Statement
771
11.1.2 Die Konsole als Ausgabemedium
772
11.1.3 Eine Funktion durchleuchten
772
11.2 Testen mit Unit-Tests
775
11.2.1 Enter QUnit
776
11.3 Ein Blick auf QUnit
776
11.3.1 Download und Einbinden von QUnit
777
11.4 Ein Test mit QUnit – die Methode test()
781
11.5 Assertions
782
11.5.1 ok()
782
11.5.2 equal() und notEqual()
784
11.5.3 deepEqual() und notDeepEqual()
787
11.5.4 strictEqual() und notStrictEqual()
788
11.6 Module – mehrere Tests unter einer Haube
789
11.7 Testen asynchroner Anwendungen
791
11.7.1 Das Kontextproblem bei asynchronen Tests
792
11.7.2 Asynchrones Testen
792
11.8 Zusammenfassung und Ausblick
793
Anhang
795
A HTML und CSS
795
B JavaScript und DOM
835
Index
869