Intersult: JQuery

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.

Initialisierung#

Ein Widget kann eine Funktion zur Initialisierung besitzen:

$.widget("ext.Test", {
    _init: function() {
        console.log("init");
    }
});

Erklärung: Nach dem das Widget auf das HTML-Element mittels $("#element").Test() installiert wurde, wird automatisch der Code der Funktion _init ausgeführt.

Default Widgets#

Unter $.ui sind bereits Widgets mitgeliefert, z.B. $.ui.datepicker. Diese können auch erweitert werden, indem beim Erstellen eines Widgets ein anderes angegeben wird:

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