JQuery kurz & gut, 2nd Edition

Table of contents

1. jQuery: kurz & gut
2. Einführung
   1. Aufbau des Buchs
   2. Konventionen
3. 1. JavaScript
   1. JavaScript-Grundlagen
      1. Einfache Datentypen
         1. Boolean
         2. Number
         3. String
      2. Komplexe Datentypen
         1. Object
         2. Array
         3. Function
         4. Callback-Funktionen
   2. Programmiertechniken
      1. Ausführungskontext von Funktionen
      2. Method Chaining – Verkettung von Funktionsaufrufen
      3. Unobtrusive JavaScript – unaufdringliches JavaScript
   3. Dokumentenmodell
4. 2. jQuery-Grundlagen
   1. jQuery einbinden
      1. Klassisches Einbinden der Bibliothek
      2. Nutzung eines Content Delivery Network
         1. Google CDN
         2. Microsoft CDN
   2. Nützliche Werkzeuge
      1. Firebug
      2. FireQuery – Firebug-Erweiterungen für jQuery
   3. Kompatibilität mit anderen Bibliotheken
   4. Method Chaining
   5. Die jQuery-Funktion
      1. jQuery(selector, context): Selektor ausführen
      2. jQuery(html, document): Elemente erstellen
      3. jQuery(html, properties): Elemente erstellen
      4. jQuery(domElements): DOM-Elemente mit jQuery-Funktionalität erweitern
         1. jQuery(function): Abkürzung für das DOM-Event Ready
   6. Zugriff auf die Elemente des Selektors
      1. each(callback): Callback auf alle Elemente ausführen
      2. size(): Anzahl der Elemente in der aktuellen Auswahl
      3. length: Anzahl der Elemente in der aktuellen Auswahl
      4. selector: der aktuell verwendete Selektor
      5. context: Kontext der aktuellen Auswahl
      6. eq(index): Auswahl auf ein Element reduzieren
      7. get(): auf die DOM-Elemente zugreifen
      8. get(index): einzelnes Element wiedergeben
      9. index(element): Position eines Elements in der Auswahl feststellen
      10. index(selector): Position des Elements
   7. Speicherfunktionen
      1. data(name): Variable name auslesen
      2. data(): Auf alle Variablen zugreifen
      3. data(name, value): einer Variable einen Wert zuweisen
      4. data(map): mehrere Datensätze speichern
      5. removeData(name): Datensatz entfernen
   8. Queues: Warteschlangen für Methoden
      1. queue(name): Funktionen der Queue name
      2. queue(name, fn): Funktion zur Warteschlange hinzufügen
      3. queue(name, queue): Warteschlange ersetzen
      4. dequeue(name): älteste Methode ausführen und entfernen
      5. clearQueue(name): Warteschlange leeren
