jQuery · kurz & gut by Vdovkin, Andreas -- Read -- Imperial Library of Trantor

Index

jQuery: kurz & gut Einführung

Aufbau des Buchs Konventionen

1. JavaScript

JavaScript-Grundlagen

Einfache Datentypen

Boolean Number String

Komplexe Datentypen

Object Array Function Callback-Funktionen

Programmiertechniken

Ausführungskontext von Funktionen Method Chaining – Verkettung von Funktionsaufrufen Unobtrusive JavaScript – unaufdringliches JavaScript

Dokumentenmodell

2. jQuery-Grundlagen

jQuery einbinden

Klassisches Einbinden der Bibliothek Nutzung eines Content Delivery Network

Google CDN Microsoft CDN

Nützliche Werkzeuge

Firebug FireQuery – Firebug-Erweiterungen für jQuery

Kompatibilität mit anderen Bibliotheken Method Chaining Die jQuery-Funktion

jQuery(selector, context): Selektor ausführen jQuery(html, document): Elemente erstellen jQuery(html, properties): Elemente erstellen jQuery(domElements): DOM-Elemente mit jQuery-Funktionalität erweitern

jQuery(function): Abkürzung für das DOM-Event Ready

Zugriff auf die Elemente des Selektors

each(callback): Callback auf alle Elemente ausführen size(): Anzahl der Elemente in der aktuellen Auswahl length: Anzahl der Elemente in der aktuellen Auswahl selector: der aktuell verwendete Selektor context: Kontext der aktuellen Auswahl eq(index): Auswahl auf ein Element reduzieren get(): auf die DOM-Elemente zugreifen get(index): einzelnes Element wiedergeben index(element): Position eines Elements in der Auswahl feststellen index(selector): Position des Elements

Speicherfunktionen

data(name): Variable name auslesen data(): Auf alle Variablen zugreifen data(name, value): einer Variable einen Wert zuweisen data(map): mehrere Datensätze speichern removeData(name): Datensatz entfernen

Queues: Warteschlangen für Methoden

queue(name): Funktionen der Queue name queue(name, fn): Funktion zur Warteschlange hinzufügen queue(name, queue): Warteschlange ersetzen dequeue(name): älteste Methode ausführen und entfernen clearQueue(name): Warteschlange leeren

3. Suchen

Selector Engine

Selektoren einsetzen

CSS-Selektoren

HTML-Tags als Suchkriterium Element-ID als Suchkriterium Klassen als Suchkriterium Alle Elemente finden Mehrere Ausdrücke im Suchkriterium Hierarchien in Selektoren

Vorfahre – Nachfahre Eltern – Kind Benachbarte Elemente Geschwisterelemente

Attribute als Suchkriterium

Attribut vorhanden Attribut mit einem bestimmten Wert Attribut ist ungleich Wert Attribut beginnt mit Wert Attribut endet mit Wert Attribut enthält Wert Mehrere Attribute verketten

Suchfilter

Basisfilter

Erstes Element Letztes Element Negierungsfilter Gerade/ungerade Filter Indexfilter n-tes Element Elemente größer n Elemente kleiner n Titelselektor Filter für animierte Elemente

Inhaltsfilter

Leere Elemente Selektor enthält Elternselektor n-Kind-Filter

Gerade und ungerade Elemente n-Kind-Element mit Formel Erstes Kind Letztes Kind Einziges Kind

Filter für Formulare

Alle Eingabeelemente Alle Eingabeelemente vom Typ Text Alle Passworteingabefelder Alle Radioelemente Alle Checkboxen Alle Submit-Elemente Alle Image-Elemente Alle Zurücksetzen-Elemente Alle Buttons Alle Datei-auswählen-Elemente

Filter für den Zustand von Formularelementen

Aktive Elemente Alle deaktivierten Elemente Alle ausgewählten Radio- oder Checkbox-Elemente Alle markierten Elemente in Auswahllisten

Mit dem Suchergebnis arbeiten

toArray(): Ergebnismenge als Array Filter

eq(n): liefert das Element mit dem Index n filter(selector): Elementauswahl weiter einschränken filter(fn): Funktion verwenden, um Auswahl weiter einzuschränken has(selector): auf enthaltene Elemente prüfen is(selector): auf Existenz eines Elements prüfen map(fn): auf jedes Elements eines Array eine Methode anwenden not(selector): Elemente mit Selektor aus der Auswahl entfernen not(filterFn): Elemente mit Filter-Funktion aus der Auswahl entfernen slice(start, end): Teilmenge der Elementliste extrahieren

Suchergebnis bearbeiten

add(selector, context): zur Ergebnismenge weitere Elemente hinzufügen children(selector): Kindelemente holen closest(selector, context): nächstes Element finden contents(): auf den Inhalt der Elemente zugreifen find(selector): nach bestimmten Nachkommen suchen first(): Sammlung auf das erste Element reduzieren last(): Sammlung auf das letzte Element reduzieren next(selector): nachfolgende Geschwisterelemente finden nextAll(selector): alle nachfolgenden Geschwister nextUntil(selector): alle nachfolgenden Geschwister bis selector offsetParent(): Vorfahr mit Positionierung parent(selector): Zugriff auf die Elternelemente parents(selector): Zugriff auf die Elternelemente parentsUntil(selector): Zugriff auf die Elternelemente prev(selector): auf vorhergehende Geschwisterelemente zugreifen prevAll(selector): auf alle vorhergehenden Geschwisterelemente zugreifen prevUntil(selector): auf vorhergehende Geschwisterelemente zugreifen siblings(selector): alle Geschwister ausgeben Verketten

andSelf(): Suchergebnis um Elemente erweitern end(): Aufruf einer Traversing-Methode rückgängig machen

4. Ändern

Attribute

attr

attr(name): Attribut auslesen attr(key, value): Attribut auf einen bestimmten Wert setzen attr(properties): mehrere Attribute auf einmal setzen attr(key, fn): Attribut auf Rückgabewert einer Funktion setzen remoteAttr(name): Attribut entfernen

Klassen

addClass(name): Klassenzugehörigkeit setzen hasClass(name): prüfen, ob ein Element zu einer Klasse gehört removeClass(name): Elemente aus einer Klasse entfernen toggleClass(name, switch): Zugehörigkeit zur Klasse wechseln

HTML

html(): HTML eines Elements auslesen html(string): HTML eines Elements setzen html(callbackFn): HTML von Elementen dynamisch setzen text(): Elemente als Text text(string): Text von Elementen setzen text(callbackFn): Text von Elementen dynamisch setzen Methoden für das Ändern von Formularelementen

val(): aktueller Wert eines Elements val(wert): den Wert eines Eingabeelements setzen val(callbackFn): den Wert eines Eingabeelements dynamisch setzen

5. DOM-Elemente

Innerhalb von Elementen einfügen

append(content): Element nach letztem Kind einfügen append(callbackFn): Element nach letztem Kind einfügen appendTo(selector): Elemente in selector einfügen prepend(content): content als erstes Kind einfügen prependTo(selector): aktuelle Elementauswahl in selector einfügen Elemente außen einfügen

after(content): Elemente hinter einem Element einfügen insertAfter(selector): Elemente der aktuellen Auswahl hinter selector einfügen before(content): content vor einem Element einfügen insertBefore(selector): Elemente vor Elemente aus selector einfügen

Um Elemente herum einfügen

wrap(html): jedes Element mit html umschließen wrap(elem): jedes Element mit elem umschließen wrap(callbackFn): Elemente dynamisch umschließen wrapAll(html): alle Elemente in html wrappen wrapAll(elem): alle Elemente in elem wrappen wrapInner(html): die Kinder jedes Elements mit html wrappen wrapInner(elem): die Kinder jedes Elements mit elem wrappen wrapInner(callbackFn): die Kinder jedes Elements dynamisch wrappen unwrap(): das Elternelement entfernen

Ersetzen

replaceWith(html): ersetzt Elemente durch die Elemente, die in html beschrieben werden replaceWith(elem): ersetzt Element durch die übergebenen Elemente replaceAll(selector): mit Elementen des aktuellen Selektors alle Elemente des übergebenen Selektors überschreiben

Entfernen

detach(selector): Elemente lösen empty(): Inhalte löschen remove(): Elemente löschen remove(selector): Elemente löschen

Kopieren

