jQuery Sélecteurs
Les sélecteurs jQuery vous permettent d'opérer sur des groupes d'éléments HTML ou des éléments individuels.
Sélecteurs jQuery
Les sélecteurs jQuery vous permettent d'opérer sur des groupes d'éléments HTML ou des éléments individuels.
Les sélecteurs jQuery « trouvent » (ou sélectionnent) des éléments HTML en fonction de l'id, de la classe, du type, des attributs, des valeurs d'attributs, etc. Ils sont basés sur dessélecteurs CSSdéjà existants ; de plus, ils disposent également de quelques sélecteurs personnalisés.
Tous les sélecteurs dans jQuery commencent par le signe dollar : $().
Sélecteur d'élément
Le sélecteur d'élément jQuery sélectionne des éléments en fonction du nom de l'élément.
Sélectionnez tous les éléments <p> de la page :
Exemple
Après que l'utilisateur a cliqué sur le bouton, tous les éléments <p> sont masqués :
Exemple
Essayez-le vous-même »
Sélecteur #id
Le sélecteur #id de jQuery sélectionne un élément spécifié via l'attribut id d'un élément HTML.
L'id d'un élément sur une page doit être unique, donc pour sélectionner un élément unique sur la page, vous devez utiliser le sélecteur #id.
La syntaxe pour sélectionner des éléments par id est la suivante :
Exemple
Après que l'utilisateur clique sur le bouton, l'élément avec l'attribut id="test" sera masqué :
Exemple
Essayez-le vous-même »
Sélecteur .class
Le sélecteur de classe jQuery peut trouver des éléments par une classe spécifiée.
La syntaxe est la suivante :
Exemple
Après que l'utilisateur clique sur le bouton, tous les éléments avec l'attribut class="test" sont masqués :
Exemple
Essayez-le vous-même »
Plus d’exemples
| Syntaxe | Description | Exemple |
|---|---|---|
| $("*") | Sélectionne tous les éléments | Exemple en ligne |
| $(this) | Sélectionner l'élément HTML actuel | Exemple en ligne |
| $("p.intro") | Sélectionner les éléments <p> avec la classe intro | Exemple en ligne |
| $("p:first") | Sélectionner le premier élément <p> | Exemple en ligne |
| $("ul li:first") | Sélectionner le premier élément <li> du premier élément <ul> | Exemple en ligne |
| $("ul li:first-child") | Sélectionner le premier élément <li> de chaque élément <ul> | Exemple en ligne |
| $("[href]") | Sélectionner les éléments avec un attribut href | Exemple en ligne |
| $("a[target='_blank']") | Sélectionner tous les éléments <a> avec la valeur de l'attribut target égale à "_blank" | Exemple en ligne |
| $("a[target!='_blank']") | Sélectionner tous les éléments <a> avec la valeur de l'attribut target différente de "_blank" | Exemple en ligne |
| $(":button") | Sélectionner tous les éléments <input> et les éléments <button> avec type="button" | Exemple en ligne |
| $("tr:even") | Sélectionner les éléments <tr> aux positions paires | Exemple en ligne |
| $("tr:odd") | Sélectionner les éléments <tr> aux positions impaires | Exemple en ligne |
Utilisation des fonctions jQuery dans un fichier séparé
Si votre site web contient de nombreuses pages et que vous souhaitez que vos fonctions jQuery soient faciles à maintenir, placez vos fonctions jQuery dans un fichier .js séparé.
Lorsque nous démontrons jQuery dans le tutoriel, nous ajoutons des fonctions directement dans la section <head>. Cependant, il est préférable de les placer dans un fichier séparé, comme ceci (référencez le fichier via l'attribut src) :