5. 3. Suchen
   1. Selector Engine
      1. Selektoren einsetzen
   2. CSS-Selektoren
      1. HTML-Tags als Suchkriterium
      2. Element-ID als Suchkriterium
      3. Klassen als Suchkriterium
      4. Alle Elemente finden
      5. Mehrere Ausdrücke im Suchkriterium
      6. Hierarchien in Selektoren
         1. Vorfahre – Nachfahre
         2. Eltern – Kind
         3. Benachbarte Elemente
         4. Geschwisterelemente
      7. Attribute als Suchkriterium
         1. Attribut vorhanden
         2. Attribut mit einem bestimmten Wert
         3. Attribut ist ungleich Wert
         4. Attribut beginnt mit Wert
         5. Attribut endet mit Wert
         6. Attribut enthält Wert
         7. Mehrere Attribute verketten
   3. Suchfilter
      1. Basisfilter
         1. Erstes Element
         2. Letztes Element
         3. Negierungsfilter
         4. Gerade/ungerade Filter
         5. Indexfilter
         6. n-tes Element
         7. Elemente größer n
         8. Elemente kleiner n
         9. Titelselektor
         10. Filter für animierte Elemente
      2. Inhaltsfilter
         1. Leere Elemente
         2. Selektor enthält
         3. Elternselektor
         4. n-Kind-Filter
            1. Gerade und ungerade Elemente
            2. n-Kind-Element mit Formel
            3. Erstes Kind
            4. Letztes Kind
            5. Einziges Kind
         5. Filter für Formulare
            1. Alle Eingabeelemente
            2. Alle Eingabeelemente vom Typ Text
            3. Alle Passworteingabefelder
            4. Alle Radioelemente
            5. Alle Checkboxen
            6. Alle Submit-Elemente
            7. Alle Image-Elemente
            8. Alle Zurücksetzen-Elemente
            9. Alle Buttons
            10. Alle Datei-auswählen-Elemente
         6. Filter für den Zustand von Formularelementen
            1. Aktive Elemente
            2. Alle deaktivierten Elemente
            3. Alle ausgewählten Radio- oder Checkbox-Elemente
            4. Alle markierten Elemente in Auswahllisten
   4. Mit dem Suchergebnis arbeiten
      1. toArray(): Ergebnismenge als Array
      2. Filter
         1. eq(n): liefert das Element mit dem Index n
         2. filter(selector): Elementauswahl weiter einschränken
         3. filter(fn): Funktion verwenden, um Auswahl weiter einzuschränken
         4. has(selector): auf enthaltene Elemente prüfen
         5. is(selector): auf Existenz eines Elements prüfen
         6. map(fn): auf jedes Elements eines Array eine Methode anwenden
         7. not(selector): Elemente mit Selektor aus der Auswahl entfernen
         8. not(filterFn): Elemente mit Filter-Funktion aus der Auswahl entfernen
         9. slice(start, end): Teilmenge der Elementliste extrahieren
   5. Suchergebnis bearbeiten
      1. add(selector, context): zur Ergebnismenge weitere Elemente hinzufügen
      2. children(selector): Kindelemente holen
      3. closest(selector, context): nächstes Element finden
      4. contents(): auf den Inhalt der Elemente zugreifen
      5. find(selector): nach bestimmten Nachkommen suchen
      6. first(): Sammlung auf das erste Element reduzieren
      7. last(): Sammlung auf das letzte Element reduzieren
      8. next(selector): nachfolgende Geschwisterelemente finden
      9. nextAll(selector): alle nachfolgenden Geschwister
      10. nextUntil(selector): alle nachfolgenden Geschwister bis selector
      11. offsetParent(): Vorfahr mit Positionierung
      12. parent(selector): Zugriff auf die Elternelemente
      13. parents(selector): Zugriff auf die Elternelemente
      14. parentsUntil(selector): Zugriff auf die Elternelemente
      15. prev(selector): auf vorhergehende Geschwisterelemente zugreifen
      16. prevAll(selector): auf alle vorhergehenden Geschwisterelemente zugreifen
      17. prevUntil(selector): auf vorhergehende Geschwisterelemente zugreifen
      18. siblings(selector): alle Geschwister ausgeben
      19. Verketten
          1. andSelf(): Suchergebnis um Elemente erweitern
          2. end(): Aufruf einer Traversing-Methode rückgängig machen
6. 4. Ändern
   1. Attribute
      1. attr
         1. attr(name): Attribut auslesen
         2. attr(key, value): Attribut auf einen bestimmten Wert setzen
         3. attr(properties): mehrere Attribute auf einmal setzen
         4. attr(key, fn): Attribut auf Rückgabewert einer Funktion setzen
         5. remoteAttr(name): Attribut entfernen
   2. Klassen
      1. addClass(name): Klassenzugehörigkeit setzen
      2. hasClass(name): prüfen, ob ein Element zu einer Klasse gehört
      3. removeClass(name): Elemente aus einer Klasse entfernen
      4. toggleClass(name, switch): Zugehörigkeit zur Klasse wechseln
   3. HTML
      1. html(): HTML eines Elements auslesen
      2. html(string): HTML eines Elements setzen
      3. html(callbackFn): HTML von Elementen dynamisch setzen
      4. text(): Elemente als Text
      5. text(string): Text von Elementen setzen
      6. text(callbackFn): Text von Elementen dynamisch setzen
      7. Methoden für das Ändern von Formularelementen
         1. val(): aktueller Wert eines Elements
         2. val(wert): den Wert eines Eingabeelements setzen
         3. val(callbackFn): den Wert eines Eingabeelements dynamisch setzen
