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.

Extension#

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".