jQuery-Selektoren
- Vorherige Seite jQuery-Syntax
- Nächste Seite jQuery-Ereignisse
Selektoren ermöglichen es Ihnen, auf Elementgruppen oder einzelne Elemente zu operieren.
jQuery-Selektoren
In den vorherigen Kapiteln haben wir einige Beispiele gezeigt, wie man HTML-Elemente auswählt.
Der Schlüsselpunkt ist das Verständnis, wie jQuery-Selektoren genau die Elemente auswählen, auf die Sie den gewünschten Effekt anwenden möchten.
jQuery-Elementselektoren und Attributselektoren erlauben es Ihnen, HTML-Elemente durch Tag-Namen, Attributnamen oder Inhalt auszuwählen.
Selektoren erlauben es Ihnen, HTML-Elementgruppen oder einzelne Elemente zu bearbeiten.
In der Sprache des HTML-DOM:
Selektoren erlauben es Ihnen, DOM-Elementgruppen oder einzelne DOM-Knoten zu bearbeiten.
jQuery-Elementselektoren
jQuery verwendet CSS-Selektoren, um HTML-Elemente auszuwählen.
$("p") wählt <p>-Elemente.
$("p.intro") wählt alle <p>-Elemente mit der Klasse "intro".
$("p#demo") wählt alle <p>-Elemente mit dem id="demo".
jQuery-Attributselektoren
jQuery verwendet XPath-Ausdrücke, um Elemente mit bestimmten Attributen auszuwählen.
$("[href]") wählt alle Elemente mit einem href-Attribut.
$("[href='#']") wählt alle Elemente mit href-Werten, die "#" sind.
$("[href!='#']") wählt alle Elemente mit href-Werten, die nicht "#" sind.
$("[href$='.jpg']") wählt alle Elemente mit href-Werten, die auf ".jpg" enden.
jQuery-CSS-Selektoren
jQuery-CSS-Selektoren können zur Änderung der CSS-Eigenschaften von HTML-Elementen verwendet werden.
Der folgende Beispiel ändert die Hintergrundfarbe aller <p>-Elemente in rot:
Beispiel
$("p").css("background-color","red");
Mehrere Beispiele für Selektoren
| Syntax | Beschreibung |
|---|---|
| $this | der aktuelle HTML-Element |
| $("p") | alle <p>-Elemente |
| $("p.intro") | alle <p>-Elemente mit der Klasse "intro" |
| $(".intro") | alle Elemente mit der Klasse "intro" |
| $("#intro") | alle Elemente mit dem id="intro" |
| $("ul li:first") | der erste <li>-Element jeder <ul> |
| $("[href$='.jpg']") | alle href-Attribute mit einem Attributwert, der auf ".jpg" endet |
| $("div#intro .head") | alle Elemente mit der Klasse "head" im <div>-Element mit dem id="intro" |
Für ein vollständiges Referenzhandbuch besuchen Sie bitte unsere jQuery-Selektionsreferenzhandbuch.
- Vorherige Seite jQuery-Syntax
- Nächste Seite jQuery-Ereignisse
