Objectifs
- Connaitre les filtres de base en jQuery
- Etre capable d'utiliser adéquatement les filtres de base en jQuery
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.
Les éléments pairs
:even: Sélectionne les éléments pairs selon un index commençant à 0.$("li:even"): sélectionne les éléments de liste<li>du document ces lignes sont d’index 0, 2, 4 soit les lignes 1, 3, 5 à l’écran.- Exemple:
- Sélectionnez les éléments pairs (affichage impair à l'écran).
<!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:even").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 aux lignes pairs (impairs à l'écran 1 et 3) 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:even").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>
- 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.
Le éléments impairs
:odd: Sélectionne les éléments impairs selon un index commençant à 0.$("li:odd"): sélectionne les éléments de liste<li>du document ces lignes sont d’index 0, 1, 3 et 5 soit les lignes 2, 4 à l’écran.- Exemple:
- Sélectionnez les éléments impairs (affichage pair à l'écran).
<!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:odd").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 aux lignes impairs (pairs à l'écran 2 et 4) 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:odd").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 balises de titre
:header: Retourne tous les éléments qui sont des balises de titre comme <h1>, <h2>, <h3>, etc.$(":header"): sélectionne toutes les balises de titre de la page.- Exemple:
- Sélectionnons toutes les balises de titre de la page.
<!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(){ $(":header").css("background", "#9cf"); }); </script> </head> <body> <h1>Le jQuery</h1> <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>