jQuery Selektoren verstehen und benutzen

Wie ihr in meinen bisheringen Blogeinträgen sehen könnt bin ich ein großes Fan von jQuery. Einfach gesagt: mit jQuery kann man soooo viel machen – etwas mehr im Detail: jQuery hat eine sehr gute Engine um Effekte und Funktionen zu erstellen die bisher nur mit Flash oder sehr sehr viel Aufwand per handgeschriebenem AJAX zu erreichen waren. Mit etwas Logik und dem Verständnis für die Selektoren und Funktionen ist es eigentlich sehr sehr einfach und für jeden der schon mal etwas mit (Web)Programmierung zu tun hatte schnell zu erlernen.

Heute möchte ich gerne auf die jQuery Selektoren eingehen – diese sind so ziemlich das wichtigste was es in jQuery zu beachten gibt. Ein falsch gesetzter Selektor kann die Performance einer jeden Website sehr stark abfallen lassen, was wieder der Usability schadet – doch dieser sollte eigentlich durch das Framework geholfen werden.

Aufbau

Kommen wir zum grundsätzlichen Aufbau von jQuery:

$("selektor").funktionsname({ function({ }); });

Der Selektor begrenzt sich auf

$("selektor")

Damit ist dem ganzen nun fast keine Grenze mehr gesetzt. Man kann HTML Elemente direkt ansprechen, auf Klassen zugreifen, ID’s auswählen und hat durch die weitere Spezialisierung durch „:last“, „:first“, „:parent“, „:child“ wie man es von CSS mit „a:hover“ o.ä. kennt noch gezielteren Zugriff um z.B. nur das letzte Element einer Liste zu löschen oder zu verändern.

Beispiele

Selektor für das Überschriftenelement H2:

$("H2")

Klasse „content“:

$(".content")

ID „wrapper“:

$("#wrapper")

Wie ihr also sehr eigentlich ziemlich einfach… ihr könnt direkt auf die DOM (Document Object Model) Elemente zugreifen ohne lange zu überlegen. Wenn wir jetzt etwas spezieller werden wollen z.B. nur die Listenpunkte einer bestimmten Klasse sieht es wie folgt aus:

$("ul .liste li")

Damit greift ihr nur auf die „li“ Elemtente der unordered list „ul“ mit der Klasse „liste“ zu – also wirklich sehr gezielt.

$("a [rel="extern"])

Alle Links die ein rel=“extern“ mit sich bringen werden selektiert.

$("ul:child")

Alle Kindelemente von „ul“, einer unordered list – in diesem Fall eigentlich immer ein „li“.

Ich kann jetzt nicht im Detail auf jeden Selektor eingehen, auf der jQuery Selectors Website findet ihr eine Übersicht welche Selektoren es alles gibt. Es sind eigentlich keine Grenzen gesetzt, es können Formularfelder selektiert werden die einen gewissen Inhalt haben, bestimmte bilder die einen gewisses „alt“ Attribute erfüllen usw. – am besten einfach mal ein wenig rumprobieren, mit ein wenig Training läuft das ganze dann meist wie von alleine.

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

3 Kommentare zu "jQuery Selektoren verstehen und benutzen"

Torsten 02. Mai 2011 um 16:59 Uhr

Die mächtige Funktionalität von JQuerys kann ich nur bestätigen. Selbst für reine Webdesigner, wäre der Umgang damit eine lohnende Herausforderung!

André 02. Mai 2011 um 17:59 Uhr

Ja das denke ich auch Torsten, selbst jeder Webdesigner kann mit ein wenig Ambitionen das ganze relativ leicht erlernen. Vor allem ist dadurch viel Interaktivität möglich und das kann gutes Design bekanntlich nochmals untermalen.

Philipp 01. Apr 2014 um 20:11 Uhr

Danke für den Artikel. War grad auf der Suche nach einem passende Selektor für mein Problem und bin hier fündig geworden.

Kommentar schreiben