Frank Bongers, Maximilian Vollendorf. jquery. Das Praxisbuch ..~.,... Galileo Press

Größe: px

Ab Seite anzeigen:

Download "Frank Bongers, Maximilian Vollendorf. jquery. Das Praxisbuch ..~.,... Galileo Press"

Alwin Kohler
vor 5 Jahren
Abrufe

1 Frank Bongers, Maximilian Vollendorf jquery Das Praxisbuch..~.,... Galileo Press

2 Auf einen Blick 1 jquery kennenlernen 15 2 Den Arbeitsplatz einrichten 25 3 jquery - der Einstieg : jquery - die Übersicht 59 5 jquery - der Praxiseinsatz Unit Tests 48 5 A HTML und C B Java5cript und DOM 535 C Inhalt der DVD-ROM 569

17 1.3 Nich t ohne mein JavaScript 18 1.3.1 Gründe für das Entsteh en von Frameworks 19 1.

3.4 Akt uelle Frameworks fü r JavaScript 21 1.3.5 Framew ork s - ein Rückbli ck 22 1.

... 23 2 Den Arbeitsplatz einrichten 25 2.

2 M ac OSX 26 2.1.3 Linux 26 2.2 Brow ser 27 2.2.1 Int ernet Explorer 27 2.

1 Vergleich: JavaScript mit und ohne j Query 35 3.1. 1 JavaScript ohnejq uery 35 3.

2.2 j Query lokal einbinden 39 3.2.3 jquery aus dem Google Reposit ory einbinden 39 3.

3 Vorwort 11 1 jquery kennenlernen Was j Query alles kann Ein Framew ork? Eine Community! Nich t ohne mein JavaScript Gründe für das Entsteh en von Frameworks Nochmals - was ist ein Framework? Aufgaben eines Frameworks Akt uelle Frameworks fü r JavaScript Framew ork s - ein Rückbli ck jquery - viel mit we nig erreichen _ Den Arbeitsplatz einrichten Rechner und Bet riebssyste m W indow s M ac OSX Linux Brow ser Int ernet Explorer Firefox Opera Safari Google Chrom e Webserver ID Es und Edit oren 30 3 jquery - der Einstieg Vergleich: JavaScript mit und ohne j Query JavaScript ohnejq uery j Query einbinden '" j Query onli ne und offline nutzen j Query lokal einbinden jquery aus dem Google Reposit ory einbinden Unser Beispiel mit j Query Wir haben fertig 45

3.5 Das M ausereignis - Bindung eines Click- Event s 46 3.5.1 Zunächst - di e»aufdringliche«variante... 4 7 3.5.2 Etwas w eniger aufdringlich bitte!

7 Zusammenfassung 58 4 jquery - die Übersicht 59 4.1 Im Zent rum - das j Query-Obje kt 59 4.1.1 Drei Art en von jq uery-m et hoden 60 4.

2.4 CSS-Selekt or als Argume nt 66 4.3 CSS-Selekt oren für die primäre Collection 67 4.3.1 Die Basisselekt oren.. 68 4. 3.

3.6 Sicht barkeitsfilter 77 4.3.7 Attributfilt er 79 4.3.8 Child -Filter 83 4.4 Accessoren - Eigenschaften der Collecti on 86 4.

5.3 j Query-Met hoden zur erw eit ert en Achsen-Traverse.. 96 4.5.4 Filte rn von Collections 104 4.5.5 Aufheben einer Filterung 109 4.5.6 Kopieren einer Collect ion 110 4.

6.4 Spezielle Event bindungen (Convenience- M etho den) 126 4.6.5 Erzeugen von Events 129 4.6.6 Shortcut-Met hoden für bestim mte Eventtypen 130 4.

