Maßgeblich für den Erfolg von jQuery ist die voll CSS-kompatible Art, Elemente im DOM gezielt auszuwählen, um etwas damit zu tun. Die W3C-DOM-kompatiblen Zugriffsmethoden document.getElementById(), document.getElementsByName(), document.getElementsByTagName() und das später noch hinzugefügten document.getElementsByClassName() werden mit dem Einsatz von jQuery überflüssig. Stattdessen können Sie die gleichen Selektoren nutzen, die Sie auch in CSS nutzen – und zwar einschließlich neuerer CSS3-Selektoren. Der Vorteil dabei ist nicht nur eine deutlich verkürzte Schreibweise. CSS und Scripting einer Website kommen sich dadurch wieder näher. In zentralen CSS-Stylesheets verwenden Sie Selektoren zur Gestaltung bestimmter Elemente. In jQuery können Sie die gleichen Selektoren verwenden, um zentral das Verhalten dieser Elemente und seine Benutzer-Interaktionen zu definieren.

In jQuery erfolgt der Zugriff auf die HTML-Struktur bzw. das dahinter gespeicherte Dokumentmodell DOM wie bereits beschrieben über die globale jQuery-Funktion $(). Wenn Sie dieser eine Zeichenkette übergeben, wird diese Zeichenkette von jQuery als CSS-kompatibler Selektor interpretiert. Die Zeichenkette kann wahlweise in einfachen oder doppelten Anführungszeichen stehen.

Beispiele für CSS-Selektoren in jQuery

Nachfolgende Tabelle zeigt exemplarische Möglichkeiten, wie Elemente in jQuery auswählbar sind. Um die Selektoren-Syntax von CSS besser zu verstehen, lesen Sie bitte Kapitel Selektoren im CSS-Teil.

Beispiel Erläuterung
$("h1") Wählt alle h1-Elemente im Dokument aus.
$("#submitButton") Wählt das eindeutige Element mit dem Attribut id="submitButton" aus.
$(".blau") Wählt alle Elemente mit dem Attribut class="blau" aus.
$("td.blau") Wählt alle td-Elemente mit dem Attribut class="blau" aus (andere Elemente mit class="blau" jedoch nicht).
$("*[lang=de]") Wählt alle Elemente mit lang="de" im Dokument aus.
$("p[lang]") Wählt alle p-Elemente aus, die ein lang-Attribut haben, egal welchen Wert dieses hat.
$("form#Nachricht input") Wählt alle input-Elemente im Formular mit <form id="Nachricht"> aus.
$("ul#TopNavi > li") Wählt alle Einträge einer Liste <ul id="TopNavi"> aus, jedoch nur solche der ersten Unterebene – li-Elemente untergeordneter (verschachtelter) Listen werden nicht ausgewählt.
$("ul#TopNavi li:first-child") Wählt den ersten Listeneintrag einer Liste <ul id="TopNavi"> aus.
$("ul#TopNavi li:nth-child(4)") Wählt den vierten Listeneintrag einer Liste <ul id="TopNavi"> aus (der Index beginnt wie in CSS bei 1, nicht wie bei JavaScript bei 0).
$("ul#TopNavi li:last-child") Wählt den letzten Listeneintrag einer Liste <ul id="TopNavi"> aus.
$(":button") Wählt alle Schaltfächen aus, egal ob mit <button> oder <input> definiert.
$(":checkbox")
$(":text")
$(":password")
$(":radio")
$(":submit")
$(":file")
$(":image")
$(":reset")
Wählt alle input-Elemente der entsprechenden Typen aus. So wählt $(":radio") beispielsweise alle Elemente <input type="radio"> aus.
$(":checked") Wählt ausgewählte oder angekreuzte Checkboxen, Radiobuttons oder Listenelemente aus.
$(":disabled")
$(":enabled")
Wählt nicht verfügbare bzw. verfügbare Formularfelder aus.
$(":selected") Wählt ausgewählte Elemente in select-Auswahllisten aus.