Traduction
Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js
Recherche dans ce tuto
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
La notion de sélecteur est vraiment centrale dans jQuery !
Dans les chapitres précédents au travers des exemples vous avez vu déjà de nombreux sélecteurs jQuery.
Vous avez du vous dire :" Mais c'est comme les sélecteurs CSS !
| Exemple de sélecteur | Eléments de la page sélectionnés |
|---|---|
| * | Sélectionne toutes les balises |
| h1 | Sélectionne toutes les balises h1 |
| h1,h2,h3 | Sélectionne toutes les balises h1, h2 et h3 |
| ul li | Sélectionne toutes les balises LI contenues dans UL |
| ul>li | Sélectionne les LI "enfants" (descendants directs) de Ul |
| ul+li | Sélectionne la balise LI qui suit immédiatement UL (premier item) |
| #titre | Sélectionne la balise ayant l'attribut id ="titre" |
| .remarque | Sélectionne les balises ayant l'attribut class ="remarque" |
| img[alt] | Sélectionne les images ayant l'attribut alt |
Pour construire les sélecteurs jQuery on ne peut pas utiliser certaines pseudo-classes de CSS !
hover existe en jQuery mais il s'agit d'une méthode (et non pas d'un pseudo classe événementielle).
Vous n'avez pas le droit d'écrire en jQuery par exemple : $("a:hover") vous devez écrire : $("a").hover(... )
| pseudo-classe | fonction |
|---|---|
| :hidden | sélectionne les éléments cachés |
| :visible | sélectionne les éléments visibles |
| :empty | sélectionne les éléments vides |
| :parent | sélectionne les éléments qui ont au moins un enfant |
| :header | sélectionne les balises titres (h1 à h6) |
| :first | sélectionne le premier élément |
| :last | sélectionne le dernier élément |
| :eq(n) | sélectionne l'élément d'indice n |
| :gt(n) | sélectionne les élements dont l'indice est supérieur à n (gt acronyme de : greather than) |
| :lt(n) | sélectionne les élements dont l'indice est inférieur à n (lt acronyme de : less than) |
| :even | sélectionne les élements pairs |
| :odd | sélectionne les élements impairs |
| :not | pseudo-classe utilisée pour désigner une négation |
| :has(selecteur) | sélectionne les éléments qui ont comme descendant le sélecteur indiqué |
| :contains(chaîne) | sélectionne les éléments dont le texte contient la chaîne indiquée |
| Exemple de sélecteur | Eléments de la page sélectionnés |
|---|---|
| img:hidden | Sélectionne les images cachées |
| img:visible | Sélectionne les images visibles |
| p:empty | Sélectionne les balises P sans contenu |
| p:parent | Sélectionne les balises P avec contenu |
| #corps:header | Sélectionne les balises titre (h1 à h6) dans la boîte identifiée "corps" |
| li:first | Sélectionne le premier item de chaque liste |
| ul li:last | Sélectionne le dernier item de chaque liste à puces |
| button:eq(1) | Sélectionne le bouton d'indice 1 ; donc le deuxième |
| li:gt(1) | Sélectionne les items de listes dont l'indice est supérieur à 1 (gt: greather than) |
| tr:lt(2) | Sélectionne les lignes des tableaux dont l'indice est inférieur à 2 (lt: less than) |
| tr:even | Sélectionne les lignes paires dans tous les tableaux |
| #premier tr:odd | Sélectionne les lignes impaires du tableau identifié "premier" |
| li:not(first) | Sélectionne tous les items de liste sauf le premier item de chaque liste |
| p:has(i) | Sélectionne les paragraphes dont le texte est en italique (balise i) |
| p:contains("javascript") | Sélectionne les paragraphes dont le texte contient la chaîne "javascript" |
Ils seront évoqués dans le chapitre "jQuery et les formulaires".
Le script de la page comprend quatre fonctions.
Une fonction nommée "finfos()" qui donne des informations sur la page.
Une fonction nommée "flistes()" qui met en forme les items pairs de chaque liste.
Les éléments HTML sont dépourvus d'attributs événementiels (onclick, onmouseover, etc.) Donc on sépare bien le code HTML du code JS-jQuery.
La gestion des événements effectuée via jQuery.
function finfos()
{
var info = $("img:hidden").length;
alert("nombre d'images masquées:" + info);
var info = $(":header").length;
alert("nombre de balises titres :" + info);
var info = $("ol li").length;
alert("nombre d'items la la liste numérotée :" + info);
var info = $("ul li").length;
alert("nombre d'items la la liste à puces :" + info);
var info = $("#tableau2 tr").length;
alert("nombre de lignes du deuxième tableau :" + info);
var info = $("#tableau2 tr:even").length;
alert("nombre de lignes paires du deuxième tableau :" + info);
var info = $("#tableau2 tr:odd").length;
alert("nombre de lignes impaires du deuxième tableau :" + info);
} // fin fonction
function flistes()
{
$("li:even").css('background', 'lime');
}
$("img").mouseover(function() {$(this).css({"opacity" : "1", "width":"30%"});});
$("img").mouseout(function() {$(this).css({"opacity" : '', "width":''});});
La fonction finfos() montre que l'on peut utiliser la propriété length pour connaître le nombre d'éléments sélectionnées via un sélecteur JQuery.
Concernant la fonction flistes(), notez bien la syntaxe pour cibler les items pairs de chaque liste ; le premier item à l'indice 0 et est donc pair !
Concernant les deux fonctions anonymes notez la syntaxe pour cibler l'image survolée : $("img").mouseover
Dans chaque fonction anonyme et pour éviter d'utiliser plusieurs fois la méthode css(), je chaine les propriétés css dans
une notation JSON c'est à dire des paires de clé:valeur séparées par une virgule et encadrées par une paire d'accolades.
Ce qui donne par exemple : css({"opacity" : "1", "width":"30%"})
Notez aussi la technique pour annuler tout stylage : css({"opacity" : '', "width":''})
Survolez chaque image et observez ...
Attention $("img:hidden").length retourne 1 alors qu'il y a deux images masquées l'une avec display:none et l'autre avec visibility :hidden. En effet un élément HTML affecté de la propriété visibility:hidden n'est pas considéré comme masqué par jQuery car il consomme encore de la place dans la mise en page (à la différence de display:none).