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

Constructor#

Der Begriff Constructor ist bei einem Widget ein nicht genau zutreffender Begriff. Denn neben der Konstruktion des Widgets dient er zusätzlich zum Setzen und Lesen von Options, Aufruf von Methoden sowie zum Entfernen des Widgets.

Im Folgenden wird von einem Widget mit folgenden Code ausgegangen:

$.widget("ext.Test", {
	options: {
		value: "default"
	},
	_create: function() {
		this._super();
		console.log("constructor: " + JSON.stringify(this.options);
	},
	_setOptions: function(options) {
		this._super(options);
		console.log("changed: " + JSON.stringify(this.options));
	},
	test: function(value) {
		return "Hello " + value;
	}
});

Neues Widget#

Ein neues Widget erzeugt man, indem man den Widget-Namen auf einem JQuery-Objekt aufruft:

<div id="test">
<script type="text/javascript">
	$("#test").Test();
</script>

Ergebnis: Die Ausgabe für die Option value ist default.

Der Constructor kann auch Parameter annehmen:

$("#test").Test({value: "constructor-param"});

Ergebnis: Die Ausgabe für die Option value ist constructor-param.

Options ändern#

Der vermeintliche Constructor kann wiederholt aufgerufen werden. Im Gegensatz zu einer Java-Klasse oder einem New-Operator wird das Widget jedoch nicht neu erzeugt. Viel mehr werden diese Werte den Optionen hinzugefügt oder geändert:

$("#test").Test({value: "changed-param"});

Ergebnis: Die Ausgabe für die Option value ist changed-param.

Funktionen aufrufen#

Zum Einen kann eine Funktion des Widgets aufgerufen werden, indem man statt dem JSON-Object ein Funktionsname übergeben wird:

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

Ergebnis: Die Funktion test wird aufgerufen.

Argumente übergeben#

Beim Funktionsaufruf können Argumente übergeben werden, indem diese dem Funktionsnamen angehängt werden:

$("#test").Test("test", "Peter");

Ergebnis: Die Funktion test wird mit dem Argument Peter aufgerufen.

Hinweis: Es können beliebig viele weitere Argumente übergeben werden.

Wert abfragen#

Der Constructor kann ebenso benutzt werden, um Werte des Widgets abzufragen. Aus dem obigen Beispiel wird der Return-Rückgabewert der Funktion einfach weitergereicht, also "Hello unknown" zurückgegeben.

Auf diese Weise lässt sich eine Art Kombination aus Setter und Getter implementieren, wenn man das Argument auf undefined abfragt.