jQuery

1 Einleitung

1.1 Das Umfeld

1.2 Frameworks und Toolkits

1.3 Was behandeln wir in diesem Buch?

1.3.1 Das Kern-Framework jQuery

1.3.2 Plugins, UI und Mobile

1.3.3 Wen sehe ich als Zielgruppe für das Buch?

1.4 Schreibkonventionen

1.4.1 Listings

1.5 Was benötigen Sie beziehungsweise was nutzt Ihnen?

1.5.1 Hardware und Betriebssystem

1.5.2 jQuery, jQuery Mobile, jQuery UI & mehr

1.6 Die Browser

1.6.1 Verschiedene Betriebssysteme und virtuelle Maschinen zum Testen

1.7 Die Entwicklungsumgebungen und nützliche Helferlein

1.7.1 Editoren – oft bereits mit gewisser Hilfestellung

1.7.2 Integrierte Entwicklungsumgebungen

1.7.3 Kleine Helferlein

1.7.4 Node.js und Git

1.7.5 Integrierte Entwicklungstools in Browser und Browser-Add-ons

1.7.6 Der Webserver zum realistischen Testen

1.8 Zusammenfassung

2 Sprung ins kalte Wasser

2.1 Zugriff auf Elemente und Schutz des DOM

2.2 Veränderung der Webseite mit DHTML

2.3 Animiertes Verkleinern und Vergrößern eines Elements

2.4 Attribute dynamisch verändern

2.5 Zusammenfassung

3 Grundlagenwissen

3.1 Das WWW, das Web 2.0 und das Client-Server-Prinzip im Internet

3.1.1 Programmierung im WWW

3.1.2 Das Web 2.0 und AJAX

3.2 JavaScript und das Verhältnis zu jQuery

3.2.1 Die allgemeine Einbindung von JavaScript in Webseiten

3.2.2 JSON

3.3 DOM und Objekte

3.3.1 DOM und der Zugriff auf Elemente einer Webseite

3.4 Style Sheets und DHTML

3.4.1 CSS – die Standardsprache des Webs

3.4.2 Die konkrete Syntax von CSS-Deklarationen

3.4.3 Selektoren

3.5 Zusammenfassung

4 Wie jQuery grundsätzlich arbeitet

4.1 Grundsätzliches zum Zugriff auf Elemente der Webseite

4.1.1 Ein Beispiel für unterschiedliche Knoten

4.2 Der jQuery-Namensraum und das jQuery-Objekt

4.3 Spezielle Datentypen und Strukturen in Query

4.3.1 Methoden

4.3.2 Optionen

4.3.3 jqXHR

4.4 Die Funktion jQuery() und der Alias $()

4.4.1 Der Kontext

4.4.2 Verketten von Methoden und die jQuery-Warteschlange

4.4.3 Funktionsaufrufe nacheinander ausführen – die jQuery-Warteschlange

4.4.4 jQuery.sub(), jQuery.then() und jQuery.when()

4.5 Funktionen nach Aufbau des DOM ausführen

4.5.1 Callback oder anonyme Funktion als Parameter für jQuery()

4.5.2 Das ready-Event

4.5.3 document.ready() in eine externe JavaScript-Datei auslagern

4.5.4 Mit jQuery.holdReady() das ready-Event beeinflussen

4.6 Ein Element mit jQuery() erstellen und in die Webseite einfügen

4.6.1 Ein trickreiches kleines Problem – können Sie es lösen?

4.6.2 Optionen zum Initialisieren von Attributen

4.7 Direkter Zugriff auf DOM-Elemente mit get( )

4.8 Gemeinsame Verwendung von jQuery und anderen Frameworks

4.8.1 Die Funktion jQuery.noConflict()

4.8.2 Einen alternativen Alias verwenden

4.9 Mehr zum Kontext

4.9.1 context, selector und nodeName

4.10 jQuery.support und jQuery.browser – Browser-Identifizierung

4.11 Zusammenfassung

5 Umgang mit Selektoren und Filtern

