Les filtres enfants en jQuery

Les filtres enfants en jQuery

  1. Objectifs

    • Connaitre les filtres enfants en jQuery
    • Etre capable d’utiliser adéquatement les filtres enfants en jQuery
  2. Introduction






    • Tous les éléments du DOM étant répertoriés par jQuery, il devient facile de filtrer des éléments déterminés comme le
      premier, le dernier, etc.
      1. Le premier enfant
        • :first-child: Sélectionne tous les éléments qui sont le premier enfant de leur parent.
        • $("ul:first-child"): sélectionne le premier enfant (soit le premier élément de liste) de la liste non ordonnée <ul>.
        • Exemple:
          • Sélectionnez le deuxième élément dans liste suivante.
          <!doctype html>
          <html lang="fr">
          <head>
            <meta charset="utf-8">
            <title>Filtre de base First</title>
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
          <script>
          $(document).ready(function(){
             $("ol li:first-child").css("background-color", "yellow");
          });
          </script>
          </head>
          <body>
           <ol>
          <li>Le <span>jQuery</span> est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML.</li>
          <li><span>jQuery</span> est une bibliothèque de fonctions en JavaScript. C’est une librairie légère : « écrire moins, faire plus »</li>
          <li>C’est une bibliothèque javascript open-source et multibrowser.</li>
          <li>Elle permet de parcourir et de manipuler très facilement le DOM des pages Web avec la syntaxe fortement similaire à celle d’XPath.</li>
          <li>JQuery permet par exemple de changer / ajouter une classe CSS, créer des animations, modifier des attributs, etc.</li>
           </ol>
          </body>
          </html>
      2. Le dernier enfant
        • :last-child: Sélectionne tous les éléments qui sont le premier enfant de leur parent.
        • $("ul:last-child"): sélectionne le premier enfant (soit le premier élément de liste) de la liste non ordonnée <ul>.
        • Exemple:
          • Sélectionnez le deuxième élément dans liste suivante.
          <!doctype html>
          <html lang="fr">
          <head>
            <meta charset="utf-8">
            <title>Filtre de base First</title>
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
          <script>
          $(document).ready(function(){
            $("ol li:last-child").css("background-color", "yellow");
          });
          </script>
          </head>
          <body>
           <ol>
          <li>Le <span>jQuery</span> est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML.</li>
          <li><span>jQuery</span> est une bibliothèque de fonctions en JavaScript. C’est une librairie légère : « écrire moins, faire plus »</li>
          <li>C’est une bibliothèque javascript open-source et multibrowser.</li>
          <li>Elle permet de parcourir et de manipuler très facilement le DOM des pages Web avec la syntaxe fortement similaire à celle d’XPath.</li>
          <li>JQuery permet par exemple de changer / ajouter une classe CSS, créer des animations, modifier des attributs, etc.</li>
           </ol>
          </body>
          </html>
      3. Le énième enfant
        • :nthchild(index): Sélectionne les éléments qui sont le énième enfant de leur parent. La position est fournie par le paramètre index.
        • L’index ne débute pas à 0 comme on a vue en jQuery mais à 1.
        • $("ol li:nth-child(2)"): sélectionne le second élément <li> de la liste <ol>.
        • Exemple:
          • Sélectionnez le deuxième élément dans liste suivante.
          <!doctype html>
          <html lang="fr">
          <head>
            <meta charset="utf-8">
            <title>Filtre de base First</title>
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
          <script>
          $(document).ready(function(){
            $("ol li:nth-child(2)").css("background-color", "yellow");
          });
          </script>
          </head>
          <body>
           <ol>
          <li>Le <span>jQuery</span> est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML.</li>
          <li><span>jQuery</span> est une bibliothèque de fonctions en JavaScript. C’est une librairie légère : « écrire moins, faire plus »</li>
          <li>C’est une bibliothèque javascript open-source et multibrowser.</li>
          <li>Elle permet de parcourir et de manipuler très facilement le DOM des pages Web avec la syntaxe fortement similaire à celle d’XPath.</li>
          <li>JQuery permet par exemple de changer / ajouter une classe CSS, créer des animations, modifier des attributs, etc.</li>
           </ol>
          </body>
          </html>

Abonnez vous à notre chaîne YouTube gratuitement