JavaScript ist schwer und umständlich – und hat nebenbei rein gar nichts mit Java zu tun. Das dachte sich auch der Entwickler John Resig. Aus diesem Grund entwickelte er 2006 das jQuery Framework, das er auf dem Bar Camp in New York vorstellte. Mittlerweile zählt es zum meistverwendeten Framework überhaupt. Jede zweite Website nutzt jQuery. Wieso ist das so?

Was bringt es?

Das Framework vereinfacht das Arbeiten mit JavaScript ungemein, indem es reine JS Funktionalitäten auf das Wesentliche herunterbricht und eine CSS-ähnliche Selektion ermöglicht. Es bietet zudem ein einfaches Event Handling, AJAX Funktionen und schicken Animationen. Besonders der spezielle Event Handler erzieht dabei noch mehr zu einer strikteren Trennung von HTML und Script – ähnlich wie die Trennung von HTML und CSS. Denn die Verwendung der lästigen onclick etc. Attribute wird dadurch überflüssig. Ein riesiger Eckpfeiler ist zusätzlich auch die grenzenlose Browserkompatibilität. Umständliche Workarounds, um auch den allseits beliebten Internet Explorer 6 noch mitspielen zu lassen, sind nicht länger nötig. Und ja, ihr habt richtig gehört: auch der gute, alte IE6 wird hier noch unterstützt. Zumindest in der ersten Version von jQuery. Denn aktuell bietet die jQuery Foundation zwei verschiedene Versionsstränge an: Version 1, mit der auch ältere Browser zum Zug kommen und jQuery 2.0, das komplett überarbeitet wurde und lediglich auf moderne Browser ausgelegt, dafür aber wesentlich performanter ist. Für welche Version man sich letztendlich entscheidet, hängt also vom jeweiligen Projekt und Zielgruppe ab. Webentwickler, die alles aus einem Framework herausholen wollen, werden sich über die zahlreichen jQuery Plugins freuen. Denn diese machen jQuery noch effektiver und individueller. Hier können bereits bestehende Plugins, wie Slider, Scroller oder Animationen verwendet oder aber eigene Plugins geschrieben werden. Eine riesige Community rundet hier das Gesamtpaket ab. Es gibt kaum ein jQuery Problem, das sich nicht mit ein bisschen googeln lösen lässt. Und wer selbst Hand anlegen will, kann sogar dabei helfen, jQuery weiterzuentwickeln, indem er am offiziellen GitHub Repository mitarbeitet.

Wie funktionier’s?

Wie bei jedem guten Framework beginnen wir also mit der Einbindung der eigentlichen Bibliothek:

<script src="https://ajax.googleapis.com/.../jquery.min.js"></script>

Auch hier gibt es zwei Möglichkeiten. Zum Einen bietet jQuery natürlich einen direkten Download an, der das eigene Hosting des Scripts ermöglicht. Zum Anderen lassen sich aber auch die von Google gehosteten Bibliotheken verwenden. Die Wahl ist hier jedem selbst überlassen, ich empfehle jedoch die Google Hosted Libraries. Und dies aus zweierlei Hinsicht: natürlich muss man sich so nicht selbst um das Hosting kümmern. Viel wichtiger ist jedoch der Punkt, dass der User die entsprechende Bibliothek bereits in seinem Cache haben könnte – möglicherweise von einer anderen jQuery-nutzenden, Google-hostenden Seite – und so ein zusätzlicher Request entfällt. So hat man trotz externer Ressource keine Einbussen auf Seiten der Performance. Ist das Framework aber erst einmal eingebunden – auf welchem Weg auch immer – kann man sich auch schon austoben. Eine einfache jQuery Funktion, sieht dabei wie folgt aus:

$("div.test").addClass("test2");

Hier wird bspw. dem <div> mit der Klasse .test eine weitere Klasse .test2 hinzugefügt. An dieser Stelle kommt uns der Selektor div.test ziemlich bekannt vor, da er uns an eine CSS-Selektion erinnert. Und genau auf diese Art und Weise, lassen sich alle Arten von Elementen, IDs und Klassen ansprechen. Vergleicht man die gleiche Funktionalität nun mit „echtem“ JavaScript, erkennt man, dass dieser Weg wesentlich umständlicher wäre:

var element = document.getElementById("test");
element.className += " test2";

Hier müsste man zunächst eine Variable element anlegen, die aus einem HTML Element mit der ID #test besteht – wir müssten in unserem HTML also zusätzlich eine ID vergeben.

Event-Handling

Erst im zweiten Schritt kann man die eigentliche Funktion – das Hinzufügen der zusätzlichen Klasse – realisieren. Man könnte das zwar auch alles in einem Schritt durchführen, aber ich denke die prinzipielle Aussage sollte klar sein. Vor allem beim Event Handler von jQuery wird dies deutlich. Verpacken wir also unsere bestehende Klassen-Funktionalität in ein Event, das erst beim Klick auf einen Link ausgeführt wird.

$("a.test").on("click", function(){
  $(this).addClass("test2");
});

Diesmal wählen wir als Selektor ein <a> mit der Klasse .test. Mit unserem Handler .on() und dem Event click führen wir nun einen Funktion aus, sobald ein User auf den entsprechenden Link klickt. Innerhalb dieser Funktion können wir nun alles auflisten, was durch das Klick-Event ausgeführt werden soll. Auch weitere Funktionen. Wir möchten hier wieder einem Element eine zusätzliche Klasse vergeben. Diesmal aber nicht div.test, sondern dem Link, der geklickt wurde und der das Event überhaupt erst ausführt. Dazu nutzen wir als Selektor this, um damit auf sich selbst zu verweisen. Vergleicht man dies nun wieder mit reinem JavaScript, so müsste man zunächst eine Funktion anlegen und diese dann durch ein onclick Attribut direkt am Element auslösen:

<a class="test" href="javascript:" onclick="function();">Test</a>

So lässt sich also mittels jQuery – wie zuvor schon angesprochen – eine bessere Trennung von HTML und Script realisieren.

Fazit

Letzendlich lässt sich sagen, dass jQuery eine sinnvolle Erweiterung für jede Website darstellt. Das Arbeiten gestaltet sich damit wesentlich einfacher und effektiver als mit reinem JavaScript. Und das, ohne wirklich JS Kenntnisse vorauszusetzen. Man erspart sich viel Arbeit, Frust und Workarounds. Mit der von Google gehosteten Bibliothek sogar (unter Umständen) ohne zusätzliche Performance-Kosten. Mit einer riesigen, stets wachsenden Community im Rücken und endlosen Plugins und Weiterentwicklungen, ist der Siegeszug von jQuery auf Jahre hin gesichert. Zeit, auf den Zug aufzuspringen!

Downloads

Datei	Beschreibung	Dateigröße
Halunken Tag jQuery	Halunken Tag jQuery Präsentation	112 kB