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:
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 :
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 :
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 :
Younes Derfoufi
CRMEF OUJDA
Post Views: 3 032