Übersicht: Selektion von DOM-Elementen
Basis CSS Selektoren
jQuery unterstützt beinahe alle gängigen CSS Selektoren um sowohl einzelne, als auch mehrere
Elemente gleichzeitig aus der DOM-Struktur auszuwählen.
Somit kann z.B. per Tag-Name, ID, Klasse, als auch aus Kombinationen und Verschachtelungen dieser Selektoren,
eine Auswahl getroffen werden.
Der Aufruf sieht wie folgt aus:
$("Selektor") bzw. jQuery("Selektor").
Beim Rückgabewert dieser Funktion handelt es sich um ein jQuery Objekt, auf dem nun weitere Operationen
ausgeführt werden können - dazu aber später mehr.
Folgende Beispiele sollen die Nutzung der CSS Selektoren verdeutlichen:
- Selektion nach Tag-Namen:
$("h1,h2")Selektiert alle <h1> und <h2> Überschriften.
- Selektion nach Klasse:
$("div.codeblock")Selektiert alle <div> Elemente, die die Klasse codeblock besitzen.
Hierarchien und Attribute
Um noch flexibler Elemente selektieren zu können, gibt es über die Basisselektoren hinaus weitere
Möglichkeiten die Elementauswahl einzugrenzen.
Eine Möglichkeit ist die Nutzung von Hierarchie-Selektoren, d.h. es werden Elemente basierend auf ihrer Beziehung
zueinander ausgewählt.
Folgende Beziehungen können genutzt werden:
- ancestor descendant
- parent > child
- prev + next
- prev ~ siblings
Beispiele hierfür:
- $("div#footer a.extern")Es werden alle <a> Link-Elemente selektiert, die die Klasse extern besitzen und sich innerhalb eines <div> Elementes mit der ID footer befinden (d.h. "Nachfahren" des <div> Elementes sind).
- $("div#footer > a.extern")Selektion wie zuvor, jedoch werden nur solche Link-Elemente selektiert, die direkter Nachfahre, d.h. ein Kind des <div>-Elementes sind. Somit werden beispielsweise Links, welche zusätzlich noch von einem <p>-Element umgeben sind, ausgeschlossen.
- $("label + input")Selektiert werden alle <input>-Elemente, die unmittelbar auf ein <label>-Element folgen (d.h. der jeweils nachfolgende Bruder).
- $("label ~ input")Wie zuvor, jedoch werden alle <input>-Elemente berücksichtigt, die dem <label>-Element folgen, nicht nur das unmittelbar nächste (d.h. alle nachfolgenden Geschwister).
Eine weitere Möglichkeit ist die Anwendung von Attribut-Selektoren. Durch sie kann eine mit Standard CSS Selektoren getroffene Auswahl weiter eingegrenzt werden. Es ist möglich, sowohl nur nach dem Vorhandensein eines Attributes zu filtern $("Selektor[Attribut]"), als auch nach konkreten Werten bzw. Mustern zu suchen. z.B. $("Selektor[Attribut=Wert]"), $("Selektor[Attribut!=Wert]"), $("Selektor[Attribut^=Wert]"), $("Selektor[Attribut$=Wert]") und $("Selektor[Attribut*=Wert]"). Die Syntax dieser Ausdrücke ist angelehnt an die der regulären Ausdrücke. Auch hier einige Beispiele:
- $("img[alt]")Es werden nur <img>-Elemente selektiert, die ein alt Attribut aufweisen.
- $("input[type=checkbox]")Es werden alle Eingabeelemente vom Typ checkbox selektiert.
- $("a[href^=http://]")Selektiert alle <a>-Elemente, die auf eine externe Webseite verweisen.
- $("a[href$=.pdf]")Selektiert alle <a>-Elemente, die auf eine pdf-Datei verweisen.
- $("a[href*=fh-wedel.de]")Selektiert alle <a>-Elemente, die auf die FH-Wedel Webseite verweisen.
Filter
Neben den bereits vorgestellten Möglichkeiten Elemente zu selektieren, bietet jQuery durch die Verwendung von
Filtern eine weitere flexible und dennoch einfache Möglichkeit, Elemente aus dem DOM Baum auszuwählen. Da es eine Vielzahl
an Filtern gibt, die den Rahmen dieses Kapitels sprengen würde, sollen hier exemplarisch nur einige von ihnen
vorgestellt werden.
Ähnlich wie bei den Attribut-Selektoren, welche auch eine Form von Filter darstellen, wird durch die Verwendung
von Filtern eine Menge von Elementen eingegrenzt.
Anknüpfend an die Hierarchie-Selektoren kann auch mit Hilfe einiger Filter die Auswahl von Elementen, basierend
auf ihrer Beziehung und Lage zueinander, erfolgen. Somit hat beispielsweise die Anwendung von
:first bzw. :last auf eine Reihe von Elementen zur Folge, dass
jeweils nur das erste bzw. letzte Element selektiert wird.
Die Anwendung von :nth-child(n) hingegen liefert das jeweils n-te Kind.
Beispiele:
- $("h1:first")Liefert die erste <h1> Überschrift in dem Dokument.
- $("li:nth-child(2)")Liefert das jeweils zweite <li>-Element einer jeden Liste.
Während die Filter :even und :odd die jeweils "geraden" und "ungeraden" Elemente der Reihe von Elementen liefern, auf die sie angewendet wurden, können die Schlüsselwörter even und odd auch als Eingabeparameter für den :nth-child(n)-Filter genutzt werden.
- $("tr:nth-child(even)")Somit wird jede "gerade" Zeile einer jeden Tabelle im Dokument selektiert.
Mit Hilfe von Content Filtern kann auf den Inhalt bestimmter Elemente geprüft und danach gefiltert werden. So filtert beispielsweise :empty alle leeren Elemente heraus. Hingegen werden bei der Nutzung von :contains("Text") nur diejenigen Elemente herausgefiltert, die entsprechenden "Text" beinhalten (Case Sensitive!). Der :has("Selektor")-Filter ermöglicht es nur Elemente zu selektieren, die bestimmte andere Elemente beinhalten.
Eine weitere Art von Filtern wird im Rahmen von "Forms" eingesetzt. Einige von ihnen sind letztendlich nur eine
Abkürzung für Filter, die auch mit Attribut-Selektoren realisiert werden können. Annähernd alle Formelemente
werden durch sie abgedeckt und ermöglichen damit einen einfachen Zugriff.
Beispiele:
- $(":input")Es werden nur Form-Elemente selektiert (input, textarea, select und button).
- $(":checkbox:checked")Alle angekreuzten Checkboxes werden selektiert.
Abschliessend sollen noch die Möglichkeiten genannt werden, die Elemente nach ihrer Sichtbarkeit zu filtern (dafür gibt es die Filter :hidden und :visible) und bestimmte Elemente mit dem :not("Selektor")-Filter explizit auszuschliessen.
Für eine vollständige Übersicht aller Selektoren und Filter wird auf die jQuery Dokumentation verwiesen.