Sélecteurs jQuery
- Page précédente Syntaxe jQuery
- Page suivante Événements jQuery
Les sélecteurs vous permettent d'effectuer des opérations sur un groupe d'éléments ou sur un élément unique.
Sélecteurs jQuery
Dans les chapitres précédents, nous avons montré quelques exemples sur la manière de sélectionner des éléments HTML.
Le point clé est d'apprendre comment les sélecteurs jQuery permettent de sélectionner précisément les éléments auxquels vous souhaitez appliquer des effets.
Les sélecteurs d'élément jQuery et les sélecteurs d'attribut permettent de sélectionner des éléments HTML par nom de balise, nom d'attribut ou contenu.
Les sélecteurs permettent de manipuler des groupes ou des éléments individuels d'éléments HTML.
En termes de HTML DOM :
Les sélecteurs permettent de manipuler des groupes ou des nœuds DOM individuels.
Sélecteurs d'élément jQuery
jQuery utilise des sélecteurs CSS pour sélectionner des éléments HTML.
$("p") sélectionne les éléments <p>.
$("p.intro") sélectionne tous les éléments <p> whose class is "intro".
$("p#demo") sélectionne tous les éléments <p> whose id is "demo".
Sélecteurs d'attribut jQuery
jQuery utilise des expressions XPath pour sélectionner des éléments avec des attributs donnés.
$("[href]") sélectionne tous les éléments with href attributes.
$("[href='#']") sélectionne tous les éléments whose href values are equal to "#".
$("[href!='#']") sélectionne tous les éléments whose href values are not equal to "#".
$("[href$='.jpg']") sélectionne tous les éléments whose href values end with ".jpg".
Sélecteurs CSS jQuery
Les sélecteurs CSS jQuery peuvent être utilisés pour modifier les attributs CSS des éléments HTML.
L'exemple suivant change la couleur de fond de tous les éléments <p> en rouge :
Exemple
$("p").css("background-color","red");
Plus d'exemples de sélecteurs
| Syntaxe | Description |
|---|---|
| $(this) | l'élément HTML actuel |
| $("p") | tous les éléments <p> |
| $("p.intro") | tous les éléments <p> class="intro" |
| $(".intro") | tous les éléments class="intro" |
| $("#intro") | l'élément avec id="intro" |
| $("ul li:first") | le premier élément <li> de chaque <ul> |
| $("[href$='.jpg']") | tous les attributs href se terminant par ".jpg" |
| $("div#intro .head") | tous les éléments class="head" de l'élément <div> avec id="intro" |
Pour un manuel de référence complet, veuillez visiter notre Manuel de sélecteurs jQuery.
- Page précédente Syntaxe jQuery
- Page suivante Événements jQuery