5.1 Klassische DOM-Zugriffsmethoden

5.1.1 Objektfelder

5.1.2 Zugriff über einen Namen

5.1.3 Verwandtschaftsbeziehungen

5.1.4 Elementnamen, IDs und Klassennamen

5.1.5 DOM-Zugriffsmöglichkeiten versus jQuery

5.2 Was versteht man unter Selektoren?

5.2.1 Was ist ein Selektor?

5.2.2 Was sind Filter?

5.2.3 CSS3, SQL und XPath als Grundlagen und Hintergrund

5.3 Basisselektoren und hierarchische Selektoren

5.3.1 Beispiele zur Verdeutlichung

5.3.2 Potenzielle Fallen

5.4 Filterausdrücke

5.4.1 Basisfilter

5.4.2 Inhaltsfilter

5.4.3 Sichtbarkeitsfilter

5.4.4 Kindfilter

5.4.5 Attributfilter

5.4.6 Filter für Formularelemente und Formularfilter

5.4.7 Formularfilter zur Auswahl aufgrund des Zustands

5.5 Filtermethoden

5.5.1 Praktische Beispiele von Filtermethoden

5.6 Zusammenfassung

6 Zugriff auf die Elemente einer Webseite

6.1 Inhalte von Knoten abfragen und verändern – html() und text()

6.1.1 Ein Beispiel zu html() und text()

6.2 Inhalt von Formularfeldern – val()

6.2.1 Ein Beispiel für den Zugriff auf Formularfelder

6.3 Zugriff auf Attribute mit attr()

6.4 Einfügen von Knoten in eine Webseite

6.4.1 append() und prepend()

6.4.2 appendTo() und prependTo()

6.5 Knoten nachher oder vorher einfügen

6.5.1 after() und before()

6.5.2 insertAfter() und insertBefore()

6.6 Ummanteln

6.6.1 Einzeln mit wrap() ummanteln

6.6.2 Alles ummanteln mit wrapAll()

6.6.3 Innere Bereiche ummanteln mit wrapInner()

6.6.4 Den Mantel abnehmen – unwrap()

6.7 Ersetzen mit replaceWith() und replaceAll()

6.7.1 Ersetzen mit replaceWith()

6.7.2 Alles ersetzen mit replaceAll()

6.8 Überflüssige Knoten entfernen

6.8.1 Die Methoden empty() und remove()

6.8.2 Die Alternative zu remove() – detach()

6.8.3 Löschen von Attributen

6.9 Vervielfachen mit clone()

6.10 Suchen & Finden

6.10.1 Von Kindern und Eltern

6.10.2 Von Geschwistern

6.10.3 Nachfolger mit has() suchen

6.11 Finden mit find() und contents()

6.12 Mit each() über Arrays und Objekte iterieren

6.12.1 jQuery.each()

6.12.2 Die Methode each()

6.13 Die Methode add()

6.14 Die Methoden end() und andSelf()

6.15 Zusammenfassung

7 Layout und Formatieren mit Style Sheets unter jQuery

7.1 Hintergrundinformationen

7.1.1 CSS in jQuery – Vermischung von Layout und Funktionalität?

7.2 Die Methode css()

7.2.1 Abfragen von Stileigenschaften

7.2.2 Setzen von Eigenschaften

7.3 Klassen von Elementen verändern

7.3.1 Klassen hinzufügen – addClass()

7.3.2 Klassen wegnehmen – removeClass()

7.3.3 Klassen umschalten mit toggleClass()

7.3.4 Test auf eine Klasse – hasClass()

7.4 Methoden zur Positionierung

7.4.1 Bestimmen der Position mit position()

7.4.2 Position relativ zum Dokument – offset()

7.4.3 Methoden zum Scrollen

7.5 Höhe und Breite

7.5.1 height() und width()

7.6 Innere und äußere Maße

7.7 jQuery.cssHooks

7.8 Zusammenfassung

8 Ein Praxisbeispiel – eine Datumskomponente

8.1 Das Ziel

8.1.1 Die Basiswebseite

