Les filtres enfants en jQuery
Les filtres enfants en jQuery
-
Objectifs
- Connaitre les filtres enfants en jQuery
- Etre capable d’utiliser adéquatement les filtres enfants 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. -
Le premier enfant
:first-child: Sélectionne tous les éléments qui sont le premier enfant de leur parent.$("ul:first-child"): sélectionne le premier enfant (soit le premier élément de liste) de la liste non ordonnée<ul>.- Exemple:
- Sélectionnez le deuxième élément dans liste suivante.
-
Le dernier enfant
:last-child: Sélectionne tous les éléments qui sont le premier enfant de leur parent.$("ul:last-child"): sélectionne le premier enfant (soit le premier élément de liste) de la liste non ordonnée<ul>.- Exemple:
- Sélectionnez le deuxième élément dans liste suivante.
-
Le énième enfant
:nthchild(index): Sélectionne les éléments qui sont le énième enfant de leur parent. La position est fournie par le paramètre index.- L’index ne débute pas à 0 comme on a vue en jQuery mais à 1.
$("ol li:nth-child(2)"): sélectionne le second élément<li>de la liste<ol>.- 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(){
$("ol li:first-child").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><!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(){
$("ol li:last-child").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><!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(){
$("ol li:nth-child(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>