Les sélecteurs sont l'un des aspects le plus important de la librairie jQuery.
Ceux-ci utilisent une syntaxe qui n'est pas sans rappeler celle des feuilles
de style CSS. Ils permettent aux concepteurs d'identifier rapidement et
aisément n'importe quel élément de la page et d'y appliquer les méthodes
spécifiques à jQuery.
La bonne compréhension de ces sélecteurs jQuery est un élément clé pour
la bonne compréhension et utilisation de jQuery.
Un site Web illustre à merveille le rôle de ces sélecteurs. Il est sûrement
utile de le consulter à l'adresse www.codylindley.com/jqueryselectors/
Les sélecteurs de base,Ces sélecteurs basiques de jQuery ne sont en fait qu'une reformulation des
méthodes getElementById et getElementsByTagName du JavaScript
traditionnel.
La notation reprise par jQuery présente les avantages d'être plus concise et
beaucoup plus intuitive.
Ces sélecteurs basiques sont très fréquemment utilisés dans les scripts
jQuery et leur bonne compréhension se révèle indispensable à l'apprentissage
de jQuery et à la suite de cet ouvrage.
- Sélection par l'identifiant
#identifiant
$("#box"): sélectionne l'élément dont l'id est box.
C'est la notation jQuery de getElementById du JavaScript classique.
Rappelons que cet identifiant doit être unique dans la page. Si par erreur,
ce n'était pas le cas, jQuery reprend le premier élément doté de cet identifiant.
Exemple
Entourons d'une bordure, le second paragraphe dont l'identifiant est
"deux".
Soit le fichier Xhtml suivant :
<!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" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>jQuery</title>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#deux").css("border","1px solid black");
});
</script>
<style type="text/css">
p { width: 200px;
padding: 3px;}
</style>
</head>
<body>
<p>Paragraphe 1</p>
<p id="deux">Paragraphe 2</p>
<p>Paragraphe 3</p>
</body>
</html>
Détaillons le script jQuery.
$(document).ready(function(){
Initialisation de jQuery. Le script est prêt à opérer dès le chargement du
DOM.
$("#deux").css("border","1px solid black");
Il est appliqué à l'élément dont l'id est "deux" ($("#deux")), la méthode
jQuery qui permet de modifier les propriétés CSS, soit ici d'ajouter une
bordure (css("border","1px solid black")). Cette méthode
jQuery css() sera étudiée en détail au chapitre Manipulation des
feuilles de style CSS.
});
Fin du script.
Sélection par le nom de la balise
élément
Sélectionne tous les éléments (ou balises) dont le nom est spécifié.
$("div") : sélectionne toutes les divisions <div> de la page.
C'est la notation jQuery de getElementsByTagName du JavaScript
classique.
Exemple
Entourons d'une bordure tous les paragraphes du document Xhtml.
<!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" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>jQuery</title>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").css("border","1px solid black");
});
</script>
<style type="text/css">
p { width: 200px;
padding: 3px;}
div { padding: 3px;}
</style>
</head>
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<div>Division 1</div>
</body>
</html>
$("p").css("border","1px solid black");
jQuery sélectionne toutes les balises de paragraphe <p> ($("p")) et
applique à celles-ci, une bordure par la méthode css().
2.3 Sélection par la classe
.classe
Sélectionne tous les éléments (ou balises) avec la classe spécifiée.
$(".texte") : sélectionne tous les éléments dotés de l'attribut
class="texte".
Exemple
Entourons d'une bordure le paragraphe doté de la classe gras.
<!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" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>jQuery</title>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".gras").css("border","1px solid black");
});
</script>
<style type="text/css">
p { width: 200px;
padding: 3px;}
.gras { font-weight: bold;}
</style>
</head>
<body>
<p class="gras">Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</body>
</html>
$(".gras").css("border","1px solid black");
La balise avec la classe gras est sélectionnée par jQuery ($(".gras")).
Une bordure est alors appliquée.
Commentaires
On aurait pu noter : $("p.gras").css("border","1px solid
black"). Ainsi, jQuery sélectionne les balises <p> avec la classe gras.
RSS Feed (xml)
Aucun commentaire:
Enregistrer un commentaire