7. 5. DOM-Elemente
   1. Innerhalb von Elementen einfügen
      1. append(content): Element nach letztem Kind einfügen
      2. append(callbackFn): Element nach letztem Kind einfügen
      3. appendTo(selector): Elemente in selector einfügen
      4. prepend(content): content als erstes Kind einfügen
      5. prependTo(selector): aktuelle Elementauswahl in selector einfügen
      6. Elemente außen einfügen
         1. after(content): Elemente hinter einem Element einfügen
         2. insertAfter(selector): Elemente der aktuellen Auswahl hinter selector einfügen
         3. before(content): content vor einem Element einfügen
         4. insertBefore(selector): Elemente vor Elemente aus selector einfügen
      7. Um Elemente herum einfügen
         1. wrap(html): jedes Element mit html umschließen
         2. wrap(elem): jedes Element mit elem umschließen
         3. wrap(callbackFn): Elemente dynamisch umschließen
         4. wrapAll(html): alle Elemente in html wrappen
         5. wrapAll(elem): alle Elemente in elem wrappen
         6. wrapInner(html): die Kinder jedes Elements mit html wrappen
         7. wrapInner(elem): die Kinder jedes Elements mit elem wrappen
         8. wrapInner(callbackFn): die Kinder jedes Elements dynamisch wrappen
         9. unwrap(): das Elternelement entfernen
      8. Ersetzen
         1. replaceWith(html): ersetzt Elemente durch die Elemente, die in html beschrieben werden
         2. replaceWith(elem): ersetzt Element durch die übergebenen Elemente
         3. replaceAll(selector): mit Elementen des aktuellen Selektors alle Elemente des übergebenen Selektors überschreiben
      9. Entfernen
         1. detach(selector): Elemente lösen
         2. empty(): Inhalte löschen
         3. remove(): Elemente löschen
         4. remove(selector): Elemente löschen
      10. Kopieren
          1. clone(): Elemente kopieren
          2. clone(true): Elemente kopieren und dabei Event-Handler beibehalten
      11. Elemente erstellen
          1. Elemente aus HTML-Quelltext erzeugen
          2. Elemente mit DOM-Funktionen erzeugen
   2. CSS
      1. css(name): aktuellen Wert für eine CSS-Eigenschaft ausgeben
      2. css(properties): Setzen mehrerer CSS-Eigenschaften
      3. css(name, wert): eine einzelne CSS-Eigenschaft setzen
      4. css(name, callbackFn): eine einzelne CSS-Eigenschaft dynamisch setzen
      5. Positionierung
         1. offset(): Position eines Elements ermitteln
         2. offset(coords): Position eines Elements setzen
         3. offsetParent(): Vorfahren mit Positionierung finden
         4. position(): Position relativ zum Elternelement
         5. scrollTop(): vertikal gescrollte Position eines Elements
         6. scrollTop(wert): Element vertikal scrollen
         7. scrollLeft(): horizontal gescrollte Position eines Elements
         8. scrollLeft(val): Elemente horizontal scrollen
         9. height(): die Höhe eines Elements auslesen
         10. height(pixel): Höhe eines Elements setzen
         11. width(): Breite eines Elements auslesen
         12. width(pixel): Breite eines Elements setzen
         13. innerHeight(): innere Höhe eines Elements
         14. innerWidth(): innere Breite eines Elements
         15. outerHeight(withMargin): äußere Breite eines Elements
         16. outerWidth(withMargin): äußere Breite eines Elements
