jquery Kochbuch O'REILLY' Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo jquerycommunityexperts Deutsche Übersetzung von Thomas Demmig

Größe: px

Ab Seite anzeigen:

Download "jquery Kochbuch O'REILLY' Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo jquerycommunityexperts Deutsche Übersetzung von Thomas Demmig"

Bernt Böhm
vor 6 Jahren
Abrufe

1 jquery Kochbuch jquerycommunityexperts Deutsche Übersetzung von Thomas Demmig O'REILLY' Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo

2 Inhalt Vorwort Beteiligte Einleitung XIII XV XIX Grundlagen von jquery Einbinden der jquery-bibliothek in eine HTML-Seite Ausführen von jquery/javascript-code nach dem Laden des DOM, aber noch vor dem vollständigen Laden der Seite Selektieren von DOM-Elementen mit Selektoren und der jquery-funktion Selektieren von DOM-Elementen in einem bestimmten Kontext Ein Wrapper-Set mit DOM-Elementen filtern Abhängige Elemente im aktuell selektierten Wrapper-Set finden Vor einer destruktiven Änderung zur vorherigen Selektion zurückkehren Die vorherige Selektion mit der aktuellen Selektion vereinigen Das DOM basierend auf dem aktuellen Kontext durchlaufen, um ein neues Set mit DOM-Elementen zu erhalten DOM-Elemente erstellen, bearbeiten und einfügen Entfernen von DOM-Elementen DOM-Elemente ersetzen DOM-Elemente klonen Attribute von DOM-Elementen lesen, setzen und entfernen HTML-Inhalte lesen und setzen Text-Inhalte lesen und setzen Den $-Alias verwenden, ohne globale Konflikte zu erzeugen 33

3 2 Elemente mit jquery selektieren Nur Kind-Elemente selektieren Bestimmte Geschwister-Elemente selektieren Elemente über die Index-Reihenfolge selektieren Aktuell animierte Elemente selektieren Elemente anhand ihres Inhalts selektieren Elemente über eine negative Selektion selektieren Elemente anhand ihrer Sichtbarkeit selektieren Elemente anhand von Attributen selektieren Form-Elemente anhand des Typs selektieren Elemente mit bestimmten Eigenschaften selektieren Den Kontext-Parameter verwenden Einen eigenen Filter-Selektor erstellen 50 3 Fortgeschrittene Techniken Ein Set mit selektierten Ergebnissen durchlaufen Das Selektions-Set auf ein bestimmtes Element reduzieren Ein selektiertes jquery-objekt in ein reines DOM-Objekt konvertieren Den Index eines Elements in einer Selektion ermitteln Aus einem bestehenden Array ein Array mit ausgewählten Werten erstellen Eine Aktion auf einer Untermenge des selektierten Sets ausführen Konfigurieren von jquery, so dass es nicht mit anderen Bibliotheken kollidiert Funktionalität durch Plugins hinzufügen Die verwendete Selektion bestimmen 74 4 jquery-tools Features mit jquery.support erkennen Mit jquery.each über Arrays und Objekte iterieren Arrays mit jquery.grep filtern Über Array-Elemente mit jquery.map iterieren und sie verändern Zwei Arrays durch jquery.merge kombinieren Doppelte Array-Einträge mit jquery.unique ausfiltern Callback-Funktionen mit jquery.isfunction testen Whitespace aus Strings oder Form-Werten mit jquery.trim entfernen Objekte und Daten per jquery.data an DOM-Elemente anhängen Objekte durch jquery.extend erweitern 86 VI I Inhalt

4 5 Schneller, Einfacher, Spaßiger Das ist nicht jquery, sondern JavaScript! Was ist an $(this) falsch? Überflüssige Wiederholungen vermeiden Ihre verketteten jquery-methoden formatieren Code aus anderen Bibliotheken übernehmen Einen eigenen Iterator schreiben Ein Attribut umschalten Performance-Killer finden Ihre jquery-objekte puffern Schnellere Selektoren schreiben Tabellen schneller laden Schleifen programmieren Name Lookups verringern Das DOM mit.innerhtml schneller aktualisieren Debuggen? Sprengen Sie die Ketten Ist das ein Bug von jquer)'? In jquery debuggen Weniger Server-Anfragen erzeugen Zurückhaltendes JavaScript schreiben jquery für die progressive Verbesserung nutzen Machen Sie Ihre Seiten barrierefrei Dimensionen Die Dimensionen von Window und Document ermitteln Ermitteln der Dimensionen eines Elements Den Offset eines Elements ermitteln Ein Element in den sichtbaren Bereich scrollen Ermitteln, ob sich ein Element im sichtbaren Bereich befindet Zentrieren eines Elements im sichtbaren Bereich Absolute Positionierung eines Elements an seiner aktuellen Position Ein Element relativ zu einem anderen Element positionieren Stylesheets abhängig von der Browser-Breite wechseln Effekte Elemente per Sliding und Fading ein-und ausblenden Elemente durch ein Sliding Up anzeigen Erzeugen eines horizontalen Akkordeons Elemente gleichzeitig Süden und Faden 163 Inhalt VII

