JQuery Kochbuch by jQuery-Community-Experts -- Read -- Imperial Library of Trantor

Index

jQuery Kochbuch Vorwort Beteiligte

Kapitelautoren Fachlektoren

Einleitung

Für wen dieses Buch gedacht ist Was Sie lernen werden Stil und Konventionen von jQuery Andere Optionen Wenn Sie Probleme mit den Beispielen haben Wenn Sie dieses Buch mögen (oder auch nicht) Konventionen

1. Grundlagen von jQuery

Einleitung

Warum jQuery? Die Philosophie hinter jQuery

Elemente finden, mit denen dann etwas getan wird Verketten Die Wrapper-Sets von jQuery

Organisation der jQuery-API

Einbinden der jQuery-Bibliothek in eine HTML-Seite

Problem Lösung Diskussion

Ausführen von jQuery/JavaScript-Code nach dem Laden des DOM, aber noch vor dem vollständigen Laden der Seite

Problem Lösung Diskussion

Selektieren von DOM-Elementen mit Selektoren und der jQuery-Funktion

Problem Lösung Diskussion

Selektieren von DOM-Elementen in einem bestimmten Kontext

Problem Lösung Diskussion

Ein Wrapper-Set mit DOM-Elementen filtern

Problem Lösung Diskussion

Abhängige Elemente im aktuell selektierten Wrapper-Set finden

Problem Lösung Diskussion

Vor einer destruktiven Änderung zur vorherigen Selektion zurückkehren

Problem Lösung Diskussion

Die vorherige Selektion mit der aktuellen Selektion vereinigen

Problem Lösung Diskussion

Das DOM basierend auf dem aktuellen Kontext durchlaufen, um ein neues Set mit DOM-Elementen zu erhalten

Problem Lösung Diskussion

DOM-Elemente erstellen, bearbeiten und einfügen

Problem Lösung Diskussion

Entfernen von DOM-Elementen

Problem Lösung Diskussion

DOM-Elemente ersetzen

Problem Lösung Diskussion

DOM-Elemente klonen

Problem Lösung Diskussion

Attribute von DOM-Elementen lesen, setzen und entfernen

Problem Lösung Diskussion

HTML-Inhalte lesen und setzen

Problem Lösung Diskussion

Text-Inhalte lesen und setzen

Problem Lösung Diskussion

Den $-Alias verwenden, ohne globale Konflikte zu erzeugen

Problem Lösung Diskussion

2. Elemente mit jQuery selektieren

Einführung Nur Kind-Elemente selektieren

Problem Lösung Diskussion

Bestimmte Geschwister-Elemente selektieren

Problem Lösung Diskussion

Elemente über die Index-Reihenfolge selektieren

Problem Lösung Diskussion

Aktuell animierte Elemente selektieren

Problem Lösung Diskussion

Elemente anhand ihres Inhalts selektieren

Problem Lösung Diskussion

Elemente über eine negative Selektion selektieren

Problem Lösung Diskussion

Elemente anhand ihrer Sichtbarkeit selektieren

Problem Lösung Diskussion

Elemente anhand von Attributen selektieren

Problem Lösung Diskussion

Form-Elemente anhand des Typs selektieren

Problem Lösung Diskussion

Elemente mit bestimmten Eigenschaften selektieren

Problem Lösung Diskussion

Den Kontext-Parameter verwenden

Problem Lösung Diskussion

Einen eigenen Filter-Selektor erstellen

Problem Lösung Diskussion

3. Fortgeschrittene Techniken

Einführung Ein Set mit selektierten Ergebnissen durchlaufen

Problem Lösung Diskussion

Das Selektions-Set auf ein bestimmtes Element reduzieren

Problem Lösung Diskussion

Ein selektiertes jQuery-Objekt in ein reines DOM-Objekt konvertieren

Problem Lösung Diskussion

Den Index eines Elements in einer Selektion ermitteln

Problem Lösung Diskussion

Aus einem bestehenden Array ein Array mit ausgewählten Werten erstellen

Problem Lösung Diskussion

Eine Aktion auf einer Untermenge des selektierten Sets ausführen

Problem Lösung Diskussion

Konfigurieren von jQuery, so dass es nicht mit anderen Bibliotheken kollidiert

Problem Lösung Diskussion

Funktionalität durch Plugins hinzufügen

Problem Lösung Diskussion

Die verwendete Selektion bestimmen

Problem Lösung Diskussion

4. jQuery-Tools

Einführung Features mit jQuery.support erkennen

Problem Lösung Diskussion

Mit jQuery.each über Arrays und Objekte iterieren

Problem Lösung Diskussion