4 3.5 Das M ausereignis - Bindung eines Click- Event s Zunächst - di e»aufdringliche«variante Etwas w eniger aufdringlich bitte! Ein unaufdringlicher Dreizeiler, dank jquery Give me mo re! - Verkettung von jquery-methode n Den Elternknoten eines Elements manipulieren Zusammenfassung 58 4 jquery - die Übersicht Im Zent rum - das j Query-Obje kt Drei Art en von jq uery-m et hoden Die Funkti on $0 und ihre Signat ur DOM-Element oder j Query-Obj ekt als Argument HTM l -St ring als Argument Callback- Funkt ion als Argument CSS-Selekt or als Argume nt CSS-Selekt oren für die primäre Collection Die Basisselekt oren M ehrfachklassenselekt or Gruppen- und Kont ext selekt oren Filte rausdrücke für Selekto ren Inhaltsfilt er Sicht barkeitsfilter Attributfilt er Child -Filter Accessoren - Eigenschaften der Collecti on Traversieren - ausgehend von Collections Was versteht man unt er»traversieren«? j Query -Methoden zur Achsen-Trave rse j Query-Met hoden zur erw eit ert en Achsen-Traverse Filte rn von Collections Aufheben einer Filterung Kopieren einer Collect ion Events und Event Hand ling Das Evento bj ekt in JavaScript Dasj Query- Event obj ekt Allgemeine Methoden zu Eventbindung Spezielle Event bindungen (Convenience- M etho den) Erzeugen von Events Shortcut-Met hoden für bestim mte Eventtypen Bind en sonst iger Events 134

4.7 Inhalte, Attribute, Datenspeicher _ 135 4.7.1 Lesen, Ändern und Entfernen von Att ribut en 135 4.

8 Formu lare verarbeiten mit j Q uery 143 4.8.1 Filt erausdrücke für Formularelem ente 143 4.

8.4 5erialis ierun g von Formulardaten 152 4.8.5 Extraktion von Formularfeldw erte n 155 4.

9.3 Ersetzen von Knot en 16 8 4.9.4 Wrapping-Methoden............ 169 4.

10.2 C55- Eigenschaft en manipulieren 179 4.10.3 Abmessungen von Containern 181 4.

11.1 Animat ionen mit jquery 189 4.11.2 Zeigen und Verste cken 190 4.11.3 51ides - Zeigen und Verstecken mit Animation 192 4.

