Back

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>
Sommaire du cours jQuery
Les filtres de base en jQuery (2/3)
author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Correction application animate() V2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …

La méthode animate() de jQuery v2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …

Correction application animate()
3 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …