jQuery, javascript, sélection et filtrage – Filtrer et sélectionner avec jQuery
La chose la plus bluffante lorsque on débute avec jQuery est bien cette capacité offerte par la librairie à manipuler des éléments dans le flot HTML et de leur ajouter des classes CSS.
Lorsque l’on débute dans le développement javascript, c’est de voir un résultat immédiat dans son navigateur qui importe et donne quelques encouragements à poursuivre dans l’aride voie du Javascript !
On va voir donc comment se bluffer soit même en commençant par les principes les plus faciles de manipulation et du filtrage à l’aide de la librairie jQuery.
Charger jQuery depuis le CDN de google
Par facilité et paresse, on va charger le librairie jQuery directement depuis le CDN (Content Distribution Network) de google qui gracieusement met à disposition la librairie jQuery depuis ses serveurs. Les performances des serveurs de Google seront à coup sûrs meilleurs que n’importe lequel des hébergements.
Deux solutions s’offrent à vous :
- Soit vous inscrire pour obtenir une API Key afin d’avoir l’autorisation d’utiliser le CDN de google
- Soit d’utiliser directement les éléments par Google en personne dans ces nombreux exemples avec jQuery
On choisit la deuxième méthode, plus facile….
Si vous choisissez de vous inscrire, il faudra déclarer un nom de domaine par exemple http://social.hecube.net/ et vous obtiendrez une clé de ce type
ABQIXXCCe-06-OL6sTKBMYSHQQpzsRR7boKB_9drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ
Insertion complète à placer entre les balises ... de votre page pour tirer profit de jQuery depuis le CDN de Google
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIXXCCe-06-OL6sTKBMYSHQQpzsRR7boKB_9drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
Insertion avec la méthode proposée par Google
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAe-06-OL7sTKBMYSHQQpzsRR7boKB_8drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ"></script> <script type="text/javascript"> /* * How to load jQuery with google CDN */ google.load("jquery", "1"); </script> |
Utiliser jQuery
Une fois, la librairie jQuery chargée via le CDN de Google, on va pourvoir manipuler quelques éléments HTML genre div, ul, li.
On a dénombré 14 exemples de filtrage et de sélection avec jQuery, utilisant la plupart des fonctions natives de jQuery telles que addClass, siblings(), next(), prev()… etc.
Une illustration du résultat produit dans la cas numéro 2
Voici le fichier HTML qui résume toutes les manipulations sur deux listes contenant : Légumes et Fruits, Animaux.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo jQuery hecube</title>
<meta name="author" content="Social hecube">
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var filExemple = {
ready : function() {
$("a").click(filExemple.findElts);
},
// fonction de recherche des éléments
findElts : function($e)
{
$e.preventDefault();
$("*").removeClass("Rose");
// les différents cas de recherche
switch (this.id)
{
case "filFindLi":
{
// Trouver tous les li dans ul
$("ul").find("li").addClass("Rose");
break;
}
case "filSibLi":
{
$("li#filPomm").siblings().addClass("Rose");
break;
}
case "filNext":
{
$("li#filRais").next().addClass("Rose");
break;
}
case "filPrev":
{
$("li#filLait").prev().addClass("Rose");
break;
}
case "filNextAll":
{
$("li#filLou").nextAll().addClass("Rose");
break;
}
case "filPrevAll":
{
$("li#filLou").prevAll().addClass("Rose");
break;
}
case "SelectLeg":
{
$("li#filRais").prevAll("li.filLeg").addClass("Rose");
break;
}
case "filParents":
{
$("li#filLait").parents("div#filSelection").addClass("Rose");
break;
}
case "filParent":
{
$("li").parent("ul").addClass("Rose");
break;
}
case "filChildren":
{
$("div.Liste").children("h4").addClass("Rose");
break;
}
case "filNot":
{
$("ul li").not("li.filLeg").addClass("Rose");
break;
}
case "filSlice":
{
$("ul#filAnimaux li").slice(2, 4).addClass("Rose");
break;
}
case "filAdd":
{
$("ul#filAnimaux li").add("li#filPoti, li#filEndi").addClass("Rose");
break;
}
case "filEq":
{
$("ul li").eq(12).addClass("Rose");
break;
}
}
}
};
$(document).ready(filExemple.ready);
</script>
<style>
body {
font: 16px sans-serif;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 200px;
}
li {
padding: 3px;
margin: 3px;
}
div.Liste {
float: left;
margin: 0 20px;
}
div#Select {
clear: left;
padding: 10px;
}
.Rose {
border: 1px solid #666666;
background: #F6177B;
color:#fff;
}
div#filSelection {
overflow: hidden;
}
</style>
<!-- Date: 2011-05-07 -->
</head>
<body>
<!-- begin --><div id="filSelection">
<div class="Liste">
<h4>Légumes et Fruits</h4>
<ul id="filLegumesFruits">
<li class="filLeg" id="filPoti">Potiron</li>
<li class="filLeg" id="filEndi">Endives</li>
<li class="filLeg" id="filLait">Laitue</li>
<li class="filLeg" id="filPomm">Pomme de terre</li>
<li class="filFruits">Poire</li>
<li class="filFruits">Cerise</li>
<li class="filFruits" id="filRais">Raisin</li>
<li class="filFruits">Combava</li>
</ul>
</div>
<div class="Liste">
<h4>Animaux</h4>
<ul id="filAnimaux">
<li id="filPou">Poulet</li>
<li id="filVac">Vache</li>
<li id="filTig">Tigre</li>
<li id="filLou">Loup</li>
<li id="filEle">Éléphant</li>
</ul>
</div>
</div>
<div id="Select">
<ol>
<li><a href="#" id="filFindLi">Sélectionner toutes les balises <code>li</code> à l'intérieur de la balise <code>ul</code>.</a></li>
<li><a href="#" id="filSibLi">Sélectionner toute la parenté de la balise contenant l'id filPomm.</a></li>
<li><a href="#" id="filNext">Sélectionner la balise <code>li</code> <b>suivant</b> la balise <code>li</code> contentant l'id filRais à savoir <b>Combava</b></a></li>
<li><a href="#" id="filPrev">Sélectionner la balise <code>li</code> <b>précédente</b> la balise <code>li</code> contenant l' id filLait à savoir <b>Endives</b>.</a></li>
<li><a href="#" id="filNextAll">Sélectionner toute la parenté après la balise contenant l'id filLou.</a></li>
<li><a href="#" id="filPrevAll">Sélectionner toute la parenté avant la balise contenant l'id filLou</a></li>
<li><a href="#" id="SelectLeg">Sélectionner exclusivement les balises <code>li</code> contenant l'id filLeg à partir de la balise contenant l'id filRais</a>
<li><a href="#" id="filParents">Sélectionner toute la parenté de l'élément <code>div</code> avec l'id filSelection.</a>
<li><a href="#" id="filParent">Sélectionner toute la parenté des éléments <code>ul</code> c'est à dire tous les <code>li</code>.</a>
<li><a href="#" id="filChildren">Sélectionner les balises <code>h4</code> au sein des éléments <code>div</code> qui possèdent la classe Liste.</a>
<li><a href="#" id="filNot">Sélectionner tous les éléments <code>li</code> au sein des balises <code>ul</code>, à l'exception des <code>li</code> dont la classe est filLeg.</a>
<li><a href="#" id="filSlice">Sélectionner tous les éléments <code>li</code> compris entre Vache et Éléphant.</a>
<li><a href="#" id="filAdd">Sélectionner tous les <code>li</code> dans la liste des animaux et ajouter les <code>li</code> contenant les classes filPoti et filEndi à savoir <b>Potiron</b> et <b>Endives</b>.</a>
<li><a href="#" id="filEq">Sélectionner uniquement le dernier <code>li</code> à savoir <b>Éléphant</b>.</a>
</ol>
</div><!-- //end -->
</body>
</html> |
En savoir plus
- Le site jQuery, notre librairie JavaScript favorite
http://jquery.com/ - La méthode
.siblings()
http://api.jquery.com/siblings/ - Code Playground sur la librairie
http://code.google.com/apis/ajax/playground/?exp=libraries#jquery - Google Libraries API – Developer’s Guide
http://code.google.com/intl/fr/apis/libraries/devguide.html#jquery
