Accueil

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

jQuery : les sélecteurs

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 !

Les sélecteurs communs

Exemple de sélecteurEléments de la page sélectionnés
*Sélectionne toutes les balises
h1Sélectionne toutes les balises h1
h1,h2,h3Sélectionne toutes les balises h1, h2 et h3
ul liSélectionne toutes les balises LI contenues dans UL
ul>liSélectionne les LI "enfants" (descendants directs) de Ul
ul+liSélectionne la balise LI qui suit immédiatement UL (premier item)
#titreSélectionne la balise ayant l'attribut id ="titre"
.remarqueSélectionne les balises ayant l'attribut class ="remarque"
img[alt]Sélectionne les images ayant l'attribut alt

Les sélecteurs CSS qui ne fonctionnent pas avec jQuery

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(... )

Les pseudo-classes propres à jQuery

Liste des pseudo-classes

pseudo-classefonction
:hiddensélectionne les éléments cachés
:visiblesélectionne les éléments visibles
:emptysélectionne les éléments vides
:parentsélectionne les éléments qui ont au moins un enfant
:headersélectionne les balises titres (h1 à h6)
:firstsélectionne le premier élément
:lastsé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)
:evensélectionne les élements pairs
:oddsélectionne les élements impairs
:notpseudo-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

Exemples de sélecteurs bâtis à partir des pseudo-classes de jQuery

Exemple de sélecteurEléments de la page sélectionnés
img:hiddenSélectionne les images cachées
img:visibleSélectionne les images visibles
p:emptySélectionne les balises P sans contenu
p:parentSélectionne les balises P avec contenu
#corps:headerSélectionne les balises titre (h1 à h6) dans la boîte identifiée "corps"
li:firstSélectionne le premier item de chaque liste
ul li:lastSé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:evenSélectionne les lignes paires dans tous les tableaux
#premier tr:oddSé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"

Les pseudo-classes relatives aux formulaires

Ils seront évoqués dans le chapitre "jQuery et les formulaires".

Exemple

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.

Le code HTML de la page

Appel de deux fonctions nommées finfo() & flistes().
Les deux dernières images sont masquées. !

Le script Jquery

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 !

Les fonctions anonymes sont basées l'événement hover !
Première fonction : si survol d'une image cette dernière devient opaque ; dès la fin du survol elle redevient transparente.
Seconde fonction : si survol d'une ligne de tableau celle-ci prend un fond gris ; dès la fin du survol le fond redevient blanc.

Un instruction utilisant l'événement hover remplace deux instructions : l'une basée sur l'événement mousevover et l'autre sur l'événement mouseout.

En effet l'événement hover est suivi non pas d'une mais de deux fonctions ! La première est exécutée lors du survol (mouseover) et la seconde dès que le survol cesse (mouseout).
Il s'agit donc là encore d'une technique pour optimiser le code afin de respecter le slogan de Jquery : "Write less, do more !"

Le rendu dans un Iframe

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 (ou opacity :0) 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).