8.2 Die CSS-Datei – Templates

8.3 Die JavaScript-Datei

8.4 Zusammenfassung

9 Ereignisbehandlung unter jQuery

9.1 Grundlagen zu Ereignissen, Eventhandlern, Triggern und Datenbindung

9.1.1 Ereignisse

9.1.2 Allgemeines zu Eventhandlern

9.1.3 HTML-Eventhandler

9.1.4 JavaScript/DOM-Eventhandler

9.1.5 Das Ereignisobjekt

9.1.6 Blubbern und die Bubble-Phase

9.1.7 Datenbindung

9.1.8 Trigger

9.2 Das Ereignisobjekt in jQuery

9.2.1 Der Konstruktor von jQuery.Event

9.2.2 Die Eigenschaften des Ereignisobjekts jQuery.Event

9.2.3 Die Methoden eines Objekts vom Typ jQuery.Event

9.3 Ich habe fertig – $(document).ready()

9.4 Event-Helper

9.5 Erweiterte Methoden für das Eventhandling

9.5.1 Datenbindung

9.5.2 Triggern

9.6 Live Events

9.6.1 Die Methode live()

9.6.2 Die Methode delegate()

9.6.3 Die Methoden die() und undelegate()

9.7 jQuery.proxy()

9.8 Weiterentwicklung der Datumskomponente

9.9 Veraltete Hilfsfunktionen für die Interaktion

9.9.1 Die Funktion hover()

9.9.2 toggle()

9.10 Zusammenfassung

10 Effekte und Animationen

10.1 Grundsätzliche Anwendung

10.1.1 Speed is all you need

10.1.2 Die Angabe eines Callback

10.1.3 Verkettung

10.1.4 Warteschlangen

10.1.5 Beendigung mit stop(), finish() und jQuery.fx.off

10.1.6 Endlosanimationen

10.1.7 Art der Animationen – Easing

10.2 Konkrete Effekte mit Standardmethoden

10.2.1 Anzeigen und Wegblenden – die Methoden show() und hide()

10.2.2 Gleiteffekte – slideDown(), slideUp() und slideToggle()

10.2.3 Transparenzeffekte – fadeIn(), fadeOut() und fadeTo() sowie toggle()

10.3 Individuelle Animationen mit animate()

10.4 Zusammenfassung

11 AJAX und das Web 2.0

11.1 AJAX und XMLHttpRequest (XHR) – Grundlagen

11.1.1 Ein XMLHttpRequest-Objekt manuell erzeugen

11.1.2 Die Methoden eines XHR-Objekts

11.1.3 Die Eigenschaften eines XHR-Objekts

11.1.4 Das Datenformat bei einer AJAX-Kommunikation

11.1.5 Exemplarischer Ablauf einer AJAX-Anfrage

11.2 Spezialitäten bei der AJAX-Unterstützung in jQuery

11.2.1 JSONP und Remote Requests

11.2.2 Das jqXHR-Objekt

11.2.3 Grundsätzliches zu Methoden in jQuery für AJAX-Anfragen

11.2.4 Vermeidung von Caching

11.3 Anwendung der Standardmethoden für AJAX

11.3.1 $.get() und $.post()

11.3.2 JSON-Daten anfordern und verarbeiten – getJSON() und parseJSON()

11.4 Ein Skript per AJAX nachladen – jQuery.getScript()

11.5 Die allgemeine Variante zum Laden von Daten – load()

11.5.1 Filter angeben

11.6 Serialisieren von Daten

11.6.1 Die Methode serialize()

11.6.2 Die Methode serializeArray()

11.6.3 Die allgemeine Version zum Serialisieren – $.param()

11.7 Vorgabewerte für AJAX – jQuery.ajaxSetup()

11.8 AJAX Events und AJAX-Eventhandler

11.8.1 Lokale Ereignisse

11.8.2 Globale Ereignisse

11.9 Die vollständige Kontrolle

11.9.1 jQuery.ajax()

11.9.2 Erweiterte Techniken für $.ajax()

11.10 Zusammenfassung

