jQuery Selectors
- Vorige pagina jQuery Syntax
- Volgende pagina jQuery Evenementen
Selectors laten u toe om te werken met groepen van elementen of met individuele elementen.
jQuery Selectors
In de eerdere hoofdstukken hebben we enkele voorbeelden gegeven van hoe u HTML-elementen kunt kiezen.
De belangrijkste punten zijn het leren hoe jQuery selectors precies de elementen kiezen die u wilt behandelen met effecten.
jQuery elementselectoren en eigenschapsselectoren laten u toe HTML-elementen te selecteren op basis van tagnaam, attribuutnaam of inhoud.
Selectoren laten u toe om HTML-elementen of een enkel element te manipuleren.
In termen van HTML DOM:
Selectoren laten u toe om DOM-elementen of een enkele DOM-node te manipuleren.
jQuery elementselectoren
jQuery gebruikt CSS-selectoren om HTML-elementen te selecteren.
$("p") selecteert <p> elementen.
$("p.intro") selecteert alle <p> elementen met class="intro".
$("p#demo") selecteert alle <p> elementen met id="demo".
jQuery eigenschapsselectoren
jQuery gebruikt XPath-expressies om elementen met een bepaalde eigenschap te selecteren.
$("[href]") selecteert alle elementen met een href-eigenschap.
$("[href='#']") selecteert alle elementen met een href-waarde die gelijk is aan "#".
$("[href!='#']") selecteert alle elementen met een href-waarde die niet gelijk is aan "#".
$("[href$='.jpg']") selecteert alle elementen met een href-waarde die eindigt op ".jpg".
jQuery CSS selectoren
jQuery CSS selectoren kunnen gebruikt worden om de CSS-eigenschappen van HTML-elementen te wijzigen.
Het volgende voorbeeld verandert de achtergrondkleur van alle <p> elementen in rood:
Voorbeeld
$("p").css("background-color","red");
Meer voorbeelden van selectoren
| Syntax | Beschrijving |
|---|---|
| $(this) | huidig HTML element |
| $("p") | alle <p> elementen |
| $("p.intro") | alle <p> elementen met class="intro" |
| $(".intro") | alle elementen met class="intro" |
| $("#intro") | element met id="intro" |
| $("ul li:first") | de eerste <li> element binnen elke <ul> |
| $("[href$='.jpg']") | alle href-eigenschappen met een waarde die eindigt op ".jpg" |
| $("div#intro .head") | alle elementen met class="head" binnen het <div> element met id="intro" |
Voor een volledige handleiding, bezoek a.u.b. onze jQuery Selectie Handleiding.
- Vorige pagina jQuery Syntax
- Volgende pagina jQuery Evenementen