clone(): Elemente kopieren clone(true): Elemente kopieren und dabei Event-Handler beibehalten

Elemente erstellen

Elemente aus HTML-Quelltext erzeugen Elemente mit DOM-Funktionen erzeugen

CSS

css(name): aktuellen Wert für eine CSS-Eigenschaft ausgeben css(properties): Setzen mehrerer CSS-Eigenschaften css(name, wert): eine einzelne CSS-Eigenschaft setzen css(name, callbackFn): eine einzelne CSS-Eigenschaft dynamisch setzen Positionierung

offset(): Position eines Elements ermitteln offset(coords): Position eines Elements setzen offsetParent(): Vorfahren mit Positionierung finden position(): Position relativ zum Elternelement scrollTop(): vertikal gescrollte Position eines Elements scrollTop(wert): Element vertikal scrollen scrollLeft(): horizontal gescrollte Position eines Elements scrollLeft(val): Elemente horizontal scrollen height(): die Höhe eines Elements auslesen height(pixel): Höhe eines Elements setzen width(): Breite eines Elements auslesen width(pixel): Breite eines Elements setzen innerHeight(): innere Höhe eines Elements innerWidth(): innere Breite eines Elements outerHeight(withMargin): äußere Breite eines Elements outerWidth(withMargin): äußere Breite eines Elements

6. Events

DOM Ready-Event-Handler

ready(fn): Funktion ausführen, sobald das Dokument bereit ist

Das Event-Objekt

Events erzeugen

Attribute eines jQuery-Events event.type: Typ des Events event.data: optionale Daten des Events event.relatedTarget: letztes betroffenes Element event.currentTarget: das aktuelle Element event.pageX/pageY: Mausposition relativ zum Dokument event.result: Ergebnis eines Event-Handlers event.timeStamp: Zeitpunkt, an dem ein Event ausgelöst wird event.namespace: Namespace des Events

Methoden von Event-Objekten

event.preventDefault(): Standardaktion verhindern event.isDefaultPrevented(): prüfen, ob die Standardaktion ausgeführt werden soll event.stopPropagation(): Ereignisbenachrichtigung stoppen event.isPropagationStopped(): prüfen, ob ein Event weiter propagiert werden soll event.stopImmediatePropagation()

event.isImmediatePropagationStopped(): prüfen, ob weitere Event-Handler ausgeführt werden sollen

Event-Namensräume

Behandeln von Events

bind(type, data, fn): einen Event-Handler an Elemente binden bind(map): mehrere Event-Handler binden one(type, data, fn): Events nur einmal verarbeiten lassen trigger(event, data): ein Event auslösen triggerHandler(event, data): Event-Handler für ein bestimmtes Element laufen lassen unbind(type, fn): Event-Handler entfernen Dynamische Event-Handler-Bindung

delegate(selector, type, data, fn): Event-Handler delegieren undelegate(selector, type, handler): delegierten Event-Handler entfernen live(type, fn): Event-Handler an einen Elementtyp binden die(type, fn): Event-Handler entfernen

Hilfsmethoden für Interaktionen

hover(over, out) toggle(fn, fn2, fn3, fn4 ...): durch Event-Handler durchklicken

Event-Helper

Event-Typen

error focus focusin focusout load unload Tastatur-Events

keydown keypress keyup

Maus-Events

click dblclick mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup

Anzeigebezogene Events

resize scroll

Formular-Events

blur change select submit

Ajax-Events

7. Animationen

Grundlagen

Warteschlange für Animationen

Animationen durchführen

animate(params, duration, easing, callback) animate(params, options) Mögliche Optionen für eine Animation stop(clearQueue, gotoEnd): Animation beenden Grundlegende Animationen

show(dauer, easing, callback): Elemente anzeigen hide(dauer, easing, callback): Elemente verstecken toggle(dauer, easing, callback): Sichtbarkeit ändern toggle(switch): Sichtbarkeit durch Angabe eines booleschen Parameters ändern delay(dauer, queue): Animationspause

Sliding

slideDown(dauer, easing, callback): Element anzeigen lassen slideUp(dauer, easing, callback): Element ausblenden slideToggle(dauer, easing, callback): Sichtbarkeit ändern

Fading

