Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
jQuery

Les filtres de base en jQuery (3/3)

Un cours complet pour maîtriser Les filtres de base en jQuery (3/3).

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
Présentation de jQuery
Historique du jquery
Installation de jQuery
Le vocabulaire à utiliser dans jQuery
La Syntaxe de base de jQuery
TP1 jQuery
Les sélecteurs en jQuery
Les sélecteurs de base en jQuery
Les bases de jQuery
Les sélecteurs hiérarchiques
Les filtres de base en jQuery (1/3)
Les filtres de base en jQuery (2/3)
Les filtres de base en jQuery (3/3)
Les filtres enfants en jQuery
Les filtres de contenu en jQuery
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  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. Un élément déterminé
        • :eq(index): Sélectionne l’élément déterminé par la valeur de l’index.
        • Comme les index JavaScript débutent à zéro, le sélecteur :eq(0) sélectionne donc le premier élément, :eq(1) le second élément et ainsi de suite.
        • 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(){
  $("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>
        • 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 cellule numéro 4(qui contient le chiffre 4).
          <!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:eq(3)").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. Les éléments suivants
    • :gt(index): Sélectionne les éléments avec une valeur d’index supérieure (greater than) à la valeur fournie en paramètre.Pour rappel, les index JavaScript débutent à 0.
    • $("a:gt(1)"): sélectionne tous les liens de la page en commençant par le troisième (soit après le second élément).
    • Exemple:
      • Sélectionnez tous les éléments après le numéro 1 (le troisième dans la liste).
      <!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:gt(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>
    • 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 à toutes les cellules qui contiennent les chiffres 5 à 12.
      <!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:gt(3)").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>
  4. Les éléments précédents
    • :lt(index): Sélectionne les éléments avec une valeur d’index inférieure à (less than) à la valeur fournie en paramètre.Pour rappel, les index JavaScript débutent à 0.
    • $("a:lt(3)"): sélectionne tous les liens de la page avant le troisième (soit avant le deuxième élément).
    • Exemple:
      • Sélectionnez tous les éléments avant le numéro 2 (le troisième dans la liste).
      <!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:lt(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>
    • 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 à toutes les cellules qui contiennent les chiffres 1 à 5 en utilisant "lt".
      <!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:lt(5)").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>
Les filtres de base en jQuery (2/3)
Les filtres enfants en jQuery