Sélecteurs jQuery
Les sélecteurs jQuery sont l'une des parties les plus importantes de la bibliothèque jQuery.
Sélecteurs jQuery
Les sélecteurs jQuery vous permettent de sélectionner et de manipuler des éléments HTML.
Les sélecteurs jQuery sont utilisés pour "trouver" (ou sélectionner) des éléments HTML en fonction de leur nom, identifiant, classes, types, attributs, valeurs d'attributs et bien plus encore. Il est basé sur les sélecteurs CSS existants et, en plus, il possède ses propres sélecteurs personnalisés.
Tous les sélecteurs dans jQuery commencent par le signe dollar et les parenthèses : $().
Le sélecteur d'élément
Le sélecteur d'éléments jQuery sélectionne les éléments en fonction du nom de l'élément.
Vous pouvez sélectionner tous les <p>éléments d'une page comme ceci :
$("p")
Exemple
Lorsqu'un utilisateur clique sur un bouton, tous les <p>éléments seront masqués :
Exemple
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Le sélecteur #id
Le sélecteur jQuery utilise l'attribut id d'une balise HTML pour trouver l'élément spécifique.#id
Un identifiant doit être unique dans une page, vous devez donc utiliser le sélecteur #id lorsque vous souhaitez rechercher un élément unique et unique.
Pour trouver un élément avec un identifiant spécifique, écrivez un caractère dièse, suivi de l'identifiant de l'élément HTML :
$("#test")
Exemple
Lorsqu'un utilisateur clique sur un bouton, l'élément avec id="test" sera masqué :
Exemple
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Le sélecteur .class
.classLe sélecteur jQuery trouve des éléments avec une classe spécifique.
Pour rechercher des éléments avec une classe spécifique, écrivez un point suivi du nom de la classe :
$(".test")
Exemple
Lorsqu'un utilisateur clique sur un bouton, les éléments avec class="test" seront masqués :
Exemple
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Plus d'exemples de sélecteurs jQuery
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Utilisez notre jQuery Selector Tester pour démontrer les différents sélecteurs.
Pour une référence complète de tous les sélecteurs jQuery, veuillez consulter notre Référence des sélecteurs jQuery .
Fonctions dans un fichier séparé
Si votre site Web contient de nombreuses pages et que vous souhaitez que vos fonctions jQuery soient faciles à entretenir, vous pouvez placer vos fonctions jQuery dans un fichier .js séparé.
Lorsque nous démontrons jQuery dans ce tutoriel, les fonctions sont ajoutées directement dans la <head>
section. Cependant, il est parfois préférable de les placer dans un fichier séparé, comme celui-ci (utilisez l'attribut src pour faire référence au fichier .js) :
Exemple
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>