fadeIn(dauer, easing, callback): Elemente einblenden fadeOut(dauer, easing, callback): Elemente ausblenden fadeTo(dauer, opacity, easing, callback): Elemente auf eine bestimmte Transparenz setzen

Einstellungen

jQuery.fx.off: Animationen abschalten jQuery.fx.interval: Wartezeit zwischen den Animationsschritten

8. Ajax

Ajax-Anfragen durchführen

jQuery.ajax(options): Ajax-Anfragen durchführen Optionen für die Methoden ajax und ajaxSetup

async: synchrone oder asynchrone Events beforeSend: Callback-Funktion vor dem Abschicken der Daten cache: Browsercache umgehen complete: Callback-Funktion bei Abschluss der Ajax-Anfrage contentType: Setzen des Content-Type für die Anfrage data: Daten für die Anfrage dataFilter: Ajax-Antwort verarbeiten dataType: Datentyp der Anfrage bestimmen error: Callback-Funktion im Fehlerfall global: Globale Event-Handler für Ajax-Events auslösen ifModified: Gültigkeit der Antworten bestimmen jsonp: Parametername für die Callback-Funktion einer JSON-Anfrage password: Passwort für die Anfrage processData: Verarbeitung der Daten verhindern success: Callback für erfolgreiche Ajax-Requests timeout: Auszeit einstellen type: Typ der Anfrage setzen url: Ziel der Anfrage username: Benutzername xhr: XMLHttpRequest-Objekt erzeugen

Ajax-Hilfsmethoden

load(url, data, callback): Daten in das Dokument laden jQuery.get(url, data, callback, type): eine GET-Anfrage durchführen jQuery.getJSON(url, data, callback): GET-Anfrage mit JSON als Ergebnis jQuery.getScript(url, callback): JavaScript laden jQuery.post(url, data, callback, type): POST-Anfragen durchführen

Ajax-Events

Lokale Events: Event-Handler an das Anfrageobjekt binden Global Events: Event-Handler an DOM-Elemente binden

Ajax-Event-Helper

ajaxStart(callback): Event-Handler für ajaxStart ajaxSend(callback): Event-Handler für ajaxSend ajaxError(callback): Event-Handler für ajaxError ajaxSuccess(callback): Event-Handler für ajaxSuccess ajaxComplete(callback) : Event-Handler für ajaxComplete ajaxStop(callback): Event-Handler für ajaxStop

Hilfsfunktionen

jQuery.ajaxSetup(options): Ajax-Grundeinstellungen setzen serialize(): Formularelemente serialisieren serializeArray(): zu einem Array serialisieren

9. Hilfsmittel

Browsereigenschaften

jQuery.support: Liste mit den Fähigkeiten des Browsers

boxModel cssFloat hrefNormalized htmlSerialize leadingWhitespace noCloneEvent objectAll opacity scriptEval style tbody

Hilfsfunktionen

jQuery.contains(container, elem) jQuery.each(obj, callback) jQuery.error(message) jQuery.extend(deep, target, obj1, obj..) jQuery.noop() jQuery.proxy(callback, context) jQuery.proxy(object, method)

Array-Funktionen

jQuery.grep(array, callback, invert): Array filtern

jQuery.makeArray(obj): Array erzeugen jQuery.map(array, callback): Mapping von Werten durchführen jQuery.inArray(value, array): auf Vorkommen in einem Array prüfen jQuery.merge(first, second): Arrays vereinen jQuery.unique(array)

Datentypbezogene Methoden

jQuery.isArray(object) jQuery.isFunction(object) jQuery.isEmptyObject (object) jQuery.isWindow(object) jQuery.type (object)

String-Methoden

jQuery.trim(string) jQuery.param(object, traditional): Objekte serialisieren jQuery.parseJSON(string)

10. Plugins

Grundlagen

Funktionen und Methoden jQuery erweitern mit .extend

Beliebte Plugins

jQuery UI

Tabs – Karteikarten Datepicker – Auswahl eines Datums in einem Kalenderblatt Dialog – modale Dialogfenster

Validation-Plugin von Jörn Zaefferer blockUI von Mike Alsup

Stichwortverzeichnis

← Prev
Back
Next →

← Prev
Back
Next →