Médiaforma

All posts tagged descendant

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

 

Pour vous entrainer à utiliser ces sélecteurs, tapez le code suivant dans Notepad++ et sauvegardez-le dans le fichier selecteurs-hierarchiques.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs hiérarchiques</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Sélecteurs hiérarchiques</h2>
    <div id="contenu">
    <p>Première liste</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    </div>
    <p>Deuxième liste</p>
    <ol>
      <li>premier
      <li>deuxième
      <li>troisième
    </ol>

    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Exercice : Colorer en rouge le premier li

Solution : $(‘li:first-child’).css(‘color’,’red’);

 

Exercice : Colorer en rouge le troisième li

Solution : $(‘li:nth-child(3)’).css(‘color’,’red’);

 

Exercice : Colorer en rouge les li descendants de ul

Solution : $(‘ul>li’).css(‘color’,’red’);

 

Exercice : Colorer en rouge le dernier li descendant de ol

Solution : $(‘ol>li:last-child’).css(‘color’,’red’);


Il est possible de créer un nouveau type d’objet en prenant comme modèle un type objet déjà existant. Le nouvel objet possèdera (héritera) les mêmes propriétés et les mêmes méthodes que son modèle, avec toutefois la possibilité d’ajouter de nouvelles propriétés et/ou de nouvelles méthodes ou de redéfinir les méthodes existantes. On dira que le nouvel objet est un objet dérivé ou un descendant de l’ancien.

Cette notion d’héritage permet de ne pas avoir à réécrire des méthodes déjà écrites. D’autre part les corrections ou modifications du code pourront être réalisées plus rapidement et de façon plus sûre.