Arrays mit jQuery.grep filtern

Problem Lösung Diskussion

Über Array-Elemente mit jQuery.map iterieren und sie verändern

Problem Lösung Diskussion

Zwei Arrays durch jQuery.merge kombinieren

Problem Lösung Diskussion

Doppelte Array-Einträge mit jQuery.unique ausfiltern

Problem Lösung Diskussion

Callback-Funktionen mit jQuery.isFunction testen

Problem Lösung Diskussion

Whitespace aus Strings oder Form-Werten mit jQuery.trim entfernen

Problem Lösung Diskussion

Objekte und Daten per jQuery.data an DOM-Elemente anhängen

Problem Lösung Diskussion

Objekte durch jQuery.extend erweitern

Problem Lösung Diskussion

5. Schneller, Einfacher, Spaßiger

Einführung Das ist nicht jQuery, sondern JavaScript!

Problem Lösung Diskussion

Was ist an $(this) falsch?

Problem Lösung Diskussion

Überflüssige Wiederholungen vermeiden

Problem Lösung 1 Lösung 2 Diskussion

Ihre verketteten jQuery-Methoden formatieren

Problem Lösung Diskussion

Code aus anderen Bibliotheken übernehmen

Problem Lösung Diskussion

Einen eigenen Iterator schreiben

Problem Lösung Diskussion

Ein Attribut umschalten

Problem Lösung Diskussion

Performance-Killer finden

Problem Lösung Diskussion

Ihre jQuery-Objekte puffern

Problem Lösung Diskussion

Schnellere Selektoren schreiben

Problem Lösung Diskussion

Tabellen schneller laden

Problem Lösung Diskussion

Schleifen programmieren

Problem Lösung Diskussion

Name Lookups verringern

Problem Lösung Diskussion

Das DOM mit .innerHTML schneller aktualisieren

Problem Lösung Diskussion

Debuggen? Sprengen Sie die Ketten

Problem Lösung Diskussion

Ist das ein Bug von jQuery?

Problem Lösung Diskussion

In jQuery debuggen

Problem 1 Lösung 1 Problem 2 Lösung 2 Diskussion

Weniger Server-Anfragen erzeugen

Problem Lösung Diskussion

Zurückhaltendes JavaScript schreiben

Problem Lösung Diskussion

jQuery für die progressive Verbesserung nutzen

Problem Lösung Diskussion

Machen Sie Ihre Seiten barrierefrei

Problem Lösung Diskussion

6. Dimensionen

Einführung Die Dimensionen von Window und Document ermitteln

Problem Lösung Diskussion

Ermitteln der Dimensionen eines Elements

Problem Lösung Diskussion

Den Offset eines Elements ermitteln

Problem Lösung Diskussion

Ein Element in den sichtbaren Bereich scrollen

Problem Lösung: Scrollen des gesamten Fensters Lösung: Scrollen innerhalb eines Elements

Ermitteln, ob sich ein Element im sichtbaren Bereich befindet

Problem Lösung

Zentrieren eines Elements im sichtbaren Bereich

Problem Lösung

Absolute Positionierung eines Elements an seiner aktuellen Position

Problem Lösung

Ein Element relativ zu einem anderen Element positionieren

Problem Lösung

Stylesheets abhängig von der Browser-Breite wechseln

Problem Lösungen Lösung 1: Ändern der Klasse des Body-Elements Lösung 2: Ändern des href-Attributs des Stylesheets, das für größenbezogene Styles zuständig ist Lösung 3: Alle größenbezogenen Stylesheets in die Seite einbinden, aber nur eines aktivieren Diskussion

7. Effekte

Einführung

Methode animate Animations-Geschwindigkeiten Effekt-Vorlage

Elemente per Sliding und Fading ein- und ausblenden

Problem Lösung

Slide Fade Beides

Diskussion

Elemente durch ein Sliding Up anzeigen

Problem Lösung

HTML CSS jQuery

Diskussion

Erzeugen eines horizontalen Akkordeons

Problem Lösung

HTML CSS jQuery

Diskussion

Elemente gleichzeitig Sliden und Faden

Lösung Diskussion

Sequenzielle Effekte anwenden

Problem Lösung

Manueller Callback Automatische Sequenz

Diskussion

Erkennen, ob Elemente aktuell animiert werden

Problem Lösung Diskussion

Animationen stoppen und zurücksetzen

Problem Lösung Diskussion

Eigene Easing-Methoden für Effekte nutzen

Problem Lösung Diskussion

Alle Effekte deaktivieren

Problem Lösung Diskussion

Aufwändigere Effekte mit jQuery UI erzeugen

