Les filtres de base en jQuery (1/3)

Les filtres de base en jQuery (1/3)

  1. Objectifs

    • Connaitre les filtres de base en jQuery
    • Etre capable d’utiliser adéquatement les filtres de base 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 élément
        • :first: Sélectionne la première instance d’un élément.
        • $("li:first") : sélectionne le premier élément de liste <li> du document.
        • Exemple:





          • Sélectionnez le premier élément <span> dans un ensemble d’éléments <p>.
          <!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(){
            $("p span").first().css("background-color", "yellow");
          });
          </script>
          </head>
          <body>
           
          <p>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.</p>
          <p><span>jQuery</span> est une bibliothèque de fonctions en JavaScript. C’est une librairie légère : « écrire moins, faire plus »</p>
           
          </body>
          </html>
        • Application:
          • Dans une page HTML créer un tableau de 3 colonnes et 4 lignes remplie avec des nombres de 1 à 12
          • Mettre un arrière plan de couleur à la première ligne du tableau.
          • <!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 type="text/javascript">
            $(document).ready(function(){
            $("tr:first").css("background", "#9cf");
            });
            </script>
            <style type="text/css">
            table { width: 210px;
            border-collapse: collapse;
            border: 1px solid black;}
            td { text-align: center;
            border: 1px solid black;}
            </style>
            </head>
            <body>
             
            <table>
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>4</td><td>5</td><td>6</td></tr>
            <tr><td>7</td><td>8</td><td>9</td></tr>
            <tr><td>10</td><td>11</td><td>12</td></tr>
            </table>
             
            </body>
            </html>
      2. Le dernier élément
        • :last: Sélectionne la dernière instance d’un élément.
        • $("li:last") : sélectionne le dernier élément de liste <li> du document.
        • Exemple:
          • Sélectionnez le dernier élément <span> dans un ensemble d’éléments <p>.
          <!doctype html>
          <html lang="fr">
          <head>
            <meta charset="utf-8">
            <title>Filtre de base last</title>
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
          <script>
          $(document).ready(function(){
            $("p span").last().css("background-color", "yellow");
          });
          </script>
          </head>
          <body>
           
          <p>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.</p>
          <p><span>jQuery</span> est une bibliothèque de fonctions en JavaScript. C’est une librairie légère : « écrire moins, faire plus »</p>
           
          </body>
          </html>
        • Application:
          • Dans une page HTML créer un tableau de 3 colonnes et 4 lignes remplie avec des nombres de 1 à 12
          • Mettre un arrière plan de couleur à la dernière ligne du tableau.
          • <!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 type="text/javascript">
            $(document).ready(function(){
            $("tr:last").css("background", "#9cf");
            });
            </script>
            <style type="text/css">
            table { width: 210px;
            border-collapse: collapse;
            border: 1px solid black;}
            td { text-align: center;
            border: 1px solid black;}
            </style>
            </head>
            <body>
             
            <table>
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>4</td><td>5</td><td>6</td></tr>
            <tr><td>7</td><td>8</td><td>9</td></tr>
            <tr><td>10</td><td>11</td><td>12</td></tr>
            </table>
             
            </body>
            </html>
      3. Exclusion d’un élément
        • :not(sélecteur): Exclut de la sélection tous les éléments qui répondent au critère spécifié par le sélecteur.
        • $("div:not(#box)"): sélectionne toutes les divisions sauf celle identifiée par box.
        • Exemple:
          • Sélectionnez tous les éléments de la liste à l’exception du deuxième.
          <!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(){
            $("li:not(li:eq(1))").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>
        • On peut exclure plus qu’un élément en mettant des virgules entre les sélecteurs
        • L’exemple suivant sélectionne tous les élément à l’exception du premier et dernier élément
        • $("li:not(:first, :last)").css("background", "#9cf");
        • Application:
          • Dans une page HTML créer un tableau de 3 colonnes et 4 lignes remplie avec des nombres de 1 à 12
          • Mettre un arrière plan de couleur à toute les cellules du tableau à l’exception celle qui contient 5.
          • <!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 type="text/javascript">
            $(document).ready(function(){
            $("td:not(td:eq(4))").css("background", "#9cf");
            });
            </script>
            <style type="text/css">
            table { width: 210px;
            border-collapse: collapse;
            border: 1px solid black;}
            td { text-align: center;
            border: 1px solid black;}
            </style>
            </head>
            <body>
             
            <table>
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>4</td><td>5</td><td>6</td></tr>
            <tr><td>7</td><td>8</td><td>9</td></tr>
            <tr><td>10</td><td>11</td><td>12</td></tr>
            </table>
             
            </body>
            </html>

Abonnez vous à notre chaîne YouTube gratuitement