11.6 Animation meh rerer ( 55- Paramete r 202 4.11.7 Die Queue - Warteschlange fü r Effekte 211 4.

12 Ajax & J50 N 218 4.12.1 Grundlagen zu Ajax 2 19 4.12.2 Daten und Datenty pen für Ajax 223 4.

13.2 Browser und Feature Detection 255 4.13.3 Utilities zur Array-Verarbeitung 256 4.

5 4.7 Inhalte, Attribute, Datenspeicher _ Lesen, Ändern und Entfernen von Att ribut en Manipulation von Text- und Elementinhalt Daten in Obj ekt en speichern Formu lare verarbeiten mit j Q uery Filt erausdrücke für Formularelem ente Filter für Zust ände von Formularinputs Binden von Events an Formularelemente erialis ierun g von Formulardaten Extraktion von Formularfeldw erte n DOM -Manipulation Methoden zum Einfüg en von Knot en Entfernen von Knot en Ersetzen von Knot en Wrapping-Methoden ( 55 und Styleeigens chaften Methoden für das class-attribut C55- Eigenschaft en manipulieren Abmessungen von Containern Positi on von Contain ern SerolIen und 5croll position Animat ionen mit jquery Zeigen und Verste cken ides - Zeigen und Verstecken mit Animation Fades - Zeigen und Verst ecken über Opacity Ut ility -Methoden für An im ationen Animation meh rerer ( 55- Paramete r Die Queue - Warteschlange fü r Effekte Vollständiges Beispie l zu.queueo Ut ilities für Queue und Ani mat ionen Ajax & J50 N Grundlagen zu Ajax Daten und Datenty pen für Ajax jquery und Aj ax Low-Ievel Ajax Ultilitys Utilities und Convenience-Methoden Globale Handler-Methoden Ut ilities - praktisches Dies und Das Konfl iktvermeidung mit anderen Frameworks Browser und Feature Detection Utilities zur Array-Verarbeitung Ut ility zur 5t ringbearbeit ung 26 1

Inh alt 4.13.5 Ut ili ties für DOM -Knot enverarbeit ung 262 4. 13.

7 Obje ktverarbeitung und Erw eit erung von jq uery 267 4.13.

1 Schönere Navigat ion en 27 8 5.1.1 Die FlyOut- Navigation 279 5.1.2 Die Tabs: Karteireit er 290 5.

1.6 Das Tree M enu 309 5.1.7 Kleines Helferlein: dynamische Sit emap 313 5.1.8 Zusammenfassung 314 5.

2.3 Die Kobol de auf meinem Bildschirm 319 5.3 Spiel mit Bildern 32 6 5.3.1 Galerie I: einfache Slideshow 329 5.

5 Ajax mit j Query einsetzen 351 5.5.1 Laden von HTML-Elementen 352 5.5.2 Laden von JSON 364 5.

6.2 Allgemeines M ust er eines j Query-Plugins 381 5.7 jquery UI 38 2 5.7.1 Themeroller 384 5.

7.4 Klassen animi eren 390 5.7.5 j Query UI- Dialog 391 5.7.6 j Query UI Accordion 394 5.

6 Inh alt Ut ili ties für DOM -Knot enverarbeit ung Uti li ties für Funkt ionsaufrufe Obje ktverarbeitung und Erw eit erung von jq uery Test- Ut ilit ies jquery - der Praxiseinsatz Schönere Navigat ion en Die FlyOut- Navigation Die Tabs: Karteireit er Das Akkorde on Die Spalt ennavigation Von der Spaltennavigat ion zum Drill-Menü Das Tree M enu Kleines Helferlein: dynamische Sit emap Zusammenfassung Von Toolti ps bis Sprit es Toolt ips Links sammeln, im Footer ausgeben Die Kobol de auf meinem Bildschirm Spiel mit Bildern Galerie I: einfache Slideshow Galerie 11 : Imagebox Ausgewählte Plugins Ajax mit j Query einsetzen Laden von HTML-Elementen Laden von JSON Laden von JSONP Zusamm enfassung Plugin- Entwicklung Eigene Plugins entw ickeln Allgemeines M ust er eines j Query-Plugins jquery UI Themeroller Theme manuell bearbeit en Ein kleines Beispiel: Hintergrundfarbe animieren Klassen animi eren j Query UI- Dialog j Query UI Accordion Exkurs: Easing Equations Zusammenfassung Formulare beherrschen mit j Query 398

5.8.1 Formulare valid ieren.. 39 8 5.8.2 Formulare senden mit Ajax 404 5.8.3 Datep icker.

9 Flexiblere Tabellen mit jquery.. 413 5.9.1 Die Zebra-Tabelle 414 5.9.2 Die Tabelle sort ieren 41 7 5.

10 Brow ser und Fenster 433 5.10.1 Cookies 434 5.10.2 Histo ry des Browsers 440 5.

10.6 Das j Query.ScrollTo- Plugin 454 5.

11.2 Emulatoren und IDEs für iphone 462 5.11.3 Ins mobile Web mit j Query und j QTouch 466 5.

11.6 Zusammenfassung 483 6 Unit Tests : 485 6.1 Ein Blick auf QUnit 486 6.

sameo 489 6.2.4 M odule 489 6.3 Alle QUnit-Met hoden im Überb lick 490 6.3. 1 Set up 490 6.

7 5.8.1 Formulare valid ieren Formulare senden mit Ajax Datep icker Nächste Ausbaust ufe: Aut ocom plete Flexiblere Tabellen mit jquery Die Zebra-Tabelle Die Tabelle sort ieren Paginierung von Tabellen Grid-Plugins Zusammenfassung Brow ser und Fenster Cookies Histo ry des Browsers Flashfilm e einbinden mit j Query Scroll ing Scrollen mit Geschicht e Das j Query.ScrollTo- Plugin Goi ng mobile mit j QTouch Emulat oren und IDEs fü r Mobilgeräte Emulatoren und IDEs für iphone Ins mobile Web mit j Query und j QTouch Konfiguration von jqtouch Das jqtouch-objekt referenzieren Zusammenfassung Unit Tests : Ein Blick auf QUnit Assertions Test mit.ok() Test mit.equalso Test mit.sameo M odule Alle QUnit-Met hoden im Überb lick Set up Assertion s Asynchrone Tests Anhang 493 A HTM L und C5S 495 A.1 Trennungen - Struktur, Präsentat ion, Verhalten 49 5

A.2 (X)HTML - Beschreibung der Stru kt ur 497 A.2.1 Was ist eine Markup-Sprache? 49 7 A.2.2 Grammatik und Dokumenttyp 497 A.

3.2 Der Dokument rumpf - strukturierte Informat ion 502 A.3.3 Semantisc her Grundaufbau eines Dokuments 508 A.

2 Aufbau einer CSS-Anweisung 514 A.4.3 CSS-Selekt oren - die wichtigsten Grundformen 515 A.4.4 CSS-Selektoren in der Praxis 518 A.

.............. 523 A.4.8 Dokume ntflow 524 A.4.9 Positi onierung 525 A.4.10 Floats......................... 52 9 A.

1 JavaScript - Beschreibung des Verhaltens 535 B.1.1 Grundlagen 536 B.1.2 Kontrollstru kt uren - Bedingungen und Schleifen 540 B.

1.7 Konstruktorfunktionen für Objekt e 553 B.1.8 Funktionen als ubjekte 557 B.1.9»Unobt rusive«javascript 55 9 B.

2.3 M anipulation von DOM und CSS per JavaScript 566 C Inhalt der DVD-ROM 569 C.

8 A.2 (X)HTML - Beschreibung der Stru kt ur 497 A.2.1 Was ist eine Markup-Sprache? 49 7 A.2.2 Grammatik und Dokumenttyp 497 A.2.3 HTML VS. XHTM L 498 A. 3 Aufbau von HTML- und XHTML-Dokumenten 499 A.3.1 Aufgaben des Dokument ko pfs 501 A. 3.2 Der Dokument rumpf - strukturierte Informat ion 502 A.3.3 Semantisc her Grundaufbau eines Dokuments 508 A.4 CSS - Beschreibung der Präsentation 511 A.4.1 Einbin dung von CSS in ein HTML -D okument 51 1 A,4.2 Aufbau einer CSS-Anweisung 514 A.4.3 CSS-Selekt oren - die wichtigsten Grundformen 515 A.4.4 CSS-Selektoren in der Praxis 518 A.4.5 CSS-Selekt oren in der Übersicht 520 A.4.6 Neue Selekt oren in CSS A.4.7 CSS-Eigenschaft en A.4.8 Dokume ntflow 524 A.4.9 Positi onierung 525 A.4.10 Floats A.4.11 Stat ische Präsent at ion dynamisieren 532 B JavaScript und DOM 53 5 B.1 JavaScript - Beschreibung des Verhaltens 535 B.1.1 Grundlagen 536 B.1.2 Kontrollstru kt uren - Bedingungen und Schleifen 540 B.1.3 Funkt ion en 542 B.1.4 Der Scope von Variablen 544 B.1.5 Closures B.1.6 Objekte 551 B.1.7 Konstruktorfunktionen für Objekt e 553 B.1.8 Funktionen als ubjekte 557 B.1.9»Unobt rusive«javascript 55 9 B.2 Die Synthese - das Document Obj ect Model 563 B.2.1 Das Erstellen des DOM-Baums 563 B.2.2 Das»Schmücken«des DOM-Baums 565 B.2.3 M anipulation von DOM und CSS per JavaScript 566 C Inhalt der DVD-ROM 569 C.1 Verzeichnis List ings 569 C l. Verzeichnis jq uery 569 C.3 Verzeichnis Software Index 571

Ähnliche Dokumente

Frank Bongers, Maximilian Vollendorf. jquery. Das Praxisbuch

Frank Bongers, Maximilian Vollendorf jquery Das Praxisbuch Liebe Leserin, lieber Leser, mit dem JavaScript-Framework jquery stehen Ihnen zahlreiche Funktionen zur Verfügung, um zeitgemäße Websites in kurzer