jQuery - Das Praxisbuch
von: Frank Bongers, Maximilian Vollendorf
Galileo Press, 2011
ISBN: 9783836218108
Sprache: Deutsch
731 Seiten, Download: 13122 KB
Format: PDF, auch als Online-Lesen
geeignet für:
| Liebe Leserin, lieber Leser | 3 | ||
| Auf einen Blick | 4 | ||
| Inhalt | 6 | ||
| Vorwort | 14 | ||
| An wen richtet sich dieses Buch? | 15 | ||
| Einsteiger, Designer, Neugierige | 15 | ||
| Entwickler, Webdeveloper | 15 | ||
| Was finden Sie in diesem Buch? | 15 | ||
| Und nun an die Arbeit … | 17 | ||
| 1 jQuery kennenlernen | 18 | ||
| 1.1 Was jQuery alles kann | 18 | ||
| 1.2 Ein Framework? Eine Community! | 20 | ||
| 1.3 Nicht ohne mein JavaScript | 21 | ||
| 1.3.1 Gründe für das Entstehen von Frameworks | 22 | ||
| 1.3.2 Nochmals - was ist ein Framework? | 23 | ||
| 1.3.3 Aufgaben eines Frameworks | 23 | ||
| 1.3.4 Aktuelle Frameworks für JavaScript | 24 | ||
| 1.3.5 Frameworks - ein Rückblick | 25 | ||
| 1.4 jQuery - viel mit wenig erreichen | 26 | ||
| 2 Den Arbeitsplatz einrichten | 28 | ||
| 2.1 Rechner und Betriebssystem | 28 | ||
| 2.1.1 Windows | 29 | ||
| 2.1.2 Mac OS X | 29 | ||
| 2.1.3 Linux | 29 | ||
| 2.2 Browser | 30 | ||
| 2.2.1 Internet Explorer | 30 | ||
| 2.2.2 Firefox | 31 | ||
| 2.2.3 Opera | 32 | ||
| 2.2.4 Safari | 32 | ||
| 2.2.5 Google Chrome | 32 | ||
| 2.3 Webserver | 32 | ||
| 2.4 IDEs und Editoren | 33 | ||
| 3 jQuery - der Einstieg | 38 | ||
| 3.1 Vergleich: JavaScript mit und ohne jQuery | 38 | ||
| 3.2 jQuery einbinden | 40 | ||
| 3.2.1 jQuery online und offline nutzen | 41 | ||
| 3.2.2 jQuery lokal einbinden | 41 | ||
| 3.2.3 jQuery aus dem Google OnlineRepository einbinden | 42 | ||
| 3.3 Unser Beispiel mit jQuery | 43 | ||
| 3.4 Wir haben fertig | 47 | ||
| 3.5 Das Mausereignis - Bindung eines Click-Events | 49 | ||
| 3.5.1 Zunächst - die »aufdringliche« Variante | 50 | ||
| 3.5.2 Etwas weniger aufdringlich, bitte! | 51 | ||
| 3.5.3 Ein unaufdringlicher Dreizeiler, dank jQuery | 52 | ||
| 3.6 Give me more! - Verkettung von jQuery-Methoden | 55 | ||
| 3.6.1 Den Elternknoten eines Elements manipulieren | 56 | ||
| 3.7 Zusammenfassung | 61 | ||
| 4 jQuery - die Übersicht | 62 | ||
| 4.1 Im Zentrum - das jQuery-Objekt | 62 | ||
| 4.1.1 Drei Arten von jQuery-Methoden | 63 | ||
| 4.2 Die Funktion $() und ihre Signatur | 64 | ||
| 4.2.1 Ein DOM-Element oder jQuery-Objekt als Argument | 64 | ||
| 4.2.2 HTML-String als Argument | 66 | ||
| 4.2.3 Eine Callback-Funktion als Argument | 67 | ||
| 4.2.4 Ein CSS-Selektor als Argument | 68 | ||
| 4.3 CSS-Selektoren für die primäre Collection | 70 | ||
| 4.3.1 Die Basisselektoren | 70 | ||
| 4.3.2 Der Mehrfachklassenselektor | 71 | ||
| 4.3.3 Gruppen- und Kontextselektoren | 71 | ||
| 4.3.4 Filterausdrücke für Selektoren | 74 | ||
| 4.3.5 Inhaltsfilter | 78 | ||
| 4.3.6 Sichtbarkeitsfilter | 80 | ||
| 4.3.7 Attributfilter | 81 | ||
| 4.3.8 Child-Filter | 85 | ||
| 4.4 Accessoren - Eigenschaften der Collection | 88 | ||
| 4.5 Traversieren - ausgehend von Collections | 93 | ||
| 4.5.1 Was versteht man unter »Traversieren«? | 94 | ||
| 4.5.2 jQuery-Methoden zur Achsen-Traverse | 94 | ||
| 4.5.3 jQuery-Methoden zur erweiterten Achsen-Traverse | 98 | ||
| 4.5.4 Filtern von Collections | 106 | ||
| 4.5.5 Aufheben einer Filterung | 111 | ||
| 4.5.6 Kopieren einer Collection | 112 | ||
| 4.6 Events und Event-Handling | 114 | ||
| 4.6.1 Das Event-Objekt in JavaScript | 115 | ||
| 4.6.2 Das jQuery-Event-Objekt | 117 | ||
| 4.6.3 Allgemeine Methoden zu Event-Bindung | 124 | ||
| 4.6.4 Spezielle Event-Bindungen (Convenience-Methoden) | 129 | ||
| 4.6.5 Erzeugen von Events | 131 | ||
| 4.6.6 Shortcut-Methoden für bestimmte Event-Typen | 132 | ||
| 4.6.7 Binden sonstiger Events | 137 | ||
| 4.7 Inhalte, Attribute, Datenspeicher | 137 | ||
| 4.7.1 Lesen, Ändern und Entfernen von Attributen und DOM- Eigenschaften | 138 | ||
| 4.7.2 Manipulation von Text- und Elementinhalt | 142 | ||
| 4.7.3 Daten in Objekten speichern | 146 | ||
| 4.8 Formulare verarbeiten mit jQuery | 148 | ||
| 4.8.1 Filterausdrücke für Formularelemente | 148 | ||
| 4.8.2 Filter für Zustände von Formularinputs | 151 | ||
| 4.8.3 Binden von Events an Formularelemente | 156 | ||
| 4.8.4 Serialisierung von Formulardaten | 157 | ||
| 4.8.5 Extraktion von Formularfeldwerten | 160 | ||
| 4.9 DOM-Manipulation | 164 | ||
| 4.9.1 Methoden zum Einfügen von Knoten | 166 | ||
| 4.9.2 Entfernen von Knoten | 171 | ||
| 4.9.3 Ersetzen von Knoten | 173 | ||
| 4.9.4 Wrapping-Methoden | 175 | ||
| 4.10 CSS und Styleeigenschaften | 178 | ||
| 4.10.1 Methoden für das class-Attribut | 178 | ||
| 4.10.2 CSS-Eigenschaften manipulieren | 184 | ||
| 4.10.3 Abmessungen von Containern | 186 | ||
| 4.10.4 Position von Containern | 187 | ||
| 4.10.5 Scrollen und Scrollposition | 191 | ||
| 4.10.6 Eigene Style-Utilitys mit jQuery.cssHooks | 194 | ||
| 4.11 Animationen mit jQuery | 197 | ||
| 4.11.1 Zeigen und Verstecken | 197 | ||
| 4.11.2 Slides - Zeigen und Verstecken mit Animation | 200 | ||
| 4.11.3 Fades - Zeigen und Verstecken über Opacity | 204 | ||
| 4.11.4 Utility-Methoden für Animationen | 207 | ||
| 4.11.5 Animation mehrerer CSS-Parameter | 211 | ||
| 4.11.6 Die Queue - Warteschlange für Effekte | 219 | ||
| 4.11.7 Vollständiges Beispiel zu .queue() | 223 | ||
| 4.11.8 Helferfunktionen für Queue und Animationen | 225 | ||
| 4.12 Deferreds und ihre Verwendung | 226 | ||
| 4.12.1 Methoden des Deferred-Objekts: Bindung von Callbacks | 229 | ||
| 4.12.2 Methoden des Deferred-Objekts: Auflösen und Zurückweisen | 233 | ||
| 4.12.3 Methoden des Deferred-Objekts: Test des Zustands | 236 | ||
| 4.12.4 Methoden des Deferred-Objekts: Helferfunktionen für Deferreds | 236 | ||
| 4.12.5 Deferreds und $.when() | 240 | ||
| 4.13 Deferreds und Ajax | 241 | ||
| 4.14 Ajax & JSON | 242 | ||
| 4.14.1 Grundlagen zu Ajax | 243 | ||
| 4.14.2 Daten und Datentypen für Ajax | 248 | ||
| 4.14.3 jQuery und Ajax | 250 | ||
| 4.14.4 Low-Level-Ajax-Ultilitys | 250 | ||
| 4.14.5 Helferfunktionen und Convenience-Methoden | 259 | ||
| 4.14.6 Globale Handler-Methoden | 270 | ||
| 4.15 jQuery-Helferfunktionen - praktisches Dies und Das | 273 | ||
| 4.15.1 Konfliktvermeidung mit anderen Frameworks | 274 | ||
| 4.15.2 Browser und Feature Detection | 280 | ||
| 4.15.3 Helferfunktionen zur Array-Verarbeitung | 282 | ||
| 4.15.4 Utility zur Stringverarbeitung | 287 | ||
| 4.15.5 Helferfunktionen für die DOM-Knotenverarbeitung | 288 | ||
| 4.15.6 Helferfunktionen für den jQuery-Core | 291 | ||
| 4.15.7 Helferfunktionen für Funktionsaufrufe | 295 | ||
| 4.15.8 Objektverarbeitung und Erweiterung von jQuery | 297 | ||
| 4.15.9 Test-Utilities | 302 | ||
| 5 jQuery - der Praxiseinsatz | 308 | ||
| 5.1 Schönere Navigationen | 309 | ||
| 5.1.1 Die FlyOut-Navigation | 310 | ||
| 5.1.2 Die Tabs: Karteireiter | 324 | ||
| 5.1.3 Das Akkordeon | 329 | ||
| 5.1.4 Die Spaltennavigation | 333 | ||
| 5.1.5 Von der Spaltennavigation zum Drill-Menü | 341 | ||
| 5.1.6 Das Tree Menu | 344 | ||
| 5.1.7 Kleines Helferlein: Die dynamische Sitemap | 347 | ||
| 5.1.8 Zusammenfassung | 349 | ||
| 5.2 Von Tooltips bis Sprites | 349 | ||
| 5.2.1 Tooltips | 349 | ||
| 5.2.2 Links sammeln, im Footer ausgeben | 353 | ||
| 5.2.3 Die Kobolde auf meinem Bildschirm | 354 | ||
| 5.3 Spiel mit Bildern | 361 | ||
| 5.3.1 Galerie I: Einfache Slideshow | 364 | ||
| 5.3.2 Galerie II: Imagebox | 372 | ||
| 5.4 Ausgewählte Plugins | 383 | ||
| 5.5 Ajax mit jQuery einsetzen | 386 | ||
| 5.5.1 Laden von HTML-Elementen | 388 | ||
| 5.5.2 Laden von JSON | 399 | ||
| 5.5.3 Laden von JSONP | 405 | ||
| 5.5.4 Zusammenfassung | 407 | ||
| 5.6 Plugin-Entwicklung | 407 | ||
| 5.6.1 Eigene Plugins entwickeln | 407 | ||
| 5.6.2 Allgemeines Muster eines jQuery-Plugins | 417 | ||
| 5.7 jQuery UI | 418 | ||
| 5.7.1 Themeroller | 420 | ||
| 5.7.2 Ein Theme manuell bearbeiten | 421 | ||
| 5.7.3 Ein kleines Beispiel: Hintergrundfarbe animieren | 423 | ||
| 5.7.4 Klassen animieren | 425 | ||
| 5.7.5 jQuery UI-Dialog | 426 | ||
| 5.7.6 jQuery UI Accordion | 429 | ||
| 5.7.7 Exkurs: Easing Equations | 431 | ||
| 5.7.8 Zusammenfassung | 433 | ||
| 5.8 Formulare beherrschen mit jQuery | 433 | ||
| 5.8.1 Formulare validieren | 434 | ||
| 5.8.2 Formulare senden mit Ajax | 440 | ||
| 5.8.3 Datepicker | 443 | ||
| 5.8.4 Nächste Ausbaustufe: Autocomplete | 445 | ||
| 5.9 Flexiblere Tabellen mit jQuery | 449 | ||
| 5.9.1 Die Zebra-Tabelle | 449 | ||
| 5.9.2 Die Tabelle sortieren | 452 | ||
| 5.9.3 Paginierung von Tabellen | 459 | ||
| 5.9.4 Grid-Plugins | 463 | ||
| 5.9.5 Zusammenfassung | 468 | ||
| 5.10 Browser und Fenster | 469 | ||
| 5.10.1 Cookies | 469 | ||
| 5.10.2 Die History des Browsers | 475 | ||
| 5.10.3 Flash-Filme mit jQuery einbinden | 479 | ||
| 5.10.4 Scrolling | 482 | ||
| 5.10.5 Scrollen mit Geschichte | 485 | ||
| 5.10.6 Das jQuery.ScrollTo-Plugin | 490 | ||
| 5.10.7 Zusammenfassung | 496 | ||
| 6 Going mobile mit jQuery | 498 | ||
| 6.1 jQuery Mobile und jQTouch | 499 | ||
| 6.2 Emulatoren und IDEs für Mobilgeräte | 500 | ||
| 6.2.1 Emulatoren und IDEs für iPhone | 501 | ||
| 6.2.2 Dreamweaver CS5.5 für jQuery Mobile | 504 | ||
| 6.3 Ins mobile Web mit jQTouch | 507 | ||
| 6.3.1 Konfiguration von jQTouch | 521 | ||
| 6.3.2 Das jQTouch-Objekt referenzieren | 524 | ||
| 6.4 Ins mobile Web mit jQuery Mobile | 526 | ||
| 6.4.1 Ein erstes Dokument mit jQuery Mobile | 528 | ||
| 6.4.2 Seitenübergänge | 536 | ||
| 6.4.3 Listenbuttons | 537 | ||
| 6.4.4 Listviews mit Count-Bubbles und Asides | 539 | ||
| 6.4.5 Listenbuttons in Splitviews | 540 | ||
| 6.4.6 Listview mit Splitansicht - verbesserte Version | 542 | ||
| 6.4.7 Seiten per Ajax ansprechen | 544 | ||
| 6.4.8 NavBar-Button-Leisten | 545 | ||
| 6.4.9 Button-Leisten und Data-Grid | 547 | ||
| 6.4.10 Button-Leisten mit Icons | 550 | ||
| 6.4.11 Layoutraster - Inhalte anordnen | 553 | ||
| 6.4.12 Collapsibles - Platzsparende Inhalte | 555 | ||
| 6.4.13 Formulare mit jQuery Mobile | 558 | ||
| 6.4.14 Themes - von Farben und Hintergründen | 567 | ||
| 6.4.15 Das mobileinit-Event | 573 | ||
| 6.4.16 Enhancement des jQuery Mobile-Dokuments | 574 | ||
| 6.4.17 Die Optionen des $.mobile-Konfigurationsobjekts | 577 | ||
| 6.4.18 HTML5-data-Attribute in jQuery Mobile | 581 | ||
| 6.4.19 Events in jQuery Mobile | 593 | ||
| 6.4.20 Die Methoden von jQuery Mobile | 598 | ||
| 6.4.21 Responsives Webdesign | 607 | ||
| 6.5 Eine tragbare Galerie mit jQuery Mobile | 608 | ||
| 6.5.1 Eine Galerie an einem Stück | 609 | ||
| 6.5.2 Feintuning mit jQuery | 617 | ||
| 6.5.3 Eine mobile Galerie mit Ajax | 620 | ||
| 6.5.4 Eine mobile Galerie mit Photo Swipe | 626 | ||
| 6.6 Zusammenfassung | 630 | ||
| 7 Unit-Tests | 632 | ||
| 7.1 Ein Blick auf QUnit | 633 | ||
| 7.2 Assertions | 634 | ||
| 7.2.1 Test mit .ok() | 635 | ||
| 7.2.2 Test mit .equals() | 635 | ||
| 7.2.3 Test mit .same() | 636 | ||
| 7.2.4 Module | 636 | ||
| 7.3 Alle QUnit-Methoden im Überblick | 637 | ||
| 7.3.1 Setup | 637 | ||
| 7.3.2 Assertions | 638 | ||
| 7.3.3 Asynchrone Tests | 638 | ||
| Anhang | 640 | ||
| A HTML und CSS | 642 | ||
| A.1 Trennungen - Struktur, Präsentation, Verhalten | 642 | ||
| A.1.1 Beschreibung der Struktur | 643 | ||
| A.1.2 Beschreibung der Präsentation | 643 | ||
| A.1.3 Beschreibung des Verhaltens | 643 | ||
| A.1.4 Das Schichtenmodel | 643 | ||
| A.2 (X)HTML - Beschreibung der Struktur | 644 | ||
| A.2.1 Was ist eine Markup-Sprache? | 644 | ||
| A.2.2 Grammatik und Dokumenttyp | 645 | ||
| A.2.3 HTML vs. XHTML | 645 | ||
| A.3 Aufbau von HTML- und XHTML-Dokumenten | 646 | ||
| A.3.1 Die Aufgaben des Dokumentkopfs | 648 | ||
| A.3.2 Der Dokumentrumpf - strukturierte Information | 649 | ||
| A.3.3 Semantischer Grundaufbau eines Dokuments | 656 | ||
| A.4 CSS - Beschreibung der Präsentation | 658 | ||
| A.4.1 Einbindung von CSS in ein HTML-Dokument | 658 | ||
| A.4.2 Aufbau einer CSS-Anweisung | 661 | ||
| A.4.3 CSS-Selektoren - die wichtigsten Grundformen | 662 | ||
| A.4.4 CSS-Selektoren in der Praxis | 665 | ||
| A.4.5 CSS-Selektoren in der Übersicht | 667 | ||
| A.4.6 Neue Selektoren in CSS3 | 668 | ||
| A.4.7 CSS-Eigenschaften | 670 | ||
| A.4.8 Dokumentflow | 672 | ||
| A.4.9 Positionierung | 672 | ||
| A.4.10 Floats | 676 | ||
| A.4.11 Statische Präsentation dynamisieren | 680 | ||
| B JavaScript und DOM | 682 | ||
| B.1 JavaScript - Beschreibung des Verhaltens | 682 | ||
| B.1.1 Grundlagen | 683 | ||
| B.1.2 Kontrollstrukturen - Bedingungen und Schleifen | 687 | ||
| B.1.3 Funktionen | 690 | ||
| B.1.4 Der Scope von Variablen | 691 | ||
| B.1.5 Closures | 693 | ||
| B.1.6 Objekte | 698 | ||
| B.1.7 Konstruktorfunktionen für Objekte | 700 | ||
| B.1.8 Funktionen als Objekte | 704 | ||
| B.1.9 »Unobtrusive« JavaScript | 706 | ||
| B.2 Die Synthese - das Document Object Model | 710 | ||
| B.2.1 Das Erstellen des DOM-Baums | 710 | ||
| B.2.2 Das »Schmücken« des DOM-Baums | 712 | ||
| B.2.3 Manipulation von DOM und CSS per JavaScript | 713 | ||
| C Inhalt der DVD-ROM | 716 | ||
| C.1 Verzeichnis »Listings« | 716 | ||
| C.2 Verzeichnis »jQuery« | 716 | ||
| C.3 Verzeichnis »Software« | 716 | ||
| C.4 Verzeichnis »Video-Training« | 717 | ||
| Index | 718 |