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

Les filtres de base en jQuery (1/3)

Un cours complet pour maîtriser Les filtres de base en jQuery (1/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. 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>
  3. 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>
  4. 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");
  5. 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)