O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

JQuery kurz & gut, 2nd Edition

Book Description

jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur DOM-Manipulation sowie zur Durchführung von Ajax-Anfragen zur Verfügung stellt.

jQuery kurz & gut vermittelt dem Leser zu Beginn die notwendigen Grundlagen von JavaScript, dem W3C-Dokumentenmodell und die grundlegende Arbeitsweise mit jQuery. "Suchen" und "Ändern" stellen die Kernkapitel der Befehlsreferenz dar und beschreiben die Navigation und Manipulation von DOM-Elementen.

Wie man Events und Ajax mit jQuery nutzt und welche Werkzeuge bei der Entwicklung besonders hilfreich sind, sind neben der Anleitung, wie man eigene Plugins erstellt, weitere Kapitel, die dem Leser kurz und präzise die Arbeit mit dem JavaScript-Framework nahe bringen.

Die zweite Auflage wurde auf die Version jQuery 1.4.4 aktualisiert.

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