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.
Vous avez du vous dire :" Mais c'est comme les sélecteurs CSS !

beaucoup de sélecteurs sont communs aux deux langages
certains sélecteurs CSS ne fonctionnent pas avec jQuery
jQuery a des sélecteurs spécifiques

Les sélecteurs communs

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

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 !

:link
:visited
:active
:hover
:focus
:target
:first-letter
:first-line
:after
:before

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

Vous pouvez bâtir des sélecteurs jQuery à partir des pseudo-classes ci-dessous.

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

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

Vous que vous compreniez pas très bien pour le moment l'intérêt des certains de ces pseudo-classes est normale.
Rien ne vaut des exemples de sélecteurs construits à partir de ces pseudo-classes.

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"

Les pseudo-classes relatives aux formulaires

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

Exemple

Dans cette page une fonction jQuery qui fait fonction de feuille de style qui est exécutée automatiquement au chargement de la page.

une fonction qui donnne des infos sur la page
une fonction qui met en évidence les dernière lignes de chaque tableau

Lorsque vous survolez une image elle devient opaque le temps du survol.
La couleur de fond d'une ligne de tableau devient grise le temps du survol.

Le code HTML de la page

...
<body onload ="fstyle()">
<button onclick ="finfos()">Infos sur la page</button>

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<p>Corps de texte associé au titre de niveau 2. 
<br>Blabla blabla Blabla blabla Blabla ...
<h3>Titre de niveau 3</h3>
<p>Corps de texte associé au titre de niveau 3. 
<br>Blabla blabla Blabla blabla Blabla  ...
<h3>Titre de niveau 3 </h3>
<p>Corps de texte associé au titre de niveau 3. 
<br>Blabla blabla Blabla blabla Blabla ...
<h2>Titre de niveau 2</h2>
<p>Corps de texte associé au titre de niveau 2. 
<br>Blabla blabla Blabla blabla Blabla ...
<h2>Les listes</h2>
<ul>Une liste à puces : 
<li>item 1 de la liste</li><li>item 2 de la liste</li><li>item 3 de la liste</li>
</ul>
<ol>Une liste numérotée : 
<li>item 1 de la liste</li><li>item 2 de la liste </li><li>item 3 de la liste </li><li>item 4 de la liste </li>
</ol>
<h2>Deux tableaux</h2>
<table id ="tableau1">
	<tr><th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th></tr>
	<tr><td >contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td></tr>
	<tr><td >contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td></tr>
	<tr><td >contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td></tr>
</table>
<table id ="tableau2">
	<tr><th>col 1</th><th>col 2</th><th>col 3</th></tr>
	<tr><td >5</td><td>fois 1</td><td>donne 5</td></tr>
	<tr><td >5</td><td >fois 2</td><td >donne 10</td></tr>
	<tr><td >5</td><td >fois 3</td><td >donne 15</td></tr>
	<tr><td >5</td><td >fois 4</td><td >donne 20</td></tr>
	<tr><td >5</td><td >fois 5</td><td >donne 25</td></tr>
</table>
<h2>Les images</h2>
<img src ="../images/bikini.jpg"  alt ="jolie fille en bikini" />
<img src ="../images/trikini.jpg" />
<img src ="../images/seins_nus.jpg" style ="display:none;" />
<img src ="../images/brune_nue.jpg" style ="visibility : hidden;"/>

Remarquez que j'utilise le gestionnaire d'évènements de HTML.
Notez entre autres : < body onload ="fstyle()" > :exécution automatique d'une fonction.
Les deux dernières images sont masquées. !

Le script Jquery

function fstyle()
{
$("*").css("fontFamily","arial").css("color","navy").css("textDecoration","none");
$("body").css("width","96%").css("border","2px solid navy")
	.css("margin","20px auto 20px auto");
$(":header").css("textAlign","center");
$("p").css("padding", "10px");
$("ul,ol").css("fontStyle", "italic");
$("table").css("width","500px").css("margin","20px auto 20px auto")
	.css("border","2px solid black");
$("td,th").css("border","1px solid black").css("paddingLeft","10px")
	.css("color","black");
$("tr").css("height","40px").css("verticalAlign","top");
$("img,button").css("width", "200px").css("display", "inlineBlock")
	.css("margin","10px").css("verticalAlign","middle"); 
$("button").css("height", "50px").css("borderRadius", "10px");
$("img").css("opacity", "0.3");
}
function finfos()
{ 
var info = $("img:hidden").length; 
alert("nombre images masquées:" + info);
var info = $("img:hidden").attr("src"); 
alert("chemin image masquée:" + info);
var info = $("h1,h2").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);
}

$("img").hover(function()	{$(this).css("opacity", "1");}, 
		function(){$(this).css("opacity", "0.1");}
		);
$("tr").hover(function()	{$(this).css("background", "gray");}, 
		function(){$(this).css("background", "white");}
		);

La fonction fstyle effectue la mise en forme de la page.
Grâce à cette fonction tout le texte est en bleu marine (sauf le texte des tableaux qui est en noire) ; la page est centrée dans l'écran ; Les titres sont centrés ; le texte des listes est en italique ; le texte dans les cellules de tableau est aligné en haut ; les images sont quasi transparentes; etc.

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.

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

Les deux dernières instructions sont nouvelles. Etudiez les attentivement.
Elles sont basées sur l'événement hover !

Traduisons en Français la première instruction : si survol d'une image cette dernière devient opaque ; dès la fin du survol elle redevient transparente.

Traduisons aussi en Français la seconde instruction : 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 simplifier au maximum le code afin de respecter le slogan de Jquery : "Write less, do more !"

Testez cette page

Exercice

Vous devez concevoir une page contenant deux tableaux (identiques à ceux de l'exemple précédent).
Si survol d'une ligne d'un des tableaux alors celle-ci adopte un fond gris et le texte passe en noir et en gras

La feuille de style de la page

	h1{text-align :center; }
	table {width : 90%; margin : 20px auto 20px auto ; border : 1px solid black;}
	tr {height : 40px ; background-color : skyblue ; color : green; } 
	th, td {border :1px solid black ; padding-left : 10px ; }

Le rendu que vous devez obtenir

Vous devez créer une instruction jQuery basée sur l'événement hover !

Extrait du code de la deuxième fonction (fin du survol) de l'instruction :
... function(){$(this).css({"background":"","color": "","fontWeight" :""});}

Remarquez que j'emploie la notation JSON.
Sens : Sur survol les mises en forme sont supprimées donc ce sont les mises en forme prévues dans la feuille de style interne qui s'appliquent à nouveau.

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville