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.

Widgets#

Eine weitere Art von JQuery-Objekten sind die Widgets. Diese sind vor allem dazu bestimmt, JSON-Objektive auf HTML-Elemente aufzusetzen und damit HTML-Elemente zu funktionell zu erweitern, bis hin zu komplexen, interaktiven Elementen.

Ein Widget kann leicht über die Funktion $.widget erzeugt werden:

$.widget("ext.Test", {});

Erklärung: Das Widget ist zunächst über "$.ext.Test" auffindbar.

Üblicherweise wird ein Widget dann auf ein HTML-Element aufgesetzt:

var widget = $("#element").Test();

Damit wird das HTML-Element zum Widget namens "Test" erweitert und der Variable "widget" zugeordnet.