5 7.5 Sequenzielle Effekte anwenden Erkennen, ob Elemente aktuell animiert werden Animationen stoppen und zurücksetzen Eigene Easing-Methoden für Effekte nutzen Alle Effekte deaktivieren Aufwändigere Effekte mit jquery UI erzeugen Events Einen Handler mit vielen Events verbinden Eine Handler-Funktion mit anderen Daten wiederverwenden Ein ganzes Set mit Eventhandlern entfernen Eventhandler auslösen Dynamische Daten an Eventhandler übergeben Sofortiger Zugriff auf ein Element (noch vor document.ready) Die Ausführungsschleife für Handler stoppen Beim Verwenden von event.target das richtige Element erhalten Mehrere parallele hovero-animationen vermeiden Eventhandler für neu hinzugefügte Elemente nutzbar machen Events für Fortgeschrittene jquery nutzen, wenn es dynamisch geladen wird Das globale Auslösen von Events beschleunigen Eigene Events erstellen Eventhandler stellen benötigte Daten bereit Event-gesteuerte Plugins erstellen Benachrichtigungen erhalten, wenn jquery-methoden aufgerufen werden Objekt-Methoden als Event Listener nutzen HTML-Forms durch eigenen Code verbessern Ein Texteingabefeld beim Laden der Seite fokussieren Form-Elemente aktivieren und deaktivieren Automatisch Radio Buttons auswählen (De)selektieren aller Checkboxen durch Links (De)selektieren aller Checkboxen über einen einzelnen Umschalter Auswahl-Optionen hinzufügen und entfernen Abhängig von der Anzahl der Zeichen ins nächste Feld springen Anzahl der verbleibenden Zeichen anzeigen Texteingabefelder auf bestimmte Zeichen beschränken 233 VIII I Inhalt

6 10.10 Eine Form mit Ajax abschicken Forms überprüfen Verbesserungen von HTML-Forms durch Plugins Forms überprüfen Eingabemasken für Felder erstellen Textfelder automatisch vervollständigen Einen Wertebereich selektieren Einen Wert eingeben, der innerhalb bestimmter Grenzen liegt Dateien im Hintergrund hochladen Die Länge von Texteingabefeldern begrenzen Label oberhalb von Eingabefeldern anzeigen Ein Eingabeelement mit seinem Inhalt wachsen lassen Ein Datum wählen jquery-plugins Wo finden Sie jquery-plugins? Wann sollten Sie ein jquery-plugin schreiben? Schreiben Sie Ihr erstes jquery-plugin Ihrem Plugin Optionen mitgeben Die Kurzform $ in Ihrem Plugin verwenden Private Funktionen in Ihr Plugin aufnehmen Das Metadata-Plugin unterstützen Ihrem Plugin eine statische Funktion hinzufügen Umt Tests für Ihr Plugin mit QUmt Selbst geschriebene Benutzerschnittstellen Eigene Tooltips erstellen In einem Baum navigieren Ein Akkordeon aufziehen Registerkarten in einem Dokument Ein einfaches modales Fenster anzeigen Dropdown-Menüs erstellen Bilder zyklisch einblenden Sliding Panels Benutzerschnittstellen mit jquery Ul Die komplette jquery Ul-Suite einbinden Ein oder zwei einzelne jquery Ul-Plugins einbinden 328 Inhalt

7 14.3 Ein jquery Ul-Plugin mit den Standard-Optionen initialisieren Ein jquery Ul-Plugin mit eigenen Optionen initialisieren Eigene jquery Ul-Plugin-Standardwerte erstellen Optionen für jquery Ul-Plugins lesen und setzen Plugin-Methoden von jquery UI aufrufen Mit Events von jquery Ul-Plugins umgehen Ein jquery Ul-Plugin zerstören Einen Musikplayer mit jquery UI erstellen Themes in jquery UI Themes für jquery Ul-Widgets mit ThemeRoller erstellen Layout und Theme-Styles von jquery UI überschreiben Ein Theme auf Komponenten anwenden, die nicht zum jquery UI gehören Mehrere Themes auf einer einzelnen Seite verwenden Anhang: Weitere Informationen zu CSS jquery, Ajax, Datenformate: HTML, XML, JSON, JSONP jquery und Ajax Ajax auf der gesamten Site verwenden Einfache Ajax-Anwendung mit Rückmeldungen an den Benutzer Ajax-Hilfsfunktionen und Datentypen HTML-Fragmente mit jquery einsetzen XML-Code in ein DOM konvertieren JSON erzeugen JSON parsen jquery und JSONP verwenden jquery in großen Projekten verwenden Auf dem Client speichern Den Anwendungs-Status für eine einzelne Session speichern Den Anwendungs-Status über eine Session hinaus speichern Eine JavaScript Template Engine nutzen Ajax-Anfragen queuen Ajax und der Zurück-Button JavaScript am Seitenende unterbringen Unit Tests Unit Tests automatisieren Ergebnisse sicherstellen 437 Inhalt

8 18.3 Synchrone Callbacks testen Asynchrone Callbacks testen Benutzeraktionen testen Tests atomar halten Tests gruppieren Durchzuführende Tests auswählen 444 Index 446 Inhalt XI

Ähnliche Dokumente

Inhalt. Teil I: Der Sprachkern von JavaScript

Inhalt. Teil I: Der Sprachkern von JavaScript Inhalt Vorwort.... 1 Einführung in JavaScript... 1 1.1 Der JavaScript-Sprachkern... 4 1.2 Clientseitiges JavaScript... 9 Teil I: Der Sprachkern von JavaScript 2 Die lexikalische Struktur... 21 2.1 Zeichensatz...