Les Sélecteurs jQuery – SIBY INFORMATIQUE

1 – Syntaxe d’un sélecteur jQuery

Les sélecteurs jQuery sont l’une des parties les plus importantes de la bibliothèque jQuery.
Les sélecteurs jQuery vous permettent de sélectionner et de manipuler les éléments HTML, XHTM et CSS.
Les sélecteurs jQuery sont utilisés pour “trouver” (ou sélectionner) des éléments HTML / CSS 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 la commande jQuery(), ou bien pour simplifier la syntaxe par le signe dollar et les parenthèses: $().

Le sélecteur d’élément jQuery sélectionne les éléments en fonction du nom de l’élément via la syntaxe :

$("élément_à_séletionner").méthode_à_appliquer();

Vous pouvez à titre d’exemple sélectionner tous les éléments <p> sur une page de la façon suivante:

$("p").méthode();

Exemple ( cacher un paragraphe avec la méthode hide() )

<h1>Exemple de sélecteur jQuery</h1>
<p>Ce contenu sera caché à l'exécution ! </p>
<script type="text/javascript">
$(document).ready(function(){

$("p").hide();
});
</script>

Exemple complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Premier pas avec jQuery</h1>
<p>Ce contenu sera caché à l'exécution ! </p>
<script type="text/javascript">
$(document).ready(function(){
        $("p").hide();
});
</script>
</body>
</html>

Ce qui affiche au navigateur après exécution :

Vous avez bien remarquer que le paragraphe : “Ce contenu sera caché à l’exécution !” a été caché à l’exécution

2 – Les différents types d’un sélecteur jQuery

On peut classifier les sélecteurs jQuery selon l’élément qu’ils sélectionnent :

2.1 – Sélecteur jQuery pour les balises HTML

Nous avons déjà traité ce type de sélecteur au paragraphe précédent. Sa syntaxe est de la forme :

$("élément").methode() ;

Imaginons maintenant une page web qui contient plusieurs paragraphe et qu’on souhaite sélectionner un seul paragraphe bien déterminé la méthode $(“p”) ne peut être appliquer dans ce cas puisqu’elle sélectionne tous les paragraphes. Nous auron donc besoin des paramètres supplémentaires :

$('p:first');   // sélectionne le premier paragraphe de la page
$('p:eq(i)');  // sélectionne le (i+1)ème paragraphe de la page (l'indice commence à 0)
$('p:last');  // sélectionne le dernier paragraphe  de la page

Exemple

<h1>Premier pas avec jQuery</h1>
<p>Contenu du premier paragraphe </p>
<p>Contenu du 2ème paragraphe </p>
<p>Contenu du 3ème paragraphe </p>
<script type="text/javascript">
$(document).ready(function(){
$("p:eq(1)").hide();
});
</script>

L’exemple ci dessus permet de cacher le paragraphe à la position 1 qui est donc le 2ème paragraphe puisque le compteur commence à 0. Il va donc afficher après exécution au navigateur :

Contenu du premier paragraphe
Contenu du 3ème paragraphe

2.2 – Sélecteur jQuery pour les classes CSS

Les sélecteur jQuery peuvent aussi s’appliquer aux classes CSS en utilisant la syntaxe :

$(".Classes_CSS").methode( );

Exemple

Considérons la classe CSS suivante :

.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}

Essayons d’applique cette classe CSS à une balise div :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}
</style>
</head>
<body>
<h1>Sélecteur de Class CSS avec jQuery</h1>
<div class="myClass">Voici un exemple de sélcteur jQuery pour les  classes CSS</div> 
</body>
</html>

On obtient après exécution :

Sélecteur de Class CSS avec jQuery Voici un exemple de sélcteur jQuery pour les classes CSS

Mais si on ajoute le code de sélecteur jQuery suivant :

<script type="text/javascript">
$(document).ready(function(){
$(".myClass").hide();
});
</script>

On obtient alors après exécution au navigateur :

Voici le code complet :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}
</style>
</head>
<body>
<h1>Sélecteur de Class CSS avec jQuery</h1>
<div class="myClass">Voici un exemple de sélcteur jQuery pour les  classes CSS</div> 
<script type="text/javascript">
$(document).ready(function(){
$(".myClass").hide();
});
</script>
</body>
</html>

2.3 – Sélecteur jQuery pour les id CSS

Les sélecteurs jQuery pour les id CSS se fond de la même manirèe en remplaçant le code :

$(".Classes_CSS").methode( );

par :

$("#id_CSS").methode( );

Post Views: 21