Les sélecteurs jQuery sont utilisés pour sélectionner et manipuler des éléments HTML. Ils sont une partie très importante de la bibliothèque jQuery.
Avec les sélecteurs jQuery, vous pouvez rechercher ou sélectionner des éléments HTML en fonction de leur ID, classes, attributs, types et bien plus encore à partir d’un DOM.
En termes simples, vous pouvez dire que les sélecteurs sont utilisés pour sélectionner un ou plusieurs éléments HTML à l’aide de jQuery. Une fois que l’élément est sélectionné, vous pouvez effectuer diverses opérations sur celui-ci.
Tous les sélecteurs jQuery commencent par un signe ou une parenthèse, par exemple. $(). C’est la fonction d’usine.
La fonction $()
Chaque sélecteur jQuery commence par le signe $(). Ce signe est appelé la fonction usine. Il utilise les trois blocs de construction de base lors de la sélection d’un élément dans un document donné.
| S.No. | Sélecteur | La description |
|---|---|---|
| 1) | Nom du tag: | Il représente un nom de balise disponible dans le DOM. Par exemple: $ (‘p’) sélectionne tous les paragraphes ‘p’dans le document. |
| 2) | Identifiant du tag: | Il représente une balise disponible avec un identifiant spécifique dans le DOM. Par exemple: $ (‘# real-id’) sélectionne un élément spécifique dans le document ayant un ID de real-id. |
| 3) | Classe de tag: | Il représente une balise disponible avec une classe spécifique dans le DOM. Par exemple: $ (‘real-class’) sélectionne tous les éléments du document ayant une classe de classe réelle. |
Prenons un exemple simple pour voir l’utilisation du sélecteur de balises. Cela sélectionnerait tous les éléments avec un nom de tag
et la couleur d’arrière-plan est réglée sur « rose ».
<!DOCTYPE html>
<html>
<head>
<title>Premier exemple jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").css("background-color", "pink");
});
</script>
</head>
<body>
<p>Ceci est le premier paragraphe.</p>
<p>Ceci est le deuxieme paragraphe.</p>
<p>Ceci est le troisieme paragraphe.</p>
</body>
</html>
Résultat :
Remarque: Tous les sélecteurs décrits ci-dessus peuvent être utilisés seuls ou avec la combinaison d’autres sélecteurs.
Comment utiliser les sélecteurs
Les sélecteurs jQuery peuvent être utilisés seuls ou avec la combinaison d’autres sélecteurs. Ils sont nécessaires à chaque étape de l’utilisation de jQuery. Ils sont utilisés pour sélectionner l’élément exact que vous voulez dans votre document HTML.
| S.No. | Sélecteur | La description |
|---|---|---|
| 1) | Name: | Il sélectionne tous les éléments correspondant au nom d’élément donné. |
| 2) | #ID: | Il sélectionne un seul élément qui correspond à l’identifiant donné. |
| 3) | .Class: | Il sélectionne tous les éléments qui correspondent à la classe donnée. |
| 4) | Universel(*) | Il sélectionne tous les éléments disponibles dans un DOM. |
| 5) | Plusieurs éléments A, B, C | Il sélectionne les résultats combinés de tous les sélecteurs spécifiés A, B et C. |
Différents sélecteurs jQuery
| Sélecteur | Exemple | La description |
|---|---|---|
| * | $("*") |
Il est utilisé pour sélectionner tous les éléments. |
| #id | $("# prenom") |
Il sélectionnera l’élément avec id = « prenom » |
| .classe | $(". primaire") |
Il sélectionnera tous les éléments avec class = « primaire » |
| class, .class | $(".primaire, .secondaire") |
Il sélectionnera tous les éléments avec la classe « primaire » ou « secondaire » |
| element | $("p") |
Il sélectionnera tous les éléments p. |
| el1, el2, el3 | $("h1, div, p") |
Il sélectionnera tous les éléments h1, div et p. |
| :first | $("p:first") |
Ceci sélectionnera le premier élément p |
| :last | $("p:last") |
Ceci sélectionnera le dernier élément p |
| :even | $("tr:even") |
Cela sélectionnera tous les éléments de tr pair |
| :odd | $("tr:odd") |
Cela sélectionnera tous les éléments tr impairs |
| :first-child | $("p:first-child") |
Il sélectionnera tous les éléments p qui sont le premier enfant de leur parent |
| :first-of-type | $("p:first-of-type") |
Il sélectionnera tous les éléments p qui sont le premier élément p de leur parent |
| :last-child | $("p:last-child") |
Il sélectionnera tous les éléments p qui sont le dernier enfant de leur parent |
| :last-of-type | $("p:last-of-type") |
Il sélectionnera tous les éléments p qui sont le dernier élément p de leur parent |
| :nth-child(n) | $("p:nth-child(2)") |
Ceci sélectionnera tous les éléments p qui sont le 2ème enfant de leur parent |
| :nth-last-child(n) | $("p:nth-last-child(2)") |
Ceci sélectionnera tous les éléments p qui sont le 2ème enfant de leur parent, à partir du dernier enfant. |
| :nth-of-type(n) | $("p:nth-of-type(2)") |
Il sélectionnera tous les éléments p qui sont le deuxième élément p de leur parent |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") |
Ceci sélectionnera tous les éléments p qui sont le deuxième élément p de leur parent, à partir du dernier enfant. |
| :only-child | $("p:only-child") |
Il sélectionnera tous les éléments p qui sont le seul enfant de leur parent |
| :only-of-type | $("p:only-of-type") |
Il sélectionnera tous les éléments p qui sont le seul enfant, de son type, de leur parent |
| parent > enfant | $("div> p") |
Il sélectionnera tous les éléments p qui sont un enfant direct d’un élément div |
| descendant parent | $("div p") |
Il sélectionnera tous les éléments p qui sont les descendants d’un élément div |
| élément + suivant | $("div + p") |
Il sélectionne l’élément p qui est à côté de chaque élément div |
| élément ~ frères et soeurs | $("div ~ p") |
Il sélectionne tous les éléments p qui sont frères d’un élément div |
| :eq (index) | $("ul li: eq(3)") |
Il sélectionnera le quatrième élément d’une liste (l’index commence à 0) |
| :gt (no) | $("ul li: gt (3)") |
Sélectionner les éléments de la liste avec un index supérieur à 3 |
| :lt (no) | $("ul li: lt(3)") |
Sélectionner les éléments de la liste avec un index inférieur à 3 |
| :not (sélecteur) | $("input: not(:empty)") |
Sélectionner tous les éléments d’entrée qui ne sont pas vides |
| :header | $(":header") |
Sélectionnez tous les éléments d’en-tête h1, h2 … |
| :animated | $(":animated") |
Sélectionner tous les éléments animés |
| :focus | $(":focus") |
Sélectionnez l’élément qui a actuellement le focus |
| :contains(text) | $(":contains(Bonjour)") |
Sélectionnez tous les éléments contenant le texte « Bonjour » |
| :a(sélecteur) | $("div:has (p)") |
Sélectionner tous les éléments div ayant un élément ap |
| :empty | $(":empty") |
Sélectionner tous les éléments vides |
| :parent | $(":parent") |
Sélectionner tous les éléments qui sont le parent d’un autre élément |
| :hidden | $("p:hidden") |
Sélectionner tous les éléments p cachés |
| :visible | $("table:visible") |
Sélectionner toutes les tables visibles |
| :root | $(":root") |
Il sélectionnera l’élément racine du document |
| :lang(langue) | $("p:lang(de)") |
Sélectionnez tous les éléments p avec une valeur d’attribut lang commençant par « de » |
| [attribut] | $("[href]") |
Sélectionner tous les éléments avec un attribut href |
| [attribut=valeur] | $([href='default.htm']") |
Sélectionnez tous les éléments avec une valeur d’attribut href égale à « default.htm » |
| [attribut!=valeur] | $([href!='default.htm']") |
Il sélectionnera tous les éléments avec une valeur d’attribut href différente de « default.htm » |
| [attribut$=valeur] | $("[href$='.jpg']") |
Il sélectionnera tous les éléments avec une valeur d’attribut href se terminant par « .jpg » |
| [attribut | =valeur] | $("[title | = 'Demain']") |
Sélectionnez tous les éléments avec une valeur d’attribut title égale à ‘Demain’, ou en commençant par ‘Demain’ suivi d’un trait d’union |
| [attribut ^ = valeur] | $("[title ^ = 'Tom']") |
Sélectionnez tous les éléments avec une valeur d’attribut title commençant par « Tom » |
| [attribut ~ = valeur] | $("[title~= 'bonjour']") |
Sélectionnez tous les éléments avec une valeur d’attribut title contenant le mot spécifique « bonjour » |
| [attribut * = valeur] | $("[title * = 'bonjour']") |
Sélectionnez tous les éléments avec une valeur d’attribut title contenant le mot « bonjour » |
| :contribution | $(":input") |
Il sélectionnera tous les éléments d’entrée |
| :text | $(":text") |
Il sélectionnera tous les éléments en entrée avec type = « text » |
| :password | $(":password") |
Il sélectionnera tous les éléments d’entrée avec type = « password » |
| :radio | $(":radio") |
Il sélectionnera tous les éléments d’entrée avec type = « radio » |
| :checkbox | $(":checkbox") |
Il sélectionnera tous les éléments d’entrée avec type = « case à cocher » |
| :submit | $(":submit") |
Il sélectionnera tous les éléments en entrée avec type = « submit » |
| :reset | $(":reset") |
Il sélectionnera tous les éléments d’entrée avec type = « reset » |
| :button | $(":button") |
Il sélectionnera tous les éléments d’entrée avec type = « button » |
| :image | $(":image") |
Il sélectionnera tous les éléments en entrée avec type = « image » |
| :file | $(":file") |
Il sélectionnera tous les éléments en entrée avec type = « file » |
| :enabled | $(":enabled") |
Sélectionner tous les éléments d’entrée activés |
| :disabled | $(":disabled") |
Il sélectionnera tous les éléments d’entrée désactivés |
| :selected | $(":selected") |
Il sélectionnera tous les éléments d’entrée sélectionnés |
| :checked | $(":checked") |
Il sélectionnera tous les éléments d’entrée cochés |