Problem Lösung

CSS jQuery

Diskussion

8. Events

Einführung Einen Handler mit vielen Events verbinden

Problem Lösung Diskussion

Eine Handler-Funktion mit anderen Daten wiederverwenden

Problem Lösung Diskussion

Ein ganzes Set mit Eventhandlern entfernen

Problem Lösung Diskussion

Wie bindet man mit einem Namensraum? Wie räumt man später auf?

Eventhandler auslösen

Problem Lösung Diskussion

Wie löst man Handler mit einem bestimmten Namensraum aus? Wie löst man Handler aus, die keinen Namensraum haben?

Dynamische Daten an Eventhandler übergeben

Problem Lösung Diskussion

Zusätzliche Argumente übergeben

Mehr Beispiele

Ein eigenes Event-Objekt übergeben Was ist der Unterschied zu event.data?

Sofortiger Zugriff auf ein Element (noch vor document.ready)

Problem Lösung Diskussion

Ein Element direkt verbergen (oder eine andere Änderung am Style vornehmen) Eventhandler so schnell wie möglich an ein Element binden Andere Situationen

Polling Skripte positionieren

Die Ausführungsschleife für Handler stoppen

Problem Lösung Diskussion

Beispiele

Einfaches Überprüfen einer Form Alle Events stoppen

Nachteile dieses Vorgehens

Beim Verwenden von event.target das richtige Element erhalten

Problem Lösung Diskussion

Mehrere parallele hover()-Animationen vermeiden

Problem Lösung Diskussion

Beispiel Der Rest

Eventhandler für neu hinzugefügte Elemente nutzbar machen

Problem Lösung Diskussion

Warum gehen Eventhandler verloren? Eine kleine Einführung in die Event-Delegation Vor- und Nachteile jeder Lösung

Rebinding Event-Delegation

Ergebnis

9. Events für Fortgeschrittene

Einführung jQuery nutzen, wenn es dynamisch geladen wird

Problem Lösung Diskussion

Was ist jQuery.ready()? Warum ist das passiert?

Das globale Auslösen von Events beschleunigen

Problem Lösung Diskussion

Vor- und Nachteile Den Listenern weitere Funktionalität verpassen

Eigene Events erstellen

Problem Lösung Diskussion

Bindings für Ihr Event Ein reales Beispiel Bestehende Anwendungsfälle für dieses Feature

Eventhandler stellen benötigte Daten bereit

Problem Lösung Diskussion

Wie kann man das mit jQuery 1.3 und höher machen? Vorgehen vor jQuery 1.3 Eventhandler können Aktionen verhindern

Event-gesteuerte Plugins erstellen

Problem Lösung Diskussion

Ein Beispiel Was passiert, wenn ein Element schon eines dieser Events besitzt? Wie kann ich es anderen ermöglichen, die hinzugefügten Eventhandler wieder abzuräumen? Was ist der Unterschied zu anderen Vorgehensweisen?

Das Plugin kann Anweisungen entgegennehmen Ein Objekt mit Methoden zurückgeben

Benachrichtigungen erhalten, wenn jQuery-Methoden aufgerufen werden

Problem Lösung Diskussion

Die gewünschte Methode überladen Ein Event vor der Ausführung auslösen Die ursprüngliche Methode ausführen Ein Event nach der Ausführung auslösen Das Ergebnis zurückgeben Alles zusammen Was kann man noch machen?

Objekt-Methoden als Event Listener nutzen

Problem Lösung Diskussion

Wo ist der Knoten hin? Das Beispiel

Die Objekte Die Methoden binden

10. HTML-Forms durch eigenen Code verbessern

Einführung Ein Texteingabefeld beim Laden der Seite fokussieren

Problem Lösung Diskussion

Form-Elemente aktivieren und deaktivieren

Problem Lösung 1 Lösung 2 Diskussion

Automatisch Radio Buttons auswählen

Problem Lösung 1 Lösung 2 Diskussion

(De)selektieren aller Checkboxen durch Links

Problem Lösung Diskussion

(De)selektieren aller Checkboxen über einen einzelnen Umschalter

Problem Lösung Diskussion

Auswahl-Optionen hinzufügen und entfernen

Problem Lösung Diskussion

Abhängig von der Anzahl der Zeichen ins nächste Feld springen

Problem Lösung Diskussion

Anzahl der verbleibenden Zeichen anzeigen

Problem Lösung Diskussion

Texteingabefelder auf bestimmte Zeichen beschränken

Problem Lösung Diskussion

Eine Form mit Ajax abschicken

Problem Lösung Diskussion

Forms überprüfen