8. 6. Events
   1. DOM Ready-Event-Handler
      1. ready(fn): Funktion ausführen, sobald das Dokument bereit ist
   2. Das Event-Objekt
      1. Events erzeugen
         1. Attribute eines jQuery-Events
         2. event.type: Typ des Events
         3. event.data: optionale Daten des Events
         4. event.relatedTarget: letztes betroffenes Element
         5. event.currentTarget: das aktuelle Element
         6. event.pageX/pageY: Mausposition relativ zum Dokument
         7. event.result: Ergebnis eines Event-Handlers
         8. event.timeStamp: Zeitpunkt, an dem ein Event ausgelöst wird
         9. event.namespace: Namespace des Events
      2. Methoden von Event-Objekten
         1. event.preventDefault(): Standardaktion verhindern
         2. event.isDefaultPrevented(): prüfen, ob die Standardaktion ausgeführt werden soll
         3. event.stopPropagation(): Ereignisbenachrichtigung stoppen
         4. event.isPropagationStopped(): prüfen, ob ein Event weiter propagiert werden soll
         5. event.stopImmediatePropagation()
            1. event.isImmediatePropagationStopped(): prüfen, ob weitere Event-Handler ausgeführt werden sollen
      3. Event-Namensräume
   3. Behandeln von Events
      1. bind(type, data, fn): einen Event-Handler an Elemente binden
      2. bind(map): mehrere Event-Handler binden
      3. one(type, data, fn): Events nur einmal verarbeiten lassen
      4. trigger(event, data): ein Event auslösen
      5. triggerHandler(event, data): Event-Handler für ein bestimmtes Element laufen lassen
      6. unbind(type, fn): Event-Handler entfernen
      7. Dynamische Event-Handler-Bindung
         1. delegate(selector, type, data, fn): Event-Handler delegieren
         2. undelegate(selector, type, handler): delegierten Event-Handler entfernen
         3. live(type, fn): Event-Handler an einen Elementtyp binden
         4. die(type, fn): Event-Handler entfernen
      8. Hilfsmethoden für Interaktionen
         1. hover(over, out)
         2. toggle(fn, fn2, fn3, fn4 ...): durch Event-Handler durchklicken
      9. Event-Helper
   4. Event-Typen
      1. error
      2. focus
      3. focusin
      4. focusout
      5. load
      6. unload
      7. Tastatur-Events
         1. keydown
         2. keypress
         3. keyup
      8. Maus-Events
         1. click
         2. dblclick
         3. mousedown
         4. mouseenter
         5. mouseleave
         6. mousemove
         7. mouseout
         8. mouseover
         9. mouseup
      9. Anzeigebezogene Events
         1. resize
         2. scroll
      10. Formular-Events
          1. blur
          2. change
          3. select
          4. submit
      11. Ajax-Events
9. 7. Animationen
   1. Grundlagen
      1. Warteschlange für Animationen
   2. Animationen durchführen
      1. animate(params, duration, easing, callback)
      2. animate(params, options)
      3. Mögliche Optionen für eine Animation
      4. stop(clearQueue, gotoEnd): Animation beenden
      5. Grundlegende Animationen
         1. show(dauer, easing, callback): Elemente anzeigen
         2. hide(dauer, easing, callback): Elemente verstecken
         3. toggle(dauer, easing, callback): Sichtbarkeit ändern
         4. toggle(switch): Sichtbarkeit durch Angabe eines booleschen Parameters ändern
         5. delay(dauer, queue): Animationspause
      6. Sliding
         1. slideDown(dauer, easing, callback): Element anzeigen lassen
         2. slideUp(dauer, easing, callback): Element ausblenden
         3. slideToggle(dauer, easing, callback): Sichtbarkeit ändern
      7. Fading
         1. fadeIn(dauer, easing, callback): Elemente einblenden
         2. fadeOut(dauer, easing, callback): Elemente ausblenden
         3. fadeTo(dauer, opacity, easing, callback): Elemente auf eine bestimmte Transparenz setzen
      8. Einstellungen
         1. jQuery.fx.off: Animationen abschalten
         2. jQuery.fx.interval: Wartezeit zwischen den Animationsschritten
