JavaScript-Bibliothek jQuery

Bei jQuery handelt es sich um eine JavaScript-Bibliothek, auf den ersten Blick ähnlich wie script.aculo.us oder Prototype. Sinn einer solchen Script-Sammlung ist es, häufig benutzte Funktionen wiederverwendbar anzubieten und aufwändigere Effekte und Funktionen möglichst einfach nutzbar zu machen.

Jede dieser Bibliotheken hat ihre eigene Ausrichtung, man kann sie nicht hundertprozentig vergleichen. jQuery punktet mit Schnelligkeit und Einfachheit. Darüber hinaus ist es, wie der Name schon sagt, auf die Abfrage von Seitenelementen ausgerichtet sowie die Manipulation der so gefundenen Elemente. Man kann damit mit wenigen Zeilen Code z.B. Elemente ein- und ausblenden, Hover-Effekte realisieren oder Elemente dynamisch einfügen. Und dazu braucht man meist tatsächlich nur drei, vier Zeilen JavaScript-Code pro Effekt. Gerade diese Einfachheit ist es, weswegen ich mich für jQuery begeistere. Nicht umsonst lautet das Motto von jQuery: „Write less, do more.“ 🙂

Auch AJAX-Funktionen lassen sich mit jQuery realisieren, aber letzten Endes ist die Basis allen jQuery-Codes ein Abfrage-Objekt. Es lassen sich damit eher keine größeren, klassenbasierten Anwendungen realisieren. Abgesehen von den Abfrage- und DOM-Manipulationsmöglichkeiten sind die Funktionen von jQuery beschränkt, so dass man sicher auch vieles findet, was man mit jQuery nicht oder nicht optimal machen kann und wofür z.B. Prototype besser geeignet ist. Aber zumindest ich schreibe im Normalfall kein komplettes dynamisches Web-Interface, sondern möchte einfach nur mal schnell einen kleinen Effekt an einer Seite ergänzen. Und dafür ist jQuery einfach genial.

Die Benutzung von jQuery zu lernen, ist nicht übermäßig schwer. Ein halber Tag Einarbeitungszeit sollte es maximal sein. Die Dokumentation auf der offiziellen Website des Projekts ist relativ ausführlich. Wichtig dabei ist, dass man sich die Einführung zuerst einmal durchliest, um die Grundlagen zu verstehen. Aus Erfahrung kann ich sagen, dass man sich damit viele Schwierigkeiten erspart. Ihr solltet zumindest das Prinzip der $-Funktion und der Callback-Funktionen verstanden haben. Meine Anlaufschwierigkeiten resultierten hauptsächlich daraus, dass ich diesen Schritt überspringen wollte. *g* Die $-Funktion tut nämlich nicht das gleiche wie in Prototype (dort liefert sie das Seitenelement mit der entsprechenden ID, bei jQuery dagegen liefert sie ein Query-Objekt zurück)!

Ansonsten wichtig: Realisiert mit jQuery möglichst keine Effekte, welche die Seite für Leute ohne JavaScript unbrauchbar machen (es sei denn, ihr setzt aktiviertes JS für die Seite voraus). Generell sollte man immer an eine abgespeckte Variante mit reinem HTML denken oder mit jQuery nur Effekte realisieren, die zwar nett aber nicht zwingend notwendig sind.

Falls ihr noch andere JS-Bibliotheken auf der gleichen Seite einsetzt, müsst ihr euch darum kümmern, dass sich die Bibliotheken vertragen. In den letzten Versionen für jQuery wurde dahingehend aber viel Funktionalität ergänzt, so dass Inkompatibilitäten mit den anderen großen Bibliotheken kein Problem mehr sein sollte. Man muss nur ggf. die $-Funktion umbenennen (siehe die Doku).

Zum Abschluss: Was habe ich mit jQuery umgesetzt? Nun, zum Beispiel die kleinen Icons an den Blöcken in der Seitenleiste, welche den entsprechenden Block einklappen. Die Icons werden dynamisch eingefügt, so dass sie ohne Javascript gar nicht erst zu sehen sind (da die Funktion ja nur mit JS funktioniert, braucht man die Bilder ohne gar nicht erst zu sehen). Die Icons, mit denen man mir einen Link zur Überprüfung melden kann (hinter externen Links unter Posts sowie auf der Linkseite), sind auf die gleiche Weise dynamisch eingefügt. Außerdem habe ich eine kleine Funktion gebastelt, die mir auf der Kontaktseite die Anti-Spam-Platzhalter aus der Mail-Adresse wieder herausnimmt. Alle diese Effekte befinden sich in einer JS-Datei mit gerade einmal 130 Zeilen.

Update Jan 2012: Dieser Beitrag wurde vor mehreren Jahren auf meiner vorherigen Webseite geschrieben. Im Moment ist hier noch nicht viel mit jQuery realisiert, das wird aber sicher noch. Derweil hat sich jQuery rasant weiterentwickelt und verbreitet. Auch im WordPress-Core ist es nun standardmäßig in Benutzung. Es gibt auch sicher nicht mehr viel, was man mit jQuery und Unterprojekten wie jQuery UI nicht elegant umsetzen kann.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte beachte die Kommentarregeln: 1) Kein Spam, und bitte höflich bleiben. 2) Ins Namensfeld gehört ein Name. Gerne ein Pseudonym, aber bitte keine Keywords. 3) Keine kommerziellen Links, außer es hat Bezug zum Beitrag. mehr Details...

So, noch mal kurz drüber schauen und dann nichts wie ab damit. Vielen Dank fürs Kommentieren! :-)