Tutorial: jQuery Selektoren verstehen und anwenden

Bedingt durch meine tägliche Arbeit mit dem jQuery Framework, lerne ich dessen einfache Bedienbarkeit immer mehr zu schätzen und deshalb möchte ich auch euch das Thema „jQuery im Projekteinsatz“ mit Hilfe von einigen Tutorials ein wenig näher bringen.

Heute werden wir uns deshalb zunächst mit den Selektoren in jQuery beschäftigen, denn diese bilden die wichtigste Grundlage für das Verständnis des gesamten Frameworks.

In JavaScript greift man auf ein bestimmtes Element in der Regel mit Hilfe von getElementbyID() zu und damit hört es dann auch schon fast auf. Möchte man nun z.B. alle Elemente der Klasse .active in der Liste ul.navigation modifizieren, so muss man dazu bereits eine Vielzahl von Schleifen und / oder Funktionen durchlaufen.

Ganz anders sieht es jedoch aus, wenn Ihr diese Arbeit von jQuery erledigen laßt, denn dann könnte man das gleiche Ergebnis mit folgendem Code erreichen:

$('ul.navigation .active')

Man kann hier also schon erahnen, dass es mit Hilfe von jQuery möglich ist, mit bestimmten Elementen ganz bestimmte Funktionen bei einem bestimmten Event auszulösen. Hört sich kompliziert an? Ist es aber nicht, wenn wir uns mal das folgende Beispiel ansehen:

Die Darstellung zeigt uns sehr gut, in welcher Abhängigkeit man die Selektoren in jQuery sowohl zur Ermittlung von definierten Gruppen, als auch zur Zuweisung von Funktionen und Events nutzen kann. Es ist daher relativ einfach, eine eigene jQuery Funktion zu schreiben, wenn man das Grundprinzip der Selektoren einmal verstanden hat.

Was die Auswahl der Elemente und deren Eingrenzung auf bestimmte Klassen oder Attribute betrifft, so sind euch bei dem Einsatz des Frameworks fast keine Grenzen gesetzt. Hier sind daher nochmals einige Beispiele, die euch die Anwendungsweise verdeutlichen sollen:

  • $('#Header') = Selektiere das Element mit id="Header"
  • $('h1') = Selektiere alle H1 Überschriften
  • $('div#content ul') = Selektiere alle ungeordneten Listen, die sich innerhalb des Div’s mit der id="content" befinden
  • $('ul li:first') = Selektiere jeweils das erste <li> Element in einer ungeordneten Listen

Schreibe einen Kommentar

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