[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, {});
}}}