La syntaxe de base pour retrouver un élément avec jQuery sera sous la forme :
let $variable = $("selecteur");
Par exemple, l'instruction suivante permet d'appliquer une méthode jQuery nommée animate() à tout les liens qui ont la classe animer :
let $liens = $("a.animer");
$liens.animate(...);
Dans cet extrait de code, on retrouve :
À la base, les sélecteurs jQuery sont très semblables aux sélecteurs CSS. Voici les principaux sélecteurs qui vous seront utiles :
Ex :
img {
...
}
$("img"). ...;
On aurait pu obtenir un résultat équivalent à la sélection jQuery en utilisant le code JavaScript suivant, qui manipule directement le DOM :
let lesImages = document.getElementsByTagName('img');
for (let i = 0; i < lesImages.length; i++) {
...
}
Ex :
.important {
...
}
$(".important"). ...;
Le résultat sera le même si on utilise directement JavaScript pour manipuler le DOM :
let lesImportants = document.getElementsByClassName('important');
for (let i = 0; i < lesImportants .length; i++) {
...
}
#contenu {
...
}
$("#contenu"). ...;
L'utilisation du sélecteur jQuery aurait pu être remplacée par le code JavaScript suivant qui, ici encore, manipule le DOM directement. Notez que puisque getElementById() ne retourne qu'un seul élément, il n'y a pas lieu de faire une boucle comme lors de la sélection par classe ou par nom de balise.
document.getElementById('contenu'). ...;
a img {
...
}
$("a img"). ...;
input[type=text] {
...
}
$("input[type=text]"). ...;
* {
...
}
$("*"). ...;
Il existe d'autres sélecteurs qui sont propres à jQuery :
$("div:hidden"). ...;
$("img:visible"). ...;
$("tr:first"). ...;
$("tr:last"). ...;
« Category: Selectors ». jQuery. http://api.jquery.com/category/selectors/
« Try jQuery selectors ». w3schools. http://www.w3schools.com/jquery/trysel.asp
▼Publicité