Problem Lösung Diskussion

11. Verbesserungen von HTML-Forms durch Plugins

Einleitung

Grundlegendes Vorgehen

Forms überprüfen

Problem Lösung Diskussion

Methoden

Eigene Methoden

Regeln

Abhängigkeiten Eigene Ausdrücke

Fehlermeldungen

Lokalisierung Fehler-Element Layout

Umgang mit submit Einschränkungen

Eingabemasken für Felder erstellen

Problem Lösung Diskussion

Einschränkungen

Textfelder automatisch vervollständigen

Problem Lösung Diskussion

Einen Wertebereich selektieren

Problem Lösung Diskussion

Einen Wert eingeben, der innerhalb bestimmter Grenzen liegt

Problem Lösung Diskussion

Integration mit Google Maps

Dateien im Hintergrund hochladen

Problem Lösung Diskussion

Die Länge von Texteingabefeldern begrenzen

Problem Lösung Diskussion

Label oberhalb von Eingabefeldern anzeigen

Problem Lösung Diskussion

Ein Eingabeelement mit seinem Inhalt wachsen lassen

Problem Lösung Diskussion

Ein Datum wählen

Problem Lösung Diskussion

Lokalisierung

12. jQuery-Plugins

Einleitung Wo finden Sie jQuery-Plugins?

Problem Lösung Diskussion

Im jQuery Plugin Repository suchen In Google Code suchen In GitHub suchen Mit Google suchen In SourceForge suchen

Wann sollten Sie ein jQuery-Plugin schreiben?

Problem Lösung Diskussion

Ein Plugin bauen, wenn es einen potenziellen Anwenderkreis gibt Das für Sie akzeptable Support-Level kennen und kommunizieren Berücksichtigen Sie die Mithilfe durch andere

Schreiben Sie Ihr erstes jQuery-Plugin

Problem Lösung

Eine eigene jQuery-Methode schreiben Eine eigene jQuery-Funktion schreiben

Diskussion

Ihrem Plugin Optionen mitgeben

Problem Lösung Diskussion

Die Kurzform $ in Ihrem Plugin verwenden

Problem Lösung Diskussion

Private Funktionen in Ihr Plugin aufnehmen

Problem Lösung Diskussion

Das Metadata-Plugin unterstützen

Problem Lösung Diskussion

Ihrem Plugin eine statische Funktion hinzufügen

Problem Lösung Diskussion

Unit Tests für Ihr Plugin mit QUnit

Problem Lösung Diskussion

13. Selbst geschriebene Benutzerschnittstellen

Einleitung Eigene Tooltips erstellen

Problem Lösung

Tooltip – HTML-Code Tooltip – jQuery-Code

Diskussion

In einem Baum navigieren

Problem Lösung

Baum – HTML-Code Baum – jQuery-Code

Diskussion

Ein Akkordeon aufziehen

Problem Lösung

Akkordeon – HTML-Code Akkordeon – jQuery-Code

Diskussion

Registerkarten in einem Dokument

Problem Lösung

Registerkarten – HTML-Code Registerkarten – jQuery-Code

Diskussion

Ein einfaches modales Fenster anzeigen

Problem Lösung

Modales Fenster – HTML-Code Modales Fenster – jQuery-Code

Diskussion

Dropdown-Menüs erstellen

Problem Lösung

Dropdown-Menü – HTML-Code Dropdown-Menü – jQuery-Code

Diskussion

Bilder zyklisch einblenden

Problem Lösung

Rotator – HTML-Code Rotator – jQuery-Code

Diskussion

Sliding Panels

Problem Lösung

Panel – HTML-Code Panel – jQuery-Code

Diskussion

14. Benutzerschnittstellen mit jQuery UI

14.1. Einleitung

Interaktionen Widgets Effekte Grundlegende Verwendung Wie dieses Kapitel aufgebaut ist

14.2. Die komplette jQuery UI-Suite einbinden

Problem Lösung Diskussion

14.3. Ein oder zwei einzelne jQuery UI-Plugins einbinden

Problem Lösung Diskussion

14.4. Ein jQuery UI-Plugin mit den Standard-Optionen initialisieren

Problem Lösung Diskussion

14.5. Ein jQuery UI-Plugin mit eigenen Optionen initialisieren

Problem Lösung Diskussion

14.6. Eigene jQuery UI-Plugin-Standardwerte erstellen

Problem Lösung Diskussion

14.7. Optionen für jQuery UI-Plugins lesen und setzen

Problem Lösung 1: Den Wert lesen Lösung 2: Den Wert setzen Diskussion

14.8. Plugin-Methoden von jQuery UI aufrufen

