jQuery

Les sélecteurs hiérarchiques

Un cours complet pour maîtriser Les sélecteurs hiérarchiques.

0 chapitres 0 QCM Accès gratuit

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.
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)

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

Applications

01 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]")

02 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>

Sélecteurs jQuery pour les formulaires

TP4 jQuery (tableau de multiplication)

Sommaire du cours jQuery

Les sélecteurs hiérarchiques

Sommaire du cours

Autres catégories

Objectifs

Objectifs

Les sélecteurs hiérarchiques

Sélection des descendants

Sélection des enfants

Sélection des frères suivants

Sélection de l’élément suivant

Résumé des sélecteurs hiérarchiques

Applications

01 Exercice: 01

02 Exercice: 02

Sommaire du cours jQuery