12 jQuery UI

12.1 Was versteht man unter jQuery UI?

12.1.1 Komponenten zur Unterstützung der Interaktion

12.1.2 Widgets

12.1.3 Erweiterte Effekte

12.1.4 Das Themen-Framework samt ThemeRoller

12.2 Der Einstieg in jQuery UI

12.3 Wie nutzt man jQuery UI grundsätzlich?

12.3.1 Download und der ThemeRoller

12.3.2 Die Bereitstellung und Einbindung lokaler Ressourcen

12.3.3 Einbindung über ein CDN

12.4 Verwenden der Komponenten in jQuery UI

12.4.1 Die Defaulteinstellung

12.4.2 Einige grundsätzliche Regeln zu Komponenten und Widgets

12.4.3 Eigenschaften/Optionen von Komponenten

12.4.4 Methoden von Komponenten

12.4.5 Events bei Komponenten und Widgets

12.5 Ein Überblick über die Komponenten und Widgets

12.5.1 Die Interaktionskomponenten

12.5.2 Die Widgets

12.6 Effekte

12.6.1 Die Methode effekt()

12.6.2 Farbanimationen mit animate()

12.7 Zusammenfassung

13 jQuery Mobile

13.1 Grundlagen

13.1.1 Die Plattformen

13.1.2 Widgets und Features

13.1.3 Download und Bereitstellung

13.1.4 Themes und der ThemeRoller

13.1.5 Codiqa

13.2 Das Rollensystem und data-role

13.3 Der grundsätzliche Aufbau einer mobilen Seite

13.3.1 Ein erstes vollständiges Beispiel

13.4 Verknüpfen von Seiten

13.4.1 Externe Links mit Hijax

13.4.2 Interne Links und das spezielle Verständnis einer Seite

13.4.3 Zurück in der Historie

13.5 Die Übergänge

13.6 Dialoge

13.7 Schaltflächen

13.7.1 Schaltflächen mit Icons

13.7.2 Blockelement oder Inline-Element

13.7.3 Gruppierung

13.8 Toolbars und Navigationsbars

13.9 Listen

13.10 Formularelemente

13.10.1 Feldcontainer

13.10.2 Die verschiedenen Formularelemente

13.10.3 Deaktivieren von Elementen

13.10.4 Plugin-Methoden bei Formularelementen

13.10.5 Abschicken der Formulardaten

13.11 Spezielle Ereignisse

13.11.1 Berührungsereignisse

13.11.2 Änderung der Orientierung

13.11.3 Verschiebeereignisse

13.11.4 Seitenereignisse

13.11.5 Ein Beispiel mit Reaktionen auf Events

13.12 Kollabierte und expandierte Inhalte

13.13 Zusammenfassung

14 PluginPlugins

14.1 Die PluginPlugin-Seite von jQuery

14.2 Ein vorhandenes Plugin suchen und verwenden

14.3 Eigene Plugins erstellen

14.3.1 Warum eigene Plugins erstellen?

14.3.2 Erstellen eines ersten Plugins

14.3.3 Die wesentlichen Regeln zur Erstellung eines einfachen Plugins

14.3.4 Regeln zur Erstellung komplexerer Plugins

14.3.5 Ein Beispiel für ein Plugin mit Optionen

14.3.6 Ein weiteres Beispiel für ein Plugin mit Optionen

14.3.7 Ein Plugin veröffentlichen

14.4 Zusammenfassung

15 Anhang:

436

15.1 Case-Sensitivität

15.2 Variablen, Literale und Datentypen

15.2.1 Die klassischen JavaScript-Datentypen

15.3 Funktionen und Methoden

15.3.1 Funktionsaufruf versus Funktionsreferenz

15.3.2 Benannte versus anonyme Funktion

15.3.3 Callbacks

15.4 Objekte in JavaScript

15.4.1 Der Konstruktor

15.4.2 Deklarative Objekterzeugung mit einem Objektliteral

15.4.3 Zugriff auf Objektbestandteile

15.4.4 Arrays

Index