Problem Lösung Diskussion

14.9. Mit Events von jQuery UI-Plugins umgehen

Problem Lösung 1: Eine Callback-Funktion für die Option mit dem Event-Namen übergeben Lösung 2: Über den Event-Typ an das Event binden Diskussion

14.10. Ein jQuery UI-Plugin zerstören

Problem Lösung Diskussion

14.11. Einen Musikplayer mit jQuery UI erstellen

Problem Lösung

HTML5 Audio Der Musikplayer Buttons zum Abspielen und Pausieren Label für die aktuelle Position und die Länge des Liedes Slider für die Position im Lied Fortschrittsbalken, um den Pufferstatus anzuzeigen Lautstärkeregler Hintergrund des Widgets und letzte Feinarbeiten

15. Themes in jQuery UI

Einleitung

Die Komponenten von jQuery UI CSS verstehen

Themes für jQuery UI-Widgets mit ThemeRoller erstellen

Problem Lösung

Schritt 1. ThemeRoller öffnen Schritt 2. Ein Theme erstellen und in der Vorschau betrachten Schritt 3. Die jQuery UI-Widgets und das Theme herunterladen Schritt 4. Dateien in Ihrem Projektverzeichnis zusammenführen Schritt 5. Auf die Theme-Stylesheets in Ihrem Projekt verweisen

Diskussion

Layout und Theme-Styles von jQuery UI überschreiben

Problem Lösung

Schritt 1. Markup und Styles des Widgets des jQuery UI-Plugins untersuchen Schritt 2. Erstellen eines Override-Stylesheets Schritt 3. Die Style-Regeln im Override-Stylesheet bearbeiten

Eingeschränktes Überschreiben Override-Regeln schreiben

Diskussion

Ein Theme auf Komponenten anwenden, die nicht zum jQuery UI gehören

Problem Lösung

Schritt 1: Die verfügbaren Framework-Klassen untersuchen, um diejenigen zu ermitteln, die Sie auf Ihre Komponenten anwenden können Schritt 2: Framework-Klassen für anklickbare Elemente anwenden

Diskussion

Mehrere Themes auf einer einzelnen Seite verwenden

Problem Lösung

Schritt 1. Ein weiteres Theme mit ThemeRoller erstellen Schritt 2. Das neue Theme mit einem Gültigkeitsbereich versehen und es herunterladen Schritt 3. Vereinigen der Dateien in Ihrem Projektverzeichnis Schritt 4. Das Stylesheet des eingeschränkten Themes in Ihrem Projekt referenzieren

Anhang: Weitere Informationen zu CSS

16. jQuery, Ajax, Datenformate: HTML, XML, JSON, JSONP

Einleitung jQuery und Ajax

Problem Lösung Diskussion

Ajax auf der gesamten Site verwenden

Problem Lösung Diskussion

Einfache Ajax-Anwendung mit Rückmeldungen an den Benutzer

Problem Lösung Diskussion

Ajax-Hilfsfunktionen und Datentypen

Problem Lösung Diskussion

HTML-Fragmente mit jQuery einsetzen

Problem Lösung Diskussion

XML-Code in ein DOM konvertieren

Problem Lösung Diskussion

JSON erzeugen

Problem Lösung Diskussion

JSON parsen

Problem Lösung Diskussion

jQuery und JSONP verwenden

Problem Lösung Diskussion

17. jQuery in großen Projekten verwenden

Einleitung Auf dem Client speichern

Problem Lösung Diskussion

Den Anwendungs-Status für eine einzelne Session speichern

Problem Lösung Diskussion

Den Anwendungs-Status über eine Session hinaus speichern

Problem Lösung Diskussion

Eine JavaScript Template Engine nutzen

Problem Lösung Diskussion

Ajax-Anfragen queuen

Problem Lösung Diskussion

Ajax und der Zurück-Button

Problem Lösung Diskussion

JavaScript am Seitenende unterbringen

Problem Lösung Diskussion

18. Unit Tests

Einleitung Unit Tests automatisieren

Problem Lösung Diskussion

Ergebnisse sicherstellen

Problem Lösung

ok( boolean[, message ]) equal( actual, expected[, message ]) deepEqual( actual, expected[, message ])

Synchrone Callbacks testen

Problem Lösung Diskussion

Asynchrone Callbacks testen

Problem Lösung Diskussion

Benutzeraktionen testen

Problem Lösung Diskussion

Tests atomar halten

Problem Lösung Diskussion

Tests gruppieren

Problem Lösung Diskussion

Durchzuführende Tests auswählen

Problem Lösung Diskussion

Index Kolophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →