Jquery Dynamisez Vos Pages Plus Simplement

jQuery, dynamisez
vos pages plus

simplement !
Par Alex-D
www.openclassrooms.com
Licence Creative Commons 6 2.0
Dernire mise jour le 12/07/2012
Sommaire
2 Sommaire ...........................................................................................................................................
1 Lire aussi ............................................................................................................................................
3 jQuery, dynamisez vos pages plus simplement ! ...............................................................................
3 Partie 1 : Premiers pas avec jQuery ...................................................................................................
4 Introduction jQuery .........................................................................................................................................................
4 Prsentation ................................................................................................................................................................................................................
4 Les limites de productivit de JavaScript ....................................................................................................................................................................
5 jQuery, une bibliothque JavaScript ............................................................................................................................................................................
5 Installation ...................................................................................................................................................................................................................
5 Tlchargement ..........................................................................................................................................................................................................
6 Ajout de jQuery nos pages HTML ............................................................................................................................................................................
8 Hello World, le grand classique ...................................................................................................................................................................................
8 jQuery() ou $() ? ..........................................................................................................................................................................................................
9 jQuery() ou $() ? ..........................................................................................................................................................................................................
9 Les Slecteurs ...................................................................................................................................................................
10 Les slecteurs CSS ...................................................................................................................................................................................................
10 Comment utiliser les slecteurs ? .............................................................................................................................................................................
10 Les slecteurs CSS compatibles avec jQuery ..........................................................................................................................................................
12 Rsum .....................................................................................................................................................................................................................
13 Les pseudos-classes gres par jQuery ...................................................................................................................................................................
13 La ngation ................................................................................................................................................................................................................
13 Les Formulaires ........................................................................................................................................................................................................
14 Les Enfants ...............................................................................................................................................................................................................
16 Pair ? Impair ? ...........................................................................................................................................................................................................
17 Les Mthodes ..................................................................................................................................................................
17 Qu'est-ce qu'une mthode ? .....................................................................................................................................................................................
17 Utilisation ...................................................................................................................................................................................................................
17 Les mthodes simples proposes par jQuery ...........................................................................................................................................................
18 Paramtres et enchanements de mthodes ............................................................................................................................................................
18 Des paramtres ? O a ? ........................................................................................................................................................................................
19 Les diffrentes formes de paramtres .......................................................................................................................................................................
20 Plusieurs mthodes la suite ...................................................................................................................................................................................
20 Mthodes principales ......................................................................................................................................................
21 Mthodes traversantes ..............................................................................................................................................................................................
21 Parcourir un objet jQuery ..........................................................................................................................................................................................
24 Contraintes et comparaisons ....................................................................................................................................................................................
25 Rsum .....................................................................................................................................................................................................................
25 Gestion du contenu ...................................................................................................................................................................................................
26 Rcupration et remplacement du contenu ..............................................................................................................................................................
26 Ajout de contenu .......................................................................................................................................................................................................
27 Supprimons ! .............................................................................................................................................................................................................
27 Crer de nouveaux nuds dans le DOM ..................................................................................................................................................................
28 Manipuler les attributs ...............................................................................................................................................................................................
28 Les attributs en gnral .............................................................................................................................................................................................
28 Les classes ...............................................................................................................................................................................................................
29 Les data-* du HTML5 ................................................................................................................................................................................................
2/31
jQuery, dynamisez vos pages plus simplement !
Par Alex-D
Mise jour : 12/07/2012
Difficult : Facile
l'heure du Web 2.0 et bientt du Web 3.0, les bibliothques et frameworks JavaScript jaillissent pour combler la complexit et le
manque de souplesse du langage. L'une des plus clbres et rependues se dnomme jQuery. Vous naviguez chaque jour sur des
sites qui utilisent jQuery, commencer par le Site du Zro.
jQuery est une bibliothque destine simplifier l'criture de vos codes JavaScript. Grce cette librairie vous pourrez
dynamiser plus facilement vos pages web. En effet, la bibliothque est lgre, simplifie l'adaptation tous les navigateurs (vous
n'crivez qu'un code sans vous soucier des diffrences entre navigateurs), possde une syntaxe lgante et homogne qui
s'apprend rapidement (beaucoup moins verbeuse que le JavaScript pur , mais toutefois cette syntaxe ne plait pas tout le
monde), et pour finir, sans limites grce la notion de plugin ou la cration de bibliothques additionnelles jQuery de manire
pouvoir rutiliser ces morceaux de code plus facilement.
Par ailleurs, la bibliothque jQuery est utilise par les plus grands comme Google, Twitter, Wordpress ou encore Mozilla. Il est
fort comprhensible que ce dernier l'utilise, c'est John Resig, un des dveloppeurs principaux du moteur JavaScript de Firefox,
qui a cr jQuery.
Il est prfrable d'avoir des connaissances dans les langages HTML5 & CSS ainsi que JavaScript. Je vous donnerai dans ce
cours les critures les plus rcentes et correctes ce jour. Les codes HTML seront donns dans sa version 5 et seront expliqus
s'ils changent du XHTML.

Site rechargement asynchrone - Application mathmatique en ligne - Plugin de carrousel paramtrable
Aperu de sites, applications et plugins utilisant jQuery
Sommaire 3/31
Partie 1 : Premiers pas avec jQuery
Cette bibliothque va vous permettre de coder plus simplement et plus rapidement car vous n'aurez pas vous soucier des
diffrentes interprtations du JavaScript selon les navigateurs. jQuery est trs simple comprendre et utiliser mais ncessite
nanmoins quelques petites prcisions, notamment sur l'optimisation de son import sur vos pages web.
Introduction jQuery
jQuery est trs simple comprendre et utiliser, mais ncessite nanmoins quelques petites prcisions. Nous verrons en quoi
jQuery simplifie l'criture ainsi que l'optimisation de son import sur vos pages web. Nous finirons par le classique Hello World
pour vrifier le bon fonctionnement de la bibliothque dans notre page web.
Prsentation
Les limites de productivit de JavaScript
Diversit des navigateurs
Il existe aujourd'hui de plus en plus de navigateurs que les visiteurs ne mettent pas forcment jour. Le tout vous donne une
panoplie de navigateurs ayant chacun une dclinaison de versions : Internet Explorer 6 10, Firefox 3 10, Opera, Chrome, pour
ne citer que les plus rpandus. Rien qu'avec ceux-l, il vous faudrait faire une srie de tests de vos codes pour vrifier leur
fonctionnement sur chacun d'eux. En effet il vous serait ncessaire d'crire plusieurs portions de code pour pallier aux diffrentes
interprtations des multiples moteurs JavaScript. Vous obtenez alors une syntaxe barbante et vous souciez perptuellement de la
compatibilit inter-navigateurs plutt que d'optimiser votre site. Par exemple, si vous devez rcuprer le dfilement vertical
(offset, en anglais) en pixels vous devez procder diffremment selon le navigateur. On obtient alors le code suivant :
Code : JavaScript - scrollTop sans bibliothque
function scrollTop(){
if(typeof( window.pageYOffset ) == 'number'){
// Netscape
return window.pageYOffset;
} else if( document.body && (document.body.scrollTop) ||
navigator.appName=="Microsoft Internet Explorer") {
// DOM
return document.body.scrollTop;
} else if( document.documentElement &&
(document.documentElement.scrollTop) ) {
// Internet Explorer 6
return document.documentElement.scrollTop;
}
}
var defil = scrollTop();
En utilisant jQuery, eh bien ce code est contenu dans la bibliothque, c'est--dire qu'on nous propose une fonction simple
utiliser qui se dbrouille pour faire ce travail dans les coulisses et nous renvoyer le rsultat. Ainsi, il nous suffit de faire appel la
fonction comme ceci :
Code : JavaScript - scrollTop avec jQuery
var defil = $(document).scrollTop();
Une criture lourde
JavaScript peut tre trs intressant et puissant utiliser dans vos pages web en complment des langages HTML et CSS,
cependant lors de dveloppement d'application complexe, votre code va devenir trs lourd mme pour les choses les plus
simples. jQuery vous offre une simplification de l'criture et de lecture de votre code. On comprend mieux le choix de leur
jQuery, dynamisez vos pages plus simplement ! 4/31
slogan Write less, do more qui signifie crivez moins pour en faire plus . Voici un exemple pour vous convaincre. Vous
vous trouvez dans la situation ou vous souhaitez afficher un message aux visiteurs utilisant Internet Explorer, sans bibliothque
il vous faut crire ce code :
Code : JavaScript - Test du navigateur IE sans bibliothques
var navigateur = "msie";
var place = navigator.userAgent.toLowerCase().indexOf(navigateur) +
1;
if(place){
alert("C'est Internet Explorer " + detect.charAt(place +
navigateur.length) + " !");
}
En utilisant la bibliothque jQuery vous n'aurez plus qu' faire :
Code : JavaScript - Test du navigateur IE en utilisant jQuery
if($.browser.msie){
alert("C'est Internet Explorer " + $.browser.version + " !");
}
Ceci est quand mme moins casse-tte et plus clair lire et comprendre !
jQuery, une bibliothque JavaScript
Une bibliothque JavaScript...
jQuery n'est pas un langage, mais bien une bibliothque JavaScript ! C'est dire que vous avez tout un tas de code qui vous
mche le travail pour que vous puissiez dvelopper plus rapidement ce que vous souhaitez. Cela implique, videmment, que
JavaScript soit activ au sein du navigateur du visiteur pour que vos scripts fonctionnent. Il est bon de savoir que l'expression
dvelopper en jQuery est fausse, dvelopper en JavaScript en utilisant la bibliothque jQuery est plus correcte.
... parmi tant d'autres !
Il existe bien d'autres bibliothques JavaScript dont la plus connue avec jQuery est trs certainement Mootools. Vous pourrez les
trouver via une simple recherche sur les mots-cls bibliothque JavaScript sur votre moteur de recherche favori. Chacun
choisi celle qui lui plait le plus, jQuery tant une des plus rpute et rpandue. Il arrive parfois que certains projets utilisent
plusieurs bibliothques pour bnficier des atouts de chacune d'elles.
Comme toute bibliothque, jQuery doit tre inclus dans vos pages tel un script JavaScript crit par vos soins, c'est ce nous
allons voir dans la partie suivante.
Installation
Entrons dans le vif du sujet en commenant par ajouter la bibliothque nos pages pour enfin pouvoir l'exploiter par la suite.
Tlchargement
La premire tape est de tlcharger jQuery sur le site officiel, pour tre certain d'avoir la dernire version. Pour se faire, rendez-
vous l'adresse : http://jquery.com/. Vous y trouverez sur la droite un bloc o sont disponibles deux compressions possibles :
Production : le code est compress au maximum et optimis pour l'utilisation en production (Lien direct de tlchargement
: http://code.jquery.com/jquery.min.js)
Dveloppement : le code n'est pas compress et est prvu pour tre lu et/ou pour dvelopper avec pour contribuer au
projet notamment (Lien direct de tlchargement : http://code.jquery.com/jquery.js)
Choisissez la version Production , car nous n'allons pas toucher au fichier, simplement l'utiliser. Aussi, j'ose esprer que vous
tes un bon dveloppeur ayant toujours l'esprit le souci d'allger vos pages au maximum pour un temps de chargement optimal.
Notez que le temps de chargement d'une page influe maintenant sur le rfrencement naturel de celle-ci.
Copiez le fichier vers votre projet. Je vous suggre l'adresse /js/libs/jquery.min.js pour une organisation optimale de
vos scripts. En effet, si vous utilisez plusieurs bibliothques (library en anglais, d'o libs ) vous pourrez les sparer de vos
propres scripts en les rangeant dans un dossier distinct. Il n'est en aucun cas obligatoire de ranger ce fichier cet endroit, vous
pouvez le mettre o bon vous semble, ceci n'tant qu'une proposition pour plus de clart dans votre projet.
Dans ce tuto, je considrerais l'arborescence suivante :
Code : Autre
/
|- index.html
|- js/
|- libs/
|- jquery.min.js
|- Nos fichiers JS ici
Pensez vrifier l'encodage du fichier pour qu'il soit le mme que celui de vos pages. Gnralement, on choisira
d'encoder nos fichiers et pages en UTF-8.
Pour changer l'encodage d'un fichier, si vous tes sous UNIX et que vous tes fan de la console, il existe la commande
Code : Bash
iconv -f iso-8859-1 -t utf-8 votre_fichier
.
Autrement, voici une liste des manipulations pour les diteurs les plus rpandus :
Notepad++ : allez dans Paramtrage, Prfrences, slectionnez l'onglet Nouveau document / Rpertoire puis cochez UTF-8
sans BOM ;
Eclipse : cliquez sur Window > Prfrences > dans le menu de gauche sur General > en bas sur Workspace > dans la boite
Text file encoding cochez Other et slectionnez UTF-8 ;
Dreamweaver : cliquez sur Edition > Prfrences > Nouveau document > Codage par dfaut ;
Zend Studio : allez sur Tools > Desktop > Apparence ;
gedit : cela se fait lors de l'enregistrement du fichier. Dans la boite de dialogue ouverte aprs avoir cliqu sur Fichier >
Enregistrer sous..., choisissez Locale actuelle (UTF-8) dans la liste droulante situe en bas.
Ajout de jQuery nos pages HTML
Le fichier est maintenant prt tre exploit dans vos pages HTML, il ne reste plus qu' l'importer, tentons de le faire
proprement.
La balise script
La manire la plus classique et sre pour que l'import soit effectu sans souci est certainement l'utilisation de la balise script vers
le fichier tlcharg pralablement. Pour rappel la balise script se prsente ainsi :
Code : HTML
<script src="<URL_DU_SCRIPT>"></script>
Vous pourrez noter que je ne prcise pas type="text/javascript" car je considre que l'on dveloppe en
HTML5. Celui-ci considrant la balise script comme contenant du JavaScript par dfaut.
Si vous dveloppez votre site dans une version antrieure HTML5, la bonne syntaxe sera <script
type="text/javascript" src="<URL_DU_SCRIPT>"></script>
Il est noter que les fichiers JS se chargent de manire synchrone : tant que le premier fichier JS n'est pas charg, le navigateur
ne continue pas l'affichage de la page, il attends d'avoir la totalit du fichier pour continuer avancer. Ainsi, pour fluidifier le
chargement, on prfrera placer les fichiers JS aprs tout le contenu pour que celui-ci ne soit charg qu'une fois que notre
visiteur a de quoi se mettre sous la dent. La balise script est donc placer juste avant la fermeture du body, aprs tout votre
contenu. Ainsi, vous ne bloquerez pas le chargement de votre page en attente de votre script. Si toutefois votre fichier est
primordial dans le fonctionnement de votre page, il faudra le mettre dans le head, auquel cas il sera charg avant le contenu et
s'excutera immdiatement.
Attention, jQuery sera utilis par vos fichiers *.js chargs via cette balise script, veillez donc placer l'import de jQuery avant les
diffrents imports de vos scripts. En effet, les scripts sont chargs un un dans l'ordre o ils sont placs dans le code HTML. Si
vous placez un de vos *.js avant jQuery, celui-ci tentera de chercher excuter des choses qui ne sont pas encore charges.
Nous obtenons donc le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre</title>
</head>
<body>
<p>
Contenu de la page
</p>
<script src="/js/libs/jquery.min.js"></script>
</body>
</html>
Utilisons l'API Google
Une grande partie de vos visiteurs font chaque jour des recherches sur Google, qui utilise jQuery. Le cache de Google tant trs
bien configur, le fichier jquery.min.js est dj en cache chez le visiteur. Quoi de mieux que d'utiliser le cache navigateur de
votre visiteur ? Cela prsente plusieurs avantages :
allger la bande passante de votre site ;
acclrer le chargement des pages.
Tout cela est bas sur le fait que lorsqu'un visiteur se rend sur un site< et que la mise en cache est bien configure, les fichiers
JavaScript, images, etc. (dont jQuery) sont mis en cache par le navigateur chez le client. jQuery n'est donc pas re-tlcharg par
le visiteur chaque site qu'il visite et qui utilise jQuery. Cela arrange tout le monde, profitons-en !
Voyons comment faire appel l'API de Google prvue cet effet. Nous utiliserons galement la balise script, nous allons
simplement aller chercher le fichier sur les serveurs de Google l'adresse
//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js, le double slash au dbut permettant
d'avoir une adresse en fonction du protocole que vous utilisez : http ou https.
Maintenant, imaginons qu'un jour, les serveurs de Google soient indisponibles ou qu'ils changent leur API : il faut prvoir une
solution de secours. Nous alors donc nous resservir de notre fichier en local avec une petite touche de JavaScript. Nous
obtenons alors quelque chose comme cela :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
Un paragraphe ici
</p>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script
src="/js/libs/jquery.min.js"><\/script>')</script>
</body>
</html>
La ligne de JavaScript signifie que s'il n'y a pas jQuery, c'est que l'import juste au dessus n'a pas fonctionn. Nous ajoutons donc
la page, via JavaScript, un import de jQuery depuis notre fichier local. Ainsi, nous profitons du cache de Google tout en tant
certains de la disponibilit de jQuery.
Hello World, le grand classique
Pour savoir si vous avez russi importer jQuery convenablement, voici un Hello World utilisant jQuery.
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
Un paragraphe
</p>
<script
<script>$('body p').html('Hello World');</script>
</body>
</html>
Vous comprendrez mieux la petite ligne de code ds la prochaine partie.
Si vous voyez encore Un paragraphe c'est que jQuery n'est pas import, vrifiez donc les tapes prcdentes. Si votre page
affiche Hello World vos pages sont prtes tre dynamise en utilisant jQuery !
jQuery() ou $() ?
Vous avez vu plus haut dans le Hello World apparatre la fonction $() et oui, c'est court comme nom et il vaut mieux ! En
effet, elle va nous servir un peu partout.
jQuery() ou $() ?
L'heure est au choix, si vous tes prudents vous prfrerez prvenir les conflits, si vous tes certains que vous n'utiliserez que
jQuery, alors ne vous souciez pas d'ventuels conflits : c'est vos risques et prils.
Protger l'alias $()
$() est un alias (un synonyme) de jQuery() qui n'est autre que la fonction principale de jQuery, ds que nous aurons besoin de
jQuery, il faudra y faire appel. Le souci c'est que jQuery n'est pas la seule librairie JavaScript a avoir choisi cet alias, si vous
utilisez plusieurs librairies, vous allez avoir des conflits si vous ne protgez pas les diffrentes parties de code, pour ce faire c'est
trs simple :
Code : JavaScript
jQuery(document).ready(function($){
// L on peut utiliser $() en ayant la certitude que c'est
jQuery, sans conflit possible
});
// Version courte :
jQuery(function($){
// $() est ici disponible comme alias de jQuery()
});
Le jQuery(document).ready() va attendre que la page (HTML + CSS + JS) soit charge pour excuter le code qui est
dans la fonction. Le mieux reste de coder proprement et d'importer jQuery tout en bas du body puis de faire/importer nos scripts
qui l'utilisent. Le chargement d'une page HTML est synchrone, c'est--dire qu'ils sont chargs dans l'ordre qu'ils apparaissent
dans le code, de fait, si jquery.js est plac avant notre script.js, rien ne sert de faire cette vrification puisque c'est le
dernier lment de la page qui est charg.
Code : JavaScript
// Version encore plus courte qui suppose que la page soit charge
(function($){
// On peut ici utiliser $() en tant que jQuery()
})(jQuery);
Utiliser $() directement
Si vous tes certains que vous ne coderez qu'avec jQuery sur votre site, et jamais rien d'autre, vous pouvez tout fait utiliser
directement $() en veillant toujours avoir import jQuery plus haut dans la page (en gnral, juste avant notre script). Si vous
procdez ainsi, vous pourrez directement taper votre code comme nous allons le voir dans le prochain chapitre !
Code : JavaScript
// Import de jQuery
$(...)... // Utilisation de jQuery
Maintenant que votre page est prte utiliser jQuery, et ce, de manire optimise si vous passez par l'API Google, vous pouvez
apprendre la premire brique fondamentale de jQuery que sont les slecteurs.
Les Slecteurs
Pour agir sur la page, il va falloir slectionner les divers lments la composant. L'une des grandes forces de jQuery rside tout
justement en sa simplicit de slection des lments des pages. La bibliothque rutilise le potentiel des slecteurs CSS en les
compltant de slecteurs additionnels.
Les slecteurs CSS
Les slecteurs que vous connaissez certainement et utilisez en CSS sont pratiques et permettent de cibler prcisment n'importe
quel lment d'une page bien construite. Si nous pouvions les utiliser en JavaScript, cela serait quand mme bien plus pratique
que les getElementById() et autres fonction au nom rallonge, non ? Eh bien, avant de dvelopper jQuery, son crateur
avait cr Sizzle : une bibliothque JavaScript qui permet la slection des lments avec les slecteurs CSS. Celle-ci a t intgre
jQuery, qui profite ainsi de la souplesse d'utilisation de Sizzle. Voyons ds maintenant comment slectionner un lment.
Comment utiliser les slecteurs ?
Les slecteurs que nous allons voir par la suite sont utiliser trs simplement de la faon suivante :
Code : JavaScript
jQuery("<selecteur>");
// Si on utilise uniquement jQuery ou que l'on est
// dans un contexte bien dfini, $ est un alias de jQuery
$("<selecteur>");
En sachant que <selecteur> sera votre slecteur constitu des lments dtaills ci-aprs.
Attention toutefois, si vous utilisez des caractres spciaux dans vos slecteurs !"#$%&'()*+,./:;<=>?@[\]^`{|}~ il
faudra les protger en les prcdant d'un double backslash \\. Par exemple pour slectionner cet lment HTML : <span
class="head.nav.link.lbl">5</span> il faudra faire ainsi : $("head\\.nav\\.link\\.lbl");. Le mieux
tant de ne pas utiliser ce genre de caractres pour viter tout problme dans le CSS comme dans le JavaScript.
Un slecteur $("<selecteur>"); va retourner un objet jQuery qui contient tous les lments qui ont satisfait le slecteur,
et s'il n'y en a aucun cela vaudra null.
Les slecteurs CSS compatibles avec jQuery
La grande majorit des slecteurs CSS ont t directement implments jQuery, certains autres ne sont pas compatibles. jQuery
est trs jour et est dj prt supporter CSS3 et ses nouveaux slecteurs.
Le joker
Expression : *
Il permet la slection de tous les lments. Celui-ci est utiliser avec prcaution, si on l'excute seul, on rcupre galement les
lments html, body, ... ce qui n'est gnralement pas dsir. On l'utilisera plutt pour rcuprer tous les lments l'intrieur
d'un autre, par exemple : header nav * pour rcuprer tous les lments dans les nav des header.
Le nom de la balise HTML
Expression : elem
Exemples : span ; div ; p ; section
On rcuprera alors tous les lments qui sont ce type d'lment. Il est galement possible de chaner les lments : elem1
elem2 qui ira chercher tous les lments elem2dans elem1.
Tout comme en CSS, on peut tester la parent et la position par rapport ses lments frres :
elem1 > elem2 : ira chercher tous les elem2 parmi les enfants directs de elem1, sans aller plus loin dans les sous-
enfants ;
elem1 + elem2 : slectionnera tous les elem2 situs tout de suite aprs un elem1 ;
elem1 ~ elem2 : pour chaque elem1, on va chercher tous les lments elem2 suivant elem1 dans le mme
parent.
La chanabilitit des slecteurs elemX est galement applicable aux slecteurs qui vont suivre.
L'id
Expression : #id
Exemple : #part_2
Slectionne l'lment ayant l'id id. Normalement, ce slecteur ne renvoie qu'un lment puisqu'un id est cens tre unique. Les
id sont galement chanables, comme indiqu plus haut, bien qu'en soit cela soit inutile puisqu'un id est thoriquement ddi
un seul lment, pas besoin de filtrer travers un lment parent.
La classe
Expression : .class
Exemple : .souligne
On a alors, la manire d'une slection par le nom de la balise, tous les lments qui ont la classe indique. Ici la chainabilit des
slecteurs de classe ont bien un sens. En effet, une classe est faite pour tre utilis plusieurs endroits, on pourra donc trouver
des choses comme .titre_1 .ico ou encore #corps h3 .ico. On peut galement filtrer avec plusieurs classes sur le
mme lment, typiquement : html.js.cssrotation.
La prsence d'attribut sur un lment
Expression : elem[attr]
Exemple : img[alt]
Retourne tous les lments elem ayant l'attribut attr, quelque soit la valeur de attr, pourvu que l'attribut soit prsent.
On trouvera galement le test de prsence de plusieurs attributs :
Expression : elem[attr1][attr2]
Exemple : img[alt][src]
Le slecteur vrifiera la prsence de chacun des attributs attrX sur l'lment elem
Une valeur particulire pour un attribut
Expression : elem[attr="val"]
Exemple : a[href^="#"] qui permettra de slectionner tous les liens vers des ancres.
De cette manire, on va rcuprer tous les lments elem qui ont un attribut attr ayant la valeur val.
Il existe toute une srie de variantes au niveau du test de la valeur de l'attribut. En voici une rapide description :
elem[attr!="val"] : la valeur de attr doit tre diffrente de val ;
elem[attr^="val"] : la valeur de attr doit exactement commencer par val ;
elem[attr$="val"] : l'inverse ici attr doit exactement terminer par val.
elem[attr*="val"] : attr doit simplement contenir val.
Des slecteurs du mme genre, mais un peu plus particuliers, ils sont bass sur des sparateurs.
elem[attr~="val"] : attr contient un ou plusieurs mots spars par des espaces dont l'un est exactement val ;
elem[attr|="val"] : va slectionner les elem dont l'attribut attr sera strictement gal val ou bien, que la
valeur de l'attribut soit une suite de mots spars de tirets (-) et que le premier est gal val.
On peut bien sr tester la valeur de plusieurs attributs, tout en utilisant des tests diffrents sur les attributs, ce qui dans des cas
extrmes pourrait donner des choses comme ceci : a[href^="#"][data-bulle="true"][data-truc|="une-
valeur"][data-class="js"]
Slecteur multiple
Parfois nous voulons avoir deux slecteurs diffrents et leur faire subir le mme traitement. Pour cela, comme en CSS, on peut
sparer les slecteurs d'une virgule. Ainsi, on obtient quelque chose comme :
Code : JavaScript
$("body.accueil #bandeau_pub, aside .pub");
Les Pseudo-classes
Expression : elem:pseudo-classe
Exemple : a:nth-child(2n)
Sizzle permet d'utiliser toutes les pseudos-classes que propose CSS3 lexception de celles qui suivent :
::selection
:first-letter, :first-line
:before, :after
:link, :visited, :active, :hover, :target
:nth-last-child
:nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type
Nous verrons plus en dtail les pseudos-classes dans la prochaine sous-partie.
Rsum
Pour rsumer, voici un exemple de slecteur tout fait plausible en pratique, mais tordu je dois vous l'avouer :
Code : JavaScript
$("html.js.cssgradient #corps > section p[id*="part"].contenu
a[href^="#"] + .infobulle");
Si on regarde ce code de prs, on dduit alors que le slecteur ira chercher les lments dans html s'il a les classes js et
cssgradient, puis il y trouvera un lment ayant l'id corps qui a un ou des enfant(s) direct(s) section. Nous avons fait
une partie du chemin, mais a n'est pas fini. Dans les section trouves, on cherche alors les paragraphes p ayant un id qui
contient la suite de caractres "part" et qui a galement la classe contenu. Dans ces paragraphes on ira chercher les lments
ayant la classe infobulle qui sont directement prcds d'un lien dont l'attribut href commence strictement par le caractre
#, c'est dire un lien vers une ancre. Le chemin a t long, mais nous y somme parvenus !
Code : HTML
<html class="js cssgradient">
<... id="corps">
<section>
<p id="uhqsfouhg_part123" class="contenu">
<a href="#...">...</a>
<... class="infobulle"></...>
Voici une arborescence du code qui satisfera notre slecteur. Lorsqu'il y a "..." c'est que ce qui y est nous importe peu.
Tout bon dveloppeur le sait, rien ne vaut la documentation officielle lorsque l'on cherche quelque chose de prcis ; voici donc
la documentation officielle des slecteurs CSS3 : http://www.w3.org/TR/css3-selectors/.
Les pseudos-classes gres par jQuery
Comme je vous l'avais promis, nous voil au moment ou nous allons dcouvrir les pseudo-classes CSS que jQuery gre, mais
aussi celles que jQuery ajoute. Pas de souci se faire au niveau des pseudo-classes CSS, elles sont compatibles tout
navigateurs puisque c'est jQuery qui gre tout cela. Les pseudo-classes vont nous permettre de slectionner certains lments
encore plus facilement ! D'autre part, ils sont trs utiliss, ce qui leur vaut au moins une partie ddie que voici.
noter que toutes les pseudos-classes que nous allons voir sont utiliser comme en CSS, c'est dire comme ceci :
$("elem:pseudo-classe");
ou encore $(":pseudo-classe"); qui quivaut en fait $("*:pseudo-classe");
La ngation
Il est parfois trs important d'avoir connaissance de la ngation pour viter une srie de slecteurs la place d'un. Il s'agit de la
pseudo-classe :not('selecteur') dont il est ici question. Il est possible d'tre dans la situation o nous avons 3 tailles pour nos
liens : .small, .normal, .big et que l'on veuille ne slectionner que les .small et les .normal. Pour l'utiliser c'est
trs simple :
Code : JavaScript
$('a:not(.big)');
// quivalent (dans notre cas) :
$('a.small, a.normal');
On aurait galement pu faire comme sur la deuxime ligne, mais vous voyez que c'est plus long : imaginez avec des slecteurs
plus complexes !
Les Formulaires
jQuery va nous tre utile lorsque l'on voudra traiter les formulaires ct client pour les valider avant de les envoyer sur le
serveur, par exemple. Ou encore, envoyer les donnes en asynchrone (AJAX). Pour pouvoir envoyer ces informations, ces
valeurs, il va nous falloir les rcuprer dans la page. Une premire solution, qui vous vient naturellement l'esprit avec ce que
vous avez appris jusqu'ici, consiste slectionner une checkbox (par exemple) ainsi : $("input[type='checkbox']");.
C'est l que jQuery va encore nous simplifier la tche !
Les boutons
En HTML5, tout comme dans les prcdentes versions, il y a 4 sortes de boutons :
bouton simple : <input type="button"> ;
bouton de remise zro : <input type="reset"> ;
bouton de soumission : <input type="submit"> ;
bouton de soumission en image : <input type="image">.
En HTML5, il est possible et recommand de ne pas fermer la balise input.
jQuery propose une pseudo-classe associe respectivement chacun de ces boutons :
:button
:reset
:submit
:image
Les noms tant directement repris des types, quoi de plus simple retenir ?
Les champs
Le plus imposant des champs est certainement textarea, mais ayant une balise rien qu' lui, pas besoin de pseudo-classe. En
revanche pour les champs de texte et mot de passe, cela devient intressant :
champ texte : <input> plus connus ainsi : <input type="text"> ;
champ mot de passe : <input type="password"> ;
Auxquels on trouvera les pseudo-classes associes suivantes :
:text
:password
Encore une fois, mme nom pour la pseudo-classe que le type du champ.
Les options
Seront regroups ici les les champs radio, select, checkbox ; autrement dit, tout ce qui permet un choix parmi une liste dfinie.
Sauf que, les select n'ont pas droit leur pseudo-classe, en effet ils sont privilgis tout comme les textarea avec une balise
ddie et donc simplement slectionnable.
Toujours selon le mme modle :
bouton radio : <input type="radio"> ;
checkbox : <input type="checkbox"> ;
Pour slectionner ces lments nous auront donc, vous l'aurez devin :
:radio
:checkbox
Mais, ce qui est trs intressant c'est que l'on peut galement filtrer les champs radio/checkbox qui sont cochs grce la
pseudo-classe :checked. Il est donc possible, par exemple, de rcuprer toutes les checkbox coches en faisant
$(":checkbox:checked").
Le champ d'envoi de fichier
Dernier type de champs slectionnable avec une pseudo-classe implmente par jQuery : les champs de type file <input
type="file"> avec la pseudo-classe :file, comme vous auriez pu vous en douter.
Les tats des champs
Les champs input peuvent tre dsactivs comme ceci : <input type="text" disabled>. C'est galement valable pour
les autres balises qui composent un formulaire (textarea, select, ...). Ainsi, ils sont affichs mais l'utilisateur ne peut pas modifier
leur valeur. jQuery nous a une fois de plus concoct une pseudo-classe pour slectionner les champs activs et une autre pour
les champs dsactivs.
:enabled pour les champs normaux
:disabled pour les champs ayant l'attribut disabled
Il existe galement la pseudo-classe :focus qui permet de rcuprer l'lment sur lequel l'utilisateur a le focus. Celle-ci
fonctionne sur tous les lments, mme en dehors des formulaires, mais elle est particulirement utile dans ce contexte.
Les Enfants
Nous avions vu dans la partie prcdente des slecteurs permettant de slectionner certains enfant, mais voici quelques
pseudos-classes supplmentaire bien pratiques, qui combines d'autres permettront de contourner le problme du non-support
de certains slecteurs CSS3.
Par rapport leur position dans leur parent
Un enfant peut tre le premier, le n
ime
ou encore le dernier, en sachant que le premier et le dernier sont tout simplement des cas
particuliers parmi les n
ime
positions. Attention toutefois, ici on ne va pas aller chercher l'lment tant la position n mais on va
ne renvoyer l'lment que s'il est la position demande, un exemple plus loin vous expliquera mieux tout cela. Pour rpondre
cette problmatique nous avons trois pseudos-classes, dont deux ne sont que des raccourcis :
:nth-child() utiliser ainsi :nth-child(5) avec 5, l'index de l'lment dans son parent ;
:first-child quivaut :nth-child(1) ;
:last-child.
Ces slecteurs tant assez complexes, voici un exemple :
Code : HTML
<body>
<div id="contenu">
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 4</a><a href="#">Lien 4.1</a></li>
</ul>
<ul>
<li><span>L c'est un span</span><a href="#">Lien 7</a><a
href="#">Lien 7.2</a></li>
</ul>
</div>


<script>
$premier = $('#contenu :nth-child(2)');
$second = $('#contenu a:first-child');
</script>
</body>
Le premier slecteur va aller chercher dans le #content tous les lments qui ont la position 2 par rapport leur parent direct. Ici
on aura donc le second <ul>, le deuxime <a> (celui qui contient Lien 4.1 ) et le deuxime <li> de chaque <ul>.
Le second slecteur ajoute une contrainte en plus : il faut que les lments potentiels soient des <a>. Ce qui aura ici pour effet
de slectionner tous les <a> qui sont les premiers lments de leur parent. Ici c'est le cas pour presque tous les liens sauf Lien
4.1 car il n'est pas le premier de son parent, Lien 7 c'est le premier <a> mais pas le premier de son parent, de mme pour
Lien 7.2 .
Par rapport leur position en fonction du slecteur
Les pseudo-classes qui vont suivre dans ce paragraphe sont ajoutes par jQuery, elles n'existent pas en CSS.
Contrairement aux slecteurs ci-dessus, qui sont du CSS, jQuery rajoute des slecteurs plus simples utiliser et qui vont nous
satisfaire dans la plupart des cas. Que diriez-vous de slectionner le n
ime
paragraphe dans une div particulire ? Beaucoup plus
simple comprendre, n'est-ce pas ? Voici donc trois pseudo-classes qui vont vous rappeler les prcdentes, mais dont le
fonctionnement est diffrent.
:eq(n) qui permet de rcuprer l'lment en position n (n doit tre positif ou nul) du type prcis (si prcis) sinon
l'lment n, tout simplement ;
:first quivaut :eq(0) car les indices avec :eq commencent 0 contrairement :nth-child() qui commence 1,
ceci est du aux conventions diffrentes du CSS et du JS ;
:last va rcuprer le dernier lment du type (si prcis) sinon le dernier lment, tout simplement.
Enfant unique
Un parent peut aussi n'avoir qu'un seul enfant. Pour les trouver, nous avons la pseudo-classe :only-child, tout simplement.
Exemple
Ces slecteurs tant un peu pointus, voici un exemple
Code : HTML
<header>
<nav>
<a href="#">Un lien</a>
<a href="#">Un autre lien</a>
<a href="#">Vers une ancre</a>
<a href="#">Retour en haut</a>
</nav>
</header>
Ici, le slecteur $("header:only-child"); va nous renvoyer l'lment nav.
Si l'on souhaite rcuprer le lien Vers une ancre on utilisera ce slecteur $("header nav a:nth-child(3)"); tandis
que pour avoir Un lien on va plutt utiliser $("header nav a:first-child");.
Pair ? Impair ?
Il existe deux slecteurs trs pratiques que sont les suivants :
:even qui slectionne les lments dont l'index est pair
:odd qui prends lui les impairs
Il est souvent question de colorer une ligne sur deux d'une couleur diffrente dans les tableaux, pour une meilleure lisibilit. Cela
est galement faisable en CSS avec la pseudo-classe :nth-child(2n) pour les pairs et :nth-child(2n+1) pour les impairs. jQuery
nous offre une nouvelle fois une notation trs simplifie et, qui plus est, fonctionne sur tous les navigateurs.
Vous savez slectionner des lments dans vos pages, et ce, de diffrentes faons. Je vous invite consulter la documentation
(en anglais) pour dcouvrir la liste complte et dtaille des slecteurs qui sont grs par jQuery cette adresse :
http://api.jquery.com/category/selectors/
Que faire une fois que nous avons russi slectionner ceux-ci ? C'est ce qui vous attend dans le chapitre suivant avec les
mthodes.
Les Mthodes
Slectionner les lments c'est bien, les manipuler c'est mieux ! Les mthodes sont l pour a, et jQuery en intgre beaucoup.
Voyons ce que sont les mthodes, leurs proprits pour finir sur les diffrentes formes de paramtres que nous pourrons leur
donner.
Qu'est-ce qu'une mthode ?
Souvenez-vous, nous voyions dans le chapitre prcdant les slecteurs que nous utilisions ainsi : $('#selecteur') par
exemple. Ceci permet de rcuprer un objet jQuery sur lequel nous allons pouvoir appliquer des actions, modifications, ou tout
simplement de simples lectures d'attributs ou de proprits ; c'est cela que permettent les mthodes. Pour rsumer, une mthode
permet une action sur un objet jQuery rcupr pralablement.
partir d'ici il va m'arriver de stocker des objets jQuery dans des variables pour pouvoir leur appliquer des mthodes
diffrentes sans devoir slectionner l'lment chaque fois. La convention sera celle-ci : une variable contenant un
objet jQuery sera prcde d'un dollar, exemple :
Code : JavaScript
var $body = $('body');
Vous pouvez tout fait respecter cette convention ou non (d'o son nom), mais celle-ci permet une meilleure
comprhension de ce que contiennent les variables, et de fait, de mieux comprendre votre code en gnral.
Utilisation
Pour appliquer ces modifications, nous utiliserons bien souvent des mthodes de jQuery. Celles-ci se prsentent et s'applique
l'objet de cette faon : $('.class').methode(); La mthode pouvant prendre un ou plusieurs paramtres :
$('#selecteur').methode(250, "Texte"); que nous dtaillerons plus tard dans ce chapitre, car ces paramtres
peuvent prendre de multiples formes.
Les mthodes simples proposes par jQuery
Comme toute bonne bibliothque, jQuery nous propose tout une liste de mthodes qui permettent de grer de plusieurs faons
le contenu de nos pages. Voyons ensemble les mthodes les plus simples qui existent, c'est--dire celles qui ne prennent pas de
paramtres.
Afficher et masquer
Il est trs courant de devoir afficher ou masquer des lments de nos pages, et pour cela nous n'avons que l'embarras du choix
puisque nous pouvons faire cela avec ou sans animation. En ce qui concerne les mthodes sans animes elles sont au nombre
de deux, j'ai l'honneur de vous les prsenter :
.hide() qui permet de masquer l'objet concern ;
.show() qui affiche l'objet.
Elles vous seront utiles assez couramment notamment lors de vos tests rapides pendant le dveloppement. Celles-ci n'ont pour
simple effet que de jouer avec la proprit display en la passant block pour .show() et none pour .hide(). Pour
vous prouver que je ne vous mens pas, voici le code tout prt tester :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="a-masquer">
Un paragraphe
</p>
<script
<script>$('.a-masquer').hide();</script>
</body>
</html>
Qui, si vous allez dans votre explorateur de code via F12, devrait produire ceci :
Code : HTML
<p class="a-masquer" style="display: none;">
Un paragraphe
</p>
Vous voyez que cette bibliothque n'est pas magique, elle vous simplifie juste le travail en allgeant le code de vos applications
web utilisant le JavaScript.
Supprimer un lment
Il est parfois utile d'allger le code source des lments qui ne sont plus utiles, il existe pour cela une mthode toute simple qui
s'applique ainsi :
Code : JavaScript
$('.delete').remove();
Celle-ci retire purement et simplement tous les lments cibls du DOM.
Paramtres et enchanements de mthodes
Jusqu'ici les mthodes taient simples, gentilles et pas trs volues ni paramtrables. Voil ce sur quoi nous allons dsormais
nous attarder : les paramtres !
Des paramtres ? O a ?
Souvenez-vous de la mthode .hide() je vous ai menti quand je vous disais qu'elle tait simple et qu'elle ne prenait pas de
paramtres.
O mettre les paramtres ?
La mthode .hide(), comme nombre d'autres, peut parfois prendre des paramtres, il suffit de consulter la documentation pour
le voir. Vous voyez depuis tout l'heure des parenthses vides, et oui, c'est dans celles-ci que nous mettrons les paramtres. Ces
paramtres peuvent tre de diffrents types que nous verrons un peu plus loin ici, mais il est toujours indiqu quels sont les
types des paramtres dans la documentation, avec des exemples vous permettant de mieux visualiser si a n'tait pas le cas
avant.
Lire et comprendre la documentation
Continuons plus en dtail, voyons la signature de la mthode .hide() que l'on nous donne :
Citation : Documentation jQuery
.hide( [duration] [, easing] [, callback] )
Que signifie donc tout ce charabia ? Certains sont dj familiers ce genre de notation, mais un rappel ne fait pas de mal !
Les paramtres sont dsigns par des mots entre les parenthses, ceux qui sont facultatifs tant entre crochets. Ainsi, ici
nous avons les paramtres duration, easing et callback. Bien qu'ils soient tous facultatifs, si vous voulez renseigner le
paramtre easing vous devrez donner une valeur pour duration, pour conserver l'ordre et la correspondance. En dessous de la
signature nous sont donns les dtails sur chacun des paramtres que nous allons voir sans plus tarder.
Pour ceux qui dveloppent souvent hors-ligne, vous pouvez tlcharger la documentation de jQuery sur jQAPI.com
Les diffrentes formes de paramtres
Comme vous venez de le voir, il y a parfois plusieurs paramtres une mthode, obligatoires ou facultatifs, mais quoi qu'il en soit
ils ont un type. Dans l'exemple ci-dessus cit, la documentation nous donne les informations ncessaires :
Citation : Documentation jQuery
duration A string or number determining how long the animation will run.
easing A string indicating which easing function to use for the transition.
callback A function to call once the animation is complete.
Alors, bien sr c'est en anglais, mais cela reste trs comprhensible. Nous avons ici la possibilit d'ajuster la dure de l'animation
en donnant un entier/chane, de donner le nom d'une fonction de easing et une fonction de callback. Autant la dure est
quelque chose de concret, autant les deux autres termes sont moins clair pour vous.
Une fonction de easing est une courbe qui va dfinir si l'animation va tre linaire, avec rebond(s), acclre, ralentie,
acclre puis ralentie avec rebonds, ...
Une fonction de callback, c'est la fonction que la mthode va lancer une fois qu'elle aura fini son travail. Typiquement ici
si on dfini une duration gale 500ms, alors le callback sera lanc aprs les 500ms d'animation, et mme si cette valeur
est nulle, cela sera appel aprs que l'lment ait t masqu.
La fonction de callback, entre autres, sera une fonction anonyme qui pourra, si ncessaire, appeler son tour des fonctions
nommes. Pour rappel une fonction anonyme va tre ainsi :
Code : JavaScript
$('#selecteur').hide(500, "linear", function(){
// Votre code, une fois l'lment masqu
});
jQuery c'est avant tout du JavaScript, et de ce fait les dures sont toujours en millisecondes ! Par ailleurs, il est
galement possible d'utiliser les constantes de jQuery que sont "fast" et "slow" qui correspondent respectivement
des dures de 200ms et 600ms.
Nous verrons des mthodes qui demanderont des objets, vous savez ces espces de tableaux associatifs avec des accolades ?
Voici un petit exemple :
Code : JavaScript
$('#selecteur').css({
'height': '15px',
'width': '3px'
});
Ce qu'il faut retenir de ce code c'est qu'une mthode peut prendre un objet en paramtre. Dans l'exemple ici, c'est la mthode
.css() qui est utilise, nous la verrons dans un chapitre ultrieur.
Plusieurs mthodes la suite
Sachant ce qu'est une mthode, et que nous savons bien nous en servir, nous allons pouvoir enchaner avec les enchanements !
Que sont-ils ? quoi servent-t-ils ? Toutes les rponses dans ces quelques lignes (paragraphes) ! L'ide qu'il faut retenir de
l'enchanement des mthodes, c'est que ce sont plusieurs mthodes la suite. En effet, cela consiste tout simplement appliquer
plusieurs mthodes un mme objet (susceptible d'voluer suite l'application de certaines mthodes) de manire squentielle.
Mais alors, comment faire ? Si l'on suit ce que l'on a vu jusqu'ici, nous aurions cela :
Code : JavaScript
$('#anim').hide(0, "", function(){
$('#anim').show();
});
Ce code est en soit inutile, mais il explique ce qui est faisable. L'criture est lourde et jQuery est fait pour que l'criture soit lgre
! C'est pour cela que le point sera notre liant prfr dans notre cuisine jQuery.
Code : JavaScript
$('#anim').hide().show();
Ce code beaucoup plus clair et concis aura le mme effet que le prcdent code. Pas besoin de mettre des valeurs pour les
paramtres dont on ne se sert pas, tout est gr !
Le fonctionnement des mthodes n'a plus aucun secret pour vous ! Pourquoi ne pas en dcouvrir quelques-unes ? C'est l'objet
du prochain chapitre, allez-y !
Mthodes principales
Les principes des mthodes en poche, nous pouvons voir et comprendre les principales mthodes fournies par jQuery.
Mthodes traversantes
Souvenez-vous du chapitre sur les slecteurs (oui c'est loin) et bien je ne vous ai pas encore tout dit ! En effet, il existe des
mthodes de slection, dites traversantes, qui compltent les slecteurs CSS.
Parcourir un objet jQuery
Chercher un lment
Cela vous arrivera plus d'une fois d'avoir un objet jQuery dans lequel vous voudrez chercher un lment particulier, et pour cela
tout est prvu. En effet, il y a mme deux manires de procder. La premire est d'utiliser la mthode .find() :
Code : JavaScript
var $conteneur = $('.conteneur:eq(0)');
$conteneur.find('.a-trouver');
Cette mthode est strictement identique celle-ci :
Code : JavaScript
var $conteneur = $('.conteneur:eq(0)');
$('.a-trouver', $conteneur);
Ici la mthode .find() va aller chercher dans l'objet jQuery tous les lments ayant la classe .a-trouver. Les deux
mthodes sont identiques puisque que dans le second cas, jQuery va appeler la mthode .find(). C'est plus court crire, a
revient au mme, vous de choisir ce que vous prfrez !
Le parcours
S'il y a bien une chose qui est pratique avec jQuery, c'est de pouvoir parcourir un objet jQuery trs simplement. Lorsque vous
utilisez les slecteurs, il est possible que celui-ci slectionne plusieurs lments, dans ce cas vous aurez parfois besoin de la
mthode .each() qui prend en paramtre une fonction de callback comme ceci :
Code : JavaScript
$('.selecteur').each(function(){
// Votre code
});
Maintenant, les plus malicieux se sont certainement poss la question suivante : comment rcuprer l'lment courant dans cette
boucle ? Et bien c'est l'ultime slecteur que je ne vous avais pas donn, j'ai nomm $(this). Nous aurions alors par exemple :
Code : JavaScript
$('.to-hide').each(function(){
$(this).hide();
});
Le $(this) est galement disponible dans les fonctions de callback pour rcuprer l'lment sur lequel avait t appliqu la
mthode mre . Si vous avez bien suivi, le code ci-dessus masquera tous les lments ayant la classe to-hide. Ce code est
quivalent $('.to-hide').hide(); dans le cas prsent, mais il sera utile lorsque nous devrons parcourir une liste
d'lment pour ensuite faire des manipulations l'intrieur.
Filtrons notre rsultat
Une fonction moins courante, mais trs utile : .filter() ! Elle va nous permettre de ne slectionner qu'une partie des
lments slectionns dans un objet jQuery. Dans les cas les plus simples a n'est spcialement utile, car trs facilement
simplifiable :
Code : JavaScript
$lignesPaires = $('table tbody tr').filter(':even');
// quivalent, mais moins performant :
$lignesPaires = $('table tbody tr:even');
Mais il faut savoir que l'utilisation de .filter() est plus performante. La documentation nous recommande de slectionner
tout d'abord nos lments avec $('selecteur') en utilisant un slecteur en CSS pur pour profiter de la rapidit de la
fonction JavaScript querySelectorAll(). Il est galement possible d'utiliser .filter() en lui donnant en paramtre un
objet jQuery ou un lment : voir la documentation pour plus de dtails, rien ne vaut la source !
Le plus intressant dans cette mthode est la possibilit de lui passer une fonction anonyme qui devra renvoyer un boolen
disant si l'lment doit tre slectionn ou pas. En clair, .filter() va faire comme le .each() : parcourir les lments un
un et faire appel pour chacun d'eux la mthode anonyme. Ainsi, plutt que de faire des choses complexes avec .each() et
des tests dedans, .filter() nous fait a trs simplement. En voici une dmonstration :
Code : HTML
<body>
<div id="contenu">
<ul>
<li><a href="#">Lien 4</a><a href="#">Lien 4.1</a></li>
</ul>
<ul>
<li><a class=".intrus" href="#">Lien 5</a></li>
<li><span>L c'est un span</span><a href="#">Lien
7</a><a href="#">Lien 7.2</a></li>
</ul>
</div>


<script>
$tousLesTrois = $('a').filter(function(index){
return index != 3 && index % 3 == 0 || $('.intrus',
this);
});
</script>
</body>
On obtient alors dans notre variable uniquement les lments dont l'index est divisible par 3. Dans notre cas les liens : Lien 1
(index 0), Lien 7 (index 6). On aurait pu avoir Lien 4 mais son index tant de 3, la premire condition est faux. Vous
pouvez trs largement complexifier le contenu de la fonction sachant qu'il est possible d'avoir l'lment courant avec $(this).
Rcuprer le n
ime
lment d'un objet jQuery
Comme je vous l'ai dj dit, un objet jQuery peut contenir plusieurs lments, notamment lorsque le slecteur est large (slection
par une classe ou un nom de balise). Souvenez-vous, il existe une pseudo-classe introduite par jQuery nomme :eq(n), et bien
elle est reprise avec le mme nom sous forme de mthode, et se prsente comme ceci :
Code : JavaScript
$('p').eq(5).hide();
Le paragraphe masqu est alors le 6
ime
de la page.
Il est noter que .eq(n) prend un entier n qui vaut 0 pour le premier lment, ceci est du au JavaScript qui a pour
convention de commencer 0 contrairement au CSS (et :nth-child(n) qui commence 1).
Jusqu'ici rien de nouveau. En revanche, il est possible, contrairement au :eq(n), de compter en partant de la fin avec des
entiers ngatifs. Ainsi, pour slectionner l'avant dernier paragraphe, nous aurions ceci :
Code : JavaScript
var $avantDernierP = $('p').eq(-2);
Ce qui n'est pas possible avec :eq(n) car pour cette pseudo-classe, n doit tre positif ou nul.
Il existe des mthodes ddies la slection du premier et du dernier lment de l'objet jQuery, je vous prsente .first() et
.last() qui s'utilisent de la mme faon, mais du coup sans paramtre :
Code : JavaScript
var $premier = $('p').first();
var $dernier = $('p').last();
Ce code aura pour effet de rcuprer d'une part le premier paragraphe trouv dans la page, et d'autre part le dernier paragraphe
trouv sur la page. Il se peut que ces deux variables contiennent le mme objet jQuery s'il n'y a qu'un seul paragraphe.
Les balises, une grande famille : parents et enfants
Pour se dplacer dans l'arbre gnalogique de notre page (plus couramment appel arbre DOM ) il existe quelques mthodes
bien pratiques. Comme vous le savez, dans une famille il y a pour un membre des parents et des enfants. Il y a galement les
frres et surs, c'est pareil dans le DOM et jQuery nous propose, des mthodes dont les noms sont trs inspirs pour naviguer
dans l'arbre DOM.
Pour un objet jQuery $elem il est possible de rcuprer son parent direct ou tous ses parents avec les mthodes :
Code : JavaScript
$elem.parent();
$elem.parents();
Chacune de ces mthodes peut prendre un slecteur en paramtre pour filtrer le rsultat. Par exemple, vous tes dans un
formulaire avec le code suivant :
Code : HTML
<body>
<form action="#" method="post">
<fieldset>
<legend>Connexion</legend>
<div>
<label for="input-pseudo">Pseudo : </label>
<input type="text" name="pseudo" id="input-pseudo">
<label for="pass-input">Mot de passe : </label>
<input type="password" name="pass" id="pass-input">
</div>
</fieldset>
</form>

<script>
var $inputPseudo = $('#input-pseudo');
var $form = $inputPseudo.parents('form');
var $parent = $inputPseudo.parent();
</script>
<body>
Ici nous avons donc la mthode .parents() qui va aller chercher tous les parents et filtrer pour ne prendre que les <form>,
sachant qu'un input ne peut tre que dans un <form> la fois, nous aurons forcment le seul et unique <form> parent.
Par ailleurs $parent va contenir la <div> qui entoure tous les <label> et <input> dans notre cas.
Pour les enfants c'est peu prs la mme chose, mais nous n'avons que .children() pour rcuprer tous les enfants directs.
De la mme manire que pour les parents il est possible de mettre un slecteur en paramtre pour filtrer le rsultat.
En ce qui concerne les frres et surs, nous sommes pas mal fournis :
.prev() rcupre l'lment juste avant l'lment courant
.prevAll() rcupre tous les lments avant l'lment courant
.next() l'lment juste aprs
.nextAll() tous les lments aprs
Ces mthodes s'applique uniquement aux lments du mme niveau, c'est dire ceux qui ont le mme parent que l'lment
courant.
Contraintes et comparaisons
Doit contenir un certain lment
Quelques fois nous voudrions uniquement slectionner un type d'lment qui en contient un autre. Certains diront que pour cela
c'est simple : on spcifie un slecteur qui va slectionner l'lment contenu et remonter au parent pour avoir le conteneur
souhait, le tout dans un .each().
Si vous ne m'avez pas suivi a n'est pas bien grave, ce qu'il faut retenir c'est qu'il existe la mthode .has() qui fait a pour nous
! Elle s'utilise de la faon suivante :
Code : JavaScript
var $ulNonVide = $('ul').has('li');
Simple n'est-ce pas ? Ceci va rcuprer tous les <ul> qui ont au moins un <li> l'intrieur.
Comparer deux lments
Pour tester si un objet jQuery est d'un certain type ou correspond un certain critre il existe la mthode .is() qui s'utilise
comme ceci :
Code : JavaScript
var isLi = $('ul li:first').is('li');
isLi contiendra un boolen selon qui dans le cas ci-dessus vaudra vrai s'il y a prsence d'un <ul> avec un <li> dedans.
noter que .is() peut tester plusieurs choses en mme temps sur le mme lment, il suffit pour a de sparer les tests par
une virgule comme ceci :
Code : JavaScript
var test = $('ul li:first').is('li, .red, :odd');
Rsum
Pour rsum tout cela, voici un exemple plus concret, nous allons coupler tout ce que nous avons vu jusqu'ici pour former un
exemple passablement vicieux :
Code : JavaScript
$('.to-hide').each(function(){
$('button a',
$(this).find('span').has('b')).parent().nextAll().hide(500,
"linear", function(){
if($(this).is('p')){
$(this).show();
} else {
$(this).prevAll('p:hidden').show();
}
});
});
C'est complexe, mais tentons d'expliquer ce code. Premirement, on va chercher tous les lments ayant la classe .to-hide.
Ensuite, on va prendre tous les <span> qui contiennent eux-mme des <b> et on va chercher dans ces <span> tous les <a>
qui sont dans des <button>. Une fois que nous sommes ici, on remonte au parent et on masque tous les lments frres qui
suivent celui-ci. Une fois que l'animation est termine, on fait un test sur chaque lment masqu pour savoir si c'est un
paragraphe (ce qui est possible puisqu'on masque tous les lments suivants un <button> si vous avez suivi) : s'il c'est le cas
on le masque sinon on affiche tous ses frres prcdents qui sont masqus et qui sont des paragraphes.
Je dois vous avouer que je prfre lire le code que le pav que je viens d'crire ! Si vous avez compris le code sans l'explication :
BRAVO !
Gestion du contenu
Tout d'abord, qu'est-ce que le contenu ? a n'est pas uniquement le texte, c'est le code HTML en gnral. Nous allons voir une
foultitude de mthodes qui permette de manipuler le contenu : ajout, modification, suppression...
Rcupration et remplacement du contenu
Pour rcuprer le contenu d'un lment il suffit de le slectionner, et d'utiliser l'une des deux mthodes suivantes selon les
besoins :
.text() qui va rcuprer uniquement le texte en faisant abstraction des balises HTML ;
.html() qui au contraire va rcuprer le code source de l'lment concern.
Ces mthodes sont la fois des getters et des setters. Si elles sont utilises sans paramtre elles vont retourner le contenu, sinon
elles vont remplacer le contenu par ce qui va tre pass en paramtre. Ainsi, nous aurions ceci :
Code : JavaScript
var $htmlDuP = $('p').text("Salut tous !").html();
// $htmlDuP vaudra "<p>Salut tous !</p>" s'il existe un p dans la
page, bien sr
// On peut galement utiliser les getters et setters en mme temps
pour ajouter du contenu par exemple
$elem = $('p');
$elem.html("<span>Salut tous !</span>" + $elem.html())
Mais dans ce second cas, nous allons voir que des mthodes plus simples existent : les mthodes d'ajout.
Ajout de contenu
Ajout l'intrieur de l'lment
la diffrence de la modification, l'ajout est le fait de conserver le contenu actuel et d'y ajouter du texte ou du HTML la suite.
Pour cela jQuery nous propose deux distinctions de cas : l'ajout avant le contenu dj prsent, et l'ajout aprs celui-ci.
Cependant, la bibliothque permet deux sens de lecture que voici :
$elem.preprend(content) et content.preprendTo($elem) ajoutent le contenu au dbut de $elem;
$elem.append(content) et content.appendTo($elem) ajoute le contenu la fin de $elem ;
Dans les deux cas content est le contenu ajouter, il peut s'agir de HTML ou texte brut, tout comme il peut s'agir d'un objet
jQuery. Attention toutefois s'il s'agit d'un lment de la page, celui-ci sera supprim aprs l'opration si vous l'utilisez comme ceci
:
Code : HTML
<p>Mon ami ! </p>
<span>Hey ! </span>

<script>
$('p').append('span');
</script>
Alors, on aura le code HTML suivant aprs excution du code :
Code : HTML
<p>Mon ami ! <span>Hey ! </span></p>
Ajout avant/aprs
On peut vouloir ajouter du contenu avant ou aprs un lment existant, notamment lorsque l'on veut crer un nouveau nud
dans l'arbre DOM de la page. Pour cela deux mthodes simples qui fonctionnent de la mme manire que les prcdantes :
.before() et .insertBefore() sont quivalentes .prepend() et .prependTo() mais AVANT l'lment
courant ;
.after() et .insertAfter() sont quivalentes .append() et .appendTo() mais APRS l'lment courant.
Comme toujours, petite illustration :
Code : HTML
<p>Salut !</p>

<script>
$('p').after("<span>Comment vas-tu ?</span>");
</script>
Donnera ceci aprs excution du code :
Code : HTML
<p>Salut !</p>
<span>Comment vas-tu ?</span>
Supprimons !
Aprs avoir ajout du contenu, quoi de plus normal que de vouloir en retirer ? Il est possible de supprimer uniquement le
contenu texte ou bien de supprimer le nud HTML directement. Voici les spcifications de ces mthodes :
.empty() qui retire le texte de l'lment courant ;
.remove() va quant lui supprimer littralement l'lment du code HTML.
Crer de nouveaux nuds dans le DOM
Il est ncessaire d'avoir des notions relativement avances en JavaScript pour comprendre le paragraphe qui va suivre.
Pour finir, voici la bonne manire de faire pour que votre script reste conforme au WC3. Lorsque vous voulez crer un nouveau
paragraphe avec du contenu il est prfrable de faire comme ceci :
Code : JavaScript
var contenu = "Salut ! Je suis du texte mettre dans un
paragraphe";
$("<p/>").append(contenu);
En effet, $("<p/>") ou $("<p></p>") va rellement crer un nouveau nud dans le DOM tandis que
$("<p>"+contenu+"</p>"); va faire appel innerHtml qui est plus rapide dans le cas de grosses portions de code,
mais moins efficaces dans les cas simples.
Voil en ce qui concerne la manipulation du contenu, c'est grce ces quelques mthodes qu'il nous sera possible de faire tout
ce que l'on voudra.
Manipuler les attributs
Nos pages sont constitues de balises qui comportent de nombreux attributs, ceux-ci sont primordiaux dans le fonctionnement
d'une page web. Il est possible en JavaScript de les manipuler, et comme toujours jQuery nous propose des mthodes assez
simples que je vous dcouvrir ensemble.
Les attributs en gnral
Rcuprer et soumettre des valeurs
Tout comme .text() il existe .attr() qui sert la fois de getter et de setter. Voici les dtails de cette mthode pas des plus
simples que l'on ait vu :
.attr("attribut") est le getter qui prend en paramtre le nom de l'attribut, il retournera alors sa valeur ;
.attr("attribut", "valeur") est la version la plus simple du setter qui va mettre l'attribut la valeur
souhaite ;
.attr({ "attribut1" : "valeur1", "attribut2" : "valeur2" }) permet de mettre une valeur
pour chaque attribut spcifier, le tout en une fois.
Dans tous les cas, les attributs et valeurs peuvent tre le rsultat d'une fonction (souvent anonyme) qui renvoie une chaine.
Voici sans plus tarder un petit exemple de la cration d'un paragraphe en lui ajoutant un id, des classes et une data-admin-url :
Code : JavaScript
$('<p/>').attr({
'id' : 'main-content',
'class' : 'overlay full-width bg-black',
'data-admin-url' : '/admin/main-content/edit'
}).appendTo('body');
Supprimer un attribut totalement
Pour retirer totalement un attribut (pas le vider, rellement le retirer) il faut utiliser la mthode .removeAttr("attribut").
jQuery est tellement simple qu'une seule phrase suffit expliquer cette mthode.
Les classes
Les classes sont des attributs trs manipuls en JavaScript pour allger l'criture jQuery nous offre des raccourcis. Comme
toujours, nous avons une mthode par actions, celles-ci sont : ajouter, supprimer, tester, ... classique ! Quoi de plus simple que
d'utiliser ces mthodes ? Voici un rsum de la situation :
.addClass("la-classe autre-classe") ou encore .addClass("class1 class2 classX")
ajoutent l'lment courant la ou les classe(s) indiques, pas de doublon si dj prsente(s) ;
.removeClass("une-classe autre-classe") fonctionne de la mme faon, mais va supprimer la ou les
classe(s) pas d'erreur si ces classes ne sont pas prsentes ;
.hasClass("une-classe") retourne un boolen valant vrai si l'lment a la classe demande.
Pour faire ce test sur de multiples classes il est prfrable d'utiliser la mthode .is() vu dans la premire partie de ce chapitre,
pour rappel : .is("class1, .class2, .classX").
Difficile de dvelopper plus sur d'aussi simples mthodes, enchanons tout de suite avec un autre type d'attribut tout rcent : les
data-types.
Les data-* du HTML5
Rappels : que sont les data-* ?
Rafrachissons-nous la mmoire, ou dcouvrez pour ceux qui ne connaissent pas les data-*. Il arrivait frquemment
auparavant de devoir utiliser l'attribut rel ou des lments en display: none; pour stocker des informations relatives la
page utiliser en JavaScript. Par exemple, dans un formulaire, il arrive qu'il soit ncessaire de multiplier un champ X fois, autant
de fois que l'utilisateur le voudra (ajouter des membres une conversation prive, tags, catgories...). Dans ce cas prcis en
gnral on utilisait la technique consistant cacher l'lment original et le dupliquer autant de fois que ncessaire. Avec le
HTML5, nous avons la possibilit de rajouter des attributs au format data-* o * vaut ce que l'on souhaite. Dans notre
situation nous pourrions avoir dans la div qui contient tous les membres de la conversation prive, un data-membre qui
contiendrait le modle d'un nouveau champ pour ajouter un membre.
Code : HTML
<div data-membre="<input type="text"
name="membres[]" placeholder="Pseudo">">
<input type="text" name="membres[]" placeholder="Pseudo">
</div>
Il n'y aura plus qu' rcuprer le HTML dans l'attribut data-membre et l'afficher en dessous avec .append() par exemple.
Certains malins, dirons qu'il n'y a qu' dupliquer la ligne existante. Oui, mais ici c'est un cas simple, imaginez avec un label ayant
un id="membre{{id}}", il faudra gnrer l'id en JavaScript, on voit alors l'intrt des data-*.
De multiples utilisations sont possibles, certaines fois on va tout simplement y stocker des informations pour les rutiliser plus
tard, d'autres fois elles seront dj prsentes dans le HTML sa gnration, il faut juste retenir que c'est un espace de stockage.
Il est bien sr possible d'avoir plusieurs data-* sur un mme lment.
data-* et jQuery
Ces attributs sont un peu spciaux, jQuery a prvu deux mthodes pour faciliter leur rcupration, bien que faisable avec
.attr() qui servira par ailleurs s'il y a besoin de modifier la valeur d'une data-*.
.data() rcupre un objet JavaScript contenant tous les data-* et accessible comme dans l'exemple qui suit ;
.data("nom") rcupre la valeur qui est dans l'attribut data-nom.
Gardons la mmoire fraiche et enchanons avec un exemple, celui de tout l'heure, mais complt :
Code : JavaScript
$('<p/>').attr({
'id' : 'main-content',
'class' : 'overlay full-width bg-black',
'data-edit-url' : '/admin/main-content/edit',
'data-delete-url' : '/admin/main-content/delete'
}).appendTo('body');
// Rcuprer tous les data-*
var datas = $('p').data();
var editURL = datas.editUrl; // Attention ici, les tirets sont
retirs et la lettre suivante est en majuscule
var editUrl2 = $('p').data("edit-url"); // Revient la mme chose
qu'au dessus sans passer par une variable
Pour supprimer un data-* il faut passer par .removeAttr('data-*') pour que a ait effet sur le code HTML
directement. Il ne faut pas confondre avec .removeData() qui ne supprimera que la valeur en mmoire gre par le
JavaScript.
Nous sommes plein d'outils plus pratiques les uns que les autres, mais vous n'tes pas au bout de vos dcouvertes, il y a encore
tant de choses voir !
Le fonctionnement des mthodes n'a plus aucun secret pour vous !
N'hsitez pas vous rfrer la documentation officielle de jQuery lorsque vous voulez des dtails sur une fonction ou tout
autre point concernant jQuery. Si vous le souhaitez, vous pouvez partager votre plugin sur le site de jQuery dans la partie qui est
consacre ceux-ci.

Jquery Dynamisez Vos Pages Plus Simplement

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery Dynamisez Vos Pages Plus Simplement

Uploaded by

Copyright:

Available Formats

jQuery, dynamisez

vos pages plus

You might also like