Les sélecteurs hiérarchiques
Sommaire
Les sélecteurs hiérarchiques
-
Objectifs
- Connaitre les sélecteurs hiérarchiques en jQuery
- Comprendre l’arborescence et le principe de sélection hiérarchique
- Etre capable d’utiliser les sélecteurs hiérarchiques
-
Objectifs
- La notation DOM avec ses parents, descendants, enfants, frères et sœurs (siblings) est maintenant bien ancrée dans l’écriture du JavaScript.
- jQuery exploite les possibilités offertes par le DOM
-
Les sélecteurs hiérarchiques
- Dans l’arborescence DOM, à l’exception de
html, tous les éléments ont un parent, et certains éléments ont un ou plusieurs enfants. -
Sélection des descendants
-
$("ascendant descendant")Sélectionne tous les descendants de l’élément noté « Descendant » par rapport à l’élément parent noté « Ascendant ». - Un enfant est une balise encadrée par une balise parent.
$("#body p"): sélectionne tous les descendants de<p>contenus dans l’élément parent identifié par body.-
Sélection des enfants
- Parent > Enfant Sélectionne tous les éléments notés par "Enfant" qui sont les enfants direct s de l’élément parent noté "Parent".
$("#apc > p"): sélectionne tous les enfants immédiats de<p>contenus dans l ’élément parent identifié par apc.$("p>span");Sélectionne les spans directement descendant d’un paragraphe(child elements)-
Sélection des frères suivants
Précédent ~ FrèresCible les éléments frères situés après l’élément identifié par le sélecteur «$("#prev ~ div").$(".apc~p");Sélectionne les paragraphe précédés d’un élément de classe "apc"(sibling elements)-
Sélection de l’élément suivant
- Précédent + Suivant Cible l’élément immédiatement suivant situé après l’élément identifié par le sélecteur "Précédent" et qui répond au sélecteur "Suivant".
$("#prev + div")trouve la division<div>qui suit l’élément avec#prev.$(".apc+p");Sélectionne le paragraphe directement précédé d’un éléments de classe "apc"(next elements)-
Résumé des sélecteurs hiérarchiques
- Tous les objets du DOM font partie d’un arbre commun dont la racine est la balise <body>. Le tableau suivant dresse la liste des sélecteurs hiérarchiques utilisables en jQuery.
-
Applications
-
Exercice:01
- Cacher tous les éléments fils d’un paragraphe contenant des liens:
$("p").children("a").hide();- Afficher le premier paragraphe de la page:
$("p:eq(0)").show();- Cacher tous les balises div qui sont affichées.
$("div:visible").hide();- Obtenir la liste des éléments d’une liste non ordonnée.
$("ul/li"); ou $("ul>li");- Récupérer tous les paragraphes de la classe « test », et contenant au moins un lien:
$("p.test[a]");- Récupérer tous les éléments de liste contenant le texte « test »:
$("li[a:contains('test')]");- Retourner les valeurs des champs
inputayant pour nom "Valider": $("input[@name=Valider]").val();- Retourner la liste des cases a cocher qui sont cochées.
$("input[@type=radio][@checked]")-
Exercice:02
- Soit le body de la page HTML suivante:
- Créer les fonctions JQuery qui permettent de répondre aux questions cités dans les « vlue » des boutons
| Sélecteur | Éléments sélectionnés |
|---|---|
| (‘p>e’) | Éléments e directement descendants d’éléments p |
| (‘p+e’) | Éléments e directement précédés d’un élément p |
| (‘p~e’) | Éléments e précédés d’un élément p |
| :empty | Éléments qui n’ont pas d’enfant |
| :first-child | Premier enfant |
| :first | Premier élément |
| :last-child | Dernier enfant |
| :last | Le dernier élément de la sélection |
| :nth-child() | Élément qui est l’énième enfant de son parent |
| :only-child | Éléments qui sont enfants uniques de leur parent |
| $(« * ») | Sélectionne tous les éléments |
| $(this) | Sélectionne l’élément HTML actuel |
| $(« p.intro ») | Sélectionne tous les éléments <p> avec class = « intro » |
| $(« p:first ») | Sélectionne le premier élément <p> |
| $(« ul li:first ») | Sélectionne le premier élément <li> du premier <ul> |
| $(« ul li:first-child ») | Sélectionne le premier <li> élément de chaque <ul> |
| $(« [href] ») | Sélectionne tous les éléments avec un attribut href |
| $(« a[target=’_blank’] ») | Sélectionne tous les <a> éléments avec une valeur d’attribut cible égale à « _blank » |
| $(« a[target!=’_blank’] ») | Sélectionne tous les <a> éléments avec une valeur d’attribut cible NON égale à « _blank » |
| $(« :button ») | Sélectionne tous les éléments <button> et <input> de type = « button » |
| $(« tr:even ») | Sélectionne tous les éléments pairs <tr> |
| $(« tr:odd ») | Sélectionne tous les éléments <tr> impairs |
<body>
<div class="container" id="container">
<h2 id="titre">Sélecteurs hiérarchiques</h2>
<div id="contenu">
<p>Première liste</p>
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
</ul>
</div>
<p>Deuxième liste</p>
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
</ol>
<p>Liste de menu</p>
<ul >
<li id="titre">Menu 01</li>
<li>Menu 02</li>
<li>Menu 03</li>
<li>Menu 04</li>
<li>Menu 05</li>
</ul>
<div>
<span>Titre des paragraphes dans une balise <strong><span></strong></span>
<p class="colorBlue">Je suis une balise <strong><p></strong> avec une classe dont le nom est colorBlue</p>
<div class="colorBlue">Je suis une balise <strong><div></strong> avec une classe dont le nom est colorBlue</div>
<p>Je suis une balise <strong><p></strong> avec un id dont le nom est colorBlue</p>
</div>
<input type="button" id="btn01" value="Colorer en rouge le premier li,avec une taille de 20px"></br></br>
<input type="button" id="btn02" value=" Colorer en rouge le troisième li,avec une taille de 20px"></br></br>
<input type="button" id="btn03" value="Souligner avec une couleur bleu les li descendants de ul,avec une taille de 20px"></br></br>
<input type="button" id="btn04" value="Souligner avec une couleur rouge les li descendants de ol"></br></br>
<input type="button" id="btn05" value="Colorer les balises qui ont une classe dont le nom est colorBlue et qui ont un parent div"></br></br>
<input type="button" id="btn06" value="Colorer les balises qui ont un id dont le nom est titre et qui ont un parent ul"></br></br>
<input type="button" id="btn07" value="Afficher une bordure bleue autour des balises div dont l’attribut id est container</br>
"></br>
</div>
</body>Correction
<script type="text/javascript">
$(function(){
$( "#btn01" ).click(function() {
$("li:first-child").css({"color":"red","font-size": "20px"});
});
$( "#btn02" ).click(function() {
$("li:nth-child(3)").css({"color":"blue","font-size": "20px"});
});
$( "#btn03" ).click(function() {
$("ul>li").css({"text-decoration": "underline blue","font-size": "20px"});
});
$( "#btn04" ).click(function() {
$("ol>li").css({"text-decoration": "underline red","font-size": "20px"});
});
$( "#btn05" ).click(function() {
$("div" ).children( ".colorBlue" ).css( "color", "blue" );
});
$( "#btn06" ).click(function() {
$("ul").children("#titre").css( "color", "red" );
});
$( "#btn07" ).click(function() {
$("div").children("#container").css('border-color','blue');
//$('[title~="paysage"]').css('border-color','blue');
});
});
</script>