Les sélecteurs hiérarchiques

Les sélecteurs hiérarchiques

  1. 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
  2. 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
  3. 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.
    • DOM JQuery

    1. 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.
    2. 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)
    3. Sélection des frères suivants
      • Précédent ~ Frères Cible 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)
    4. 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)
  4. 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.
    • 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
  5. Applications

    1. Exercice:01
      1. Cacher tous les éléments fils d’un paragraphe contenant des liens:
        • $("p").children("a").hide();
      2. Afficher le premier paragraphe de la page:
        • $("p:eq(0)").show();
      3. Cacher tous les balises div qui sont affichées.
        • $("div:visible").hide();
      4. Obtenir la liste des éléments d’une liste non ordonnée.
        • $("ul/li"); ou $("ul>li");
      5. Récupérer tous les paragraphes de la classe “test”, et contenant au moins un lien:
        • $("p.test[a]");
      6. Récupérer tous les éléments de liste contenant le texte “test”:
        • $("li[a:contains('test')]");
      7. Retourner les valeurs des champs input ayant pour nom "Valider":
        • $("input[@name=Valider]").val();
      8. Retourner la liste des cases a cocher qui sont cochées.
        • $("input[@type=radio][@checked]")
    2. Exercice:02
      • Soit le body de la page HTML suivante:
      • <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>&lt;span></strong></span>
              <p class="colorBlue">Je suis une balise <strong>&lt;p></strong> avec une classe dont le nom est colorBlue</p>
              <div class="colorBlue">Je suis une balise <strong>&lt;div></strong> avec une classe dont le nom est colorBlue</div>
              <p>Je suis une balise <strong>&lt;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>
      • Créer les fonctions JQuery qui permettent de répondre aux questions cités dans les “vlue” des boutons

      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>



Abonnez vous à notre chaîne YouTube gratuitement