10. 8. Ajax
    1. Ajax-Anfragen durchführen
       1. jQuery.ajax(options): Ajax-Anfragen durchführen
       2. Optionen für die Methoden ajax und ajaxSetup
          1. async: synchrone oder asynchrone Events
          2. beforeSend: Callback-Funktion vor dem Abschicken der Daten
          3. cache: Browsercache umgehen
          4. complete: Callback-Funktion bei Abschluss der Ajax-Anfrage
          5. contentType: Setzen des Content-Type für die Anfrage
          6. data: Daten für die Anfrage
          7. dataFilter: Ajax-Antwort verarbeiten
          8. dataType: Datentyp der Anfrage bestimmen
          9. error: Callback-Funktion im Fehlerfall
          10. global: Globale Event-Handler für Ajax-Events auslösen
          11. ifModified: Gültigkeit der Antworten bestimmen
          12. jsonp: Parametername für die Callback-Funktion einer JSON-Anfrage
          13. password: Passwort für die Anfrage
          14. processData: Verarbeitung der Daten verhindern
          15. success: Callback für erfolgreiche Ajax-Requests
          16. timeout: Auszeit einstellen
          17. type: Typ der Anfrage setzen
          18. url: Ziel der Anfrage
          19. username: Benutzername
          20. xhr: XMLHttpRequest-Objekt erzeugen
       3. Ajax-Hilfsmethoden
          1. load(url, data, callback): Daten in das Dokument laden
          2. jQuery.get(url, data, callback, type): eine GET-Anfrage durchführen
          3. jQuery.getJSON(url, data, callback): GET-Anfrage mit JSON als Ergebnis
          4. jQuery.getScript(url, callback): JavaScript laden
          5. jQuery.post(url, data, callback, type): POST-Anfragen durchführen
       4. Ajax-Events
          1. Lokale Events: Event-Handler an das Anfrageobjekt binden
          2. Global Events: Event-Handler an DOM-Elemente binden
       5. Ajax-Event-Helper
          1. ajaxStart(callback): Event-Handler für ajaxStart
          2. ajaxSend(callback): Event-Handler für ajaxSend
          3. ajaxError(callback): Event-Handler für ajaxError
          4. ajaxSuccess(callback): Event-Handler für ajaxSuccess
          5. ajaxComplete(callback) : Event-Handler für ajaxComplete
          6. ajaxStop(callback): Event-Handler für ajaxStop
       6. Hilfsfunktionen
          1. jQuery.ajaxSetup(options): Ajax-Grundeinstellungen setzen
          2. serialize(): Formularelemente serialisieren
          3. serializeArray(): zu einem Array serialisieren
11. 9. Hilfsmittel
    1. Browsereigenschaften
       1. jQuery.support: Liste mit den Fähigkeiten des Browsers
          1. boxModel
          2. cssFloat
          3. hrefNormalized
          4. htmlSerialize
          5. leadingWhitespace
          6. noCloneEvent
          7. objectAll
          8. opacity
          9. scriptEval
          10. style
          11. tbody
       2. Hilfsfunktionen
          1. jQuery.contains(container, elem)
          2. jQuery.each(obj, callback)
          3. jQuery.error(message)
          4. jQuery.extend(deep, target, obj1, obj..)
          5. jQuery.noop()
          6. jQuery.proxy(callback, context)
          7. jQuery.proxy(object, method)
    2. Array-Funktionen
       1. jQuery.grep(array, callback, invert): Array filtern
          1. jQuery.makeArray(obj): Array erzeugen
          2. jQuery.map(array, callback): Mapping von Werten durchführen
          3. jQuery.inArray(value, array): auf Vorkommen in einem Array prüfen
          4. jQuery.merge(first, second): Arrays vereinen
          5. jQuery.unique(array)
    3. Datentypbezogene Methoden
       1. jQuery.isArray(object)
       2. jQuery.isFunction(object)
       3. jQuery.isEmptyObject (object)
       4. jQuery.isWindow(object)
       5. jQuery.type (object)
    4. String-Methoden
       1. jQuery.trim(string)
       2. jQuery.param(object, traditional): Objekte serialisieren
       3. jQuery.parseJSON(string)
12. 10. Plugins
    1. Grundlagen
       1. Funktionen und Methoden
       2. jQuery erweitern mit .extend
    2. Beliebte Plugins
       1. jQuery UI
          1. Tabs – Karteikarten
          2. Datepicker – Auswahl eines Datums in einem Kalenderblatt
          3. Dialog – modale Dialogfenster
       2. Validation-Plugin von Jörn Zaefferer
       3. blockUI von Mike Alsup
13. Stichwortverzeichnis