This is version 1 2 3 4 5 6 7 . It is not the current version, and thus it cannot be edited.

Back to current version Restore this version

JQuery ist das wohl bekannteste Javascript Framework, das sehr viele grundlegende Funktionen zur Verfügung stellt. Damit wird die Arbeit mit Javascript deutlich erleichtert.

Allgemeines#

JQuery wird normalerweise im Namespace "jQuery" eingebunden und ist üblicherweise auf $ gemappt.

Extensions#

Extensions sind eine grundlegende Funktion in JQuery.

Funktion "extend"#

In Javascript werden alle Daten in der Form von JSON-Objekten gespeichert:

{a: 1, b: 2}

Erklärung: Ein JSON-Objekt mit zwei Feldern (Key-Value-Paaren), nämlich Key "a" und zugehöriger Value "1" sowie Key "b" und Value "2".

Die Funktion $.extend fügt zwei JSON-Objekte zusammen zu einen:

$.extend({a: 1, b: 2}, {b: 3, c: 4});

Erklärung: Das Ergebnis lautet {a: 1, b: 3, c: 4}, weil bei gleichen Keys der Key-Value-Paare der Value des zweiten JSON-Objekts verwendet wird.

JQuery Erweitern#

JQuery ist darauf ausgelegt, selbst erweitert zu werden. Dazu ruft man extend mit nur einem Parameter auf:

$.extend({
    test: function() {
        console.log("Hallo");
        return this;
    }
});

Erklärung: Diese Extension fügt JQuery die Funktion "test" hinzu. Diese kann, genauso wie alle andere JQuery-Funktionen, über $.test() aufgerufen werden. JQuery-Funktionen geben üblicherweise this zurück, sodass man die Aufrufe verketten kann.

JQuery Funktionen erweitern#

JQuery kann nur nur das nackte $ darstellen, sondern zusätzlich Daten transportieren.

Nehmen wir folgenden HTML-Code an:

<div id="element"/>

So können wir mit JQuery das Element wrappen:

$("#element")

Erklärung: Hier wird ein Element über einen CSS-Selektor als Daten verwendet. Es sind aber auch noch eine Vielzahl weiterer Daten, von HTML-Elementen, über XML bis zu Objekten kapselbar. Vor allem können es mehrere Elemente sein, die durch eine JQuery-Function gewrappt werden.

Die Elemente können jederzeit ausgepackt werden, indem der Array-Index-Operator eingesetzt wird:

$("#element")[0]

Aber es können auch Funktionen darauf angewendet werden, von denen eine ganze Reihe bereits definiert ist:

$("#element").attr("id")

Erklärung: Die Funktion "attr" liefert den Wert eines Attributs, hier also "element".

Solche Funktionen können aber auch selbst definiert werden:

$.fn.extends({
    test: function() {
        console.log("got: ", this.attr("id"));
        return this;
    }
});

$("#element").test();

Erklärung: Hier wird die Funktion "test" definiert und dann auf das selektierte Element angewendet.

Hinweis: Auch die Daten-Funktionen $.fn geben this zurück, falls diese keinen expliziten Rückgabewert liefern. Damit ist eine Verkettung von Funktionsaufrufen möglich.