Les filtres de base en jQuery (1/3)
Les filtres de base en jQuery (1/3)
-
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. -
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>.
- 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.
-
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>.
- 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.
-
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.
- 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
- 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>
$(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><!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><!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><!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><!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>$("li:not(:first, :last)").css("background", "#9cf");<!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>