Bei unserem ersten Web Dojo am 01.07. drehte sich alles um die Grundlagen von jQuery: was ist jQuery, warum braucht man es, was sind Selektoren und wie können Events an Elemente gebunden werden. Einen Teil des Wissens davon möchte ich hier weitergeben.
jQuery – DOM-Manipulation leicht gemacht
jQuery ist eine sehr populäre JavaScript-Bibliothek, die vor allem zur Low-Level-Bearbeitung des DOM-Baums einer HTML-Seite eingesetzt werden kann. Sie zeichnet sich durch eine eingängige Syntax sowie eine sehr einfache Selektion und Manipulation von DOM-Elementen aus. Die Bibliothek ist Cross-Browser-kompatibel und auf allen "modernen" Browsern bis hinunter zum IE6 konsistent einsetzbar, ohne dass sich der Entwickler um den Zielbrowser größere Gedanken machen muss. Daneben gibt es eine Vielzahl von Plugins, welche jQuery sehr funktionell machen und die Entwicklung dynamischer Webseiten stark vereinfachen. jQuery ist Open Source und wird von der Community weiterentwickelt. Zudem stellt Microsoft Support für jQuery bereit, indem sie u.a. Intellisense für jQuery-Code in Visual Studio liefern und aktiv an der Weiterentwicklung beteiligt sind. Das Potential von jQuery ist enorm und jeder Entwickler, der heute JavaScript lernt bzw. moderne Web-Entwicklung betreibt, wird nur schwerlich daran vorbeikommen.
jQuery-Wrapper
jQuery stellt eine sehr intuitive API zur Verfügung, mit der DOM-Elemente selektiert werden können. Grundlage dafür bildet zunächst die $(…)-Syntax. Mit $(elem) (bzw. gleichbedeutend jQuery(elem)) wird ein jQuery-Wrapper um das jeweilige DOM-Element gelegt, mit $(document) z.B. um das vollständige DOM der Seite. Damit wird die jQuery-Funktionalität (Event-Bindings, Manipulierungs-Funktionalität, etc.) auf dem eingeschlossenen DOM-Element zur Verfügung gestellt.
Zur Einbindung von jQuery-Funktionalität kann man sich mit $(document).ready(function(){…}) bzw. abgekürzt: $(function(){…}) in die Seite einhängen. Die jeweilige Funktion darin wird ausgeführt, wenn das DOM der HTML-Seite vollständig geladen wurde, noch bevor Ressourcen wie z.B. Bilder heruntergeladen werden.
Selektion ist Trumpf
Eine hohe Flexibilität und Einfachheit des Zugriffs auf DOM-Elemente stellen dann die sogenannten Selektoren dar. Innerhalb von $(…) kann man ähnlich zu CSS Statements angeben, um aus dem DOM einer Seite ein oder mehrere Elemente zu selektieren und dann Aktionen auf diesen auszuführen. Ein paar der wichtigsten Selektoren sind nachfolgend aufgeführt:
- $(‘div’): Tag-Selektor; selektiert alle div-Tags des Dokuments
- $(‘.highlighted’): Class-Selektor; selektiert alle DOM-Elemente, welchen die CSS-Klasse "highlighted" zugeordnet ist
- $(‘#myelem’): ID-Selektor; selektiert alle DOM-Elemente, welche die ID "myelem" besitzen
- $(‘a[href="xyz.html"]’): Attribut-Selektor; selektiert alle Anchor-Tags, welche als href den Wert "xyz.html" gesetzt haben
- $(‘a[href*="xyz.html"]’): Attribut-Selektor; selektiert alle Anchor-Tags, welche als href den Wert "xyz" enthalten
- $(‘div a’): selektiert alle Anchor-Tags, welche auf beliebiger Ebene innerhalb eines div’s liegen
- $(‘div > a’): selektiert alle Anchor-Tags, welche direkte Kind-Elemente in einem div sind
- $(‘tr:even’), $(‘tr:odd’): selektiert alle Table-Rows (tr), deren Index in der Resultatmenge gerade (even) bzw. ungerade (odd) ist
- $(‘tr:eq(1)’): selektiert das Element mit dem Index 1 aus der Resultat-Menge aller Table-Rows (beginnt bei 0)
- $(‘span:contains("xyz")’): selektiert alle span-Elemente, welche den Text "xyz" beinhalten
- Noch viel mehr Selektoren: jQuery-Dokumentation
Events, sie zu binden
Entgegen manuellem JavaScript werden Event-Bindings nicht direkt im HTML-Code verankert, sondern finden in jQuery ebenfalls über Selektoren statt.
Ein direktes Binding kann dabei über $(elem).event(function(){…}) erfolgen, z.B. fängt $(‘input’).keyup(function(){…}) alle Tastaturanschläge auf allen input-Elementen ab und führt bei Eintritt des Ereignisses die entsprechende Funktion aus.
Alternativ lassen sich Event-Bindings auch über $(elem).bind(‘event’, function(){…}) erstellen, z.B. mit $(‘input’).bind(‘keyup’, function(){…}), äquivalent ist hier auch ein Entfernen von Event-Handlern mittels $(elem).unbind(‘event’) möglich.
Innerhalb eines Event Handlers hat man dabei mit $(this) Zugriff auf das DOM-Element, welches das Event ausgelöst hat.
Direkt ausprobieren!
Einige weitere grundlegende jQuery-Funktionen sind in der Online-Demo des Web Dojos auf jsFiddle enthalten, welches direkt angesehen, ausprobiert und abgeändert werden kann. In dieser Demo wird die Hintergrundfarbe beim Hovern über ein input-Element über eine CSS-Klasse geregelt, zudem wird ein Header-Text aktualisiert, sobald der Benutzer einen Namen eingibt.
Viel Spaß beim Rumprobieren und den ersten jQuery-Schritten: Online-Demo auf jsFiddle
Insgesamt kann man sagen: gerade wenn man den Krampf mit "manuellem" JavaScript kennt, wird man jQuery lieben! "Write less, do more!" – dieses Credo von jQuery wird voll erfüllt, weshalb diese Bibliothek im Repertoire keines modernen Web-Entwicklers fehlen sollte.