JQuery_SiteDuZero

7/29/2019 JQuery_SiteDuZero

1/30

jQuery, dynamisezvos pages plus

simplement !Par Alex-D

www.siteduzero.com

Licence Creative Commons 6 2.0Dernire mise jour le 12/07/2012
http://www.siteduzero.com/


2/30

Sommaire

2Sommaire ...........................................................................................................................................1Lire aussi ............................................................................................................................................3jQuery, dynamisez vos pages plus simplement ! ...............................................................................

3Partie 1 : Premiers pas avec jQuery ...................................................................................................4Introduction jQuery .........................................................................................................................................................4Prsentation ................................................................................................................................................................................................................4Les limites de productivit de JavaScript ....................................................................................................................................................................5jQuery, une bibliothque JavaScript ............................................................................................................................................................................5Installation ...................................................................................................................................................................................................................5Tlchargement ..........................................................................................................................................................................................................6Ajout de jQuery nos pages HTML ............................................................................................................................................................................8Hello World, le grand classique ...................................................................................................................................................................................8jQuery() ou $() ? ..........................................................................................................................................................................................................9jQuery() ou $() ? ..........................................................................................................................................................................................................

9Les Slecteurs ...................................................................................................................................................................10Les slecteurs CSS ...................................................................................................................................................................................................10Comment utiliser les slecteurs ? .............................................................................................................................................................................10Les slecteurs CSS compatibles avec jQuery ..........................................................................................................................................................12Rsum .....................................................................................................................................................................................................................

13Les pseudos-classes gres par jQuery ...................................................................................................................................................................13La ngation ................................................................................................................................................................................................................13Les Formulaires ........................................................................................................................................................................................................14Les Enfants ...............................................................................................................................................................................................................16Pair ? Impair ? ...........................................................................................................................................................................................................

17Les Mthodes ..................................................................................................................................................................17Qu'est-ce qu'une mthode ? .....................................................................................................................................................................................17Utilisation ...................................................................................................................................................................................................................17Les mthodes simples proposes par jQuery ...........................................................................................................................................................18Paramtres et enchanements de mthodes ............................................................................................................................................................18Des paramtres ? O a ? ........................................................................................................................................................................................19Les diffrentes formes de paramtres .......................................................................................................................................................................20Plusieurs mthodes la suite ...................................................................................................................................................................................

20Mthodes principales ......................................................................................................................................................21Mthodes traversantes ..............................................................................................................................................................................................21Parcourir un objet jQuery ..........................................................................................................................................................................................

24Contraintes et comparaisons ....................................................................................................................................................................................25Rsum .....................................................................................................................................................................................................................25Gestion du contenu ...................................................................................................................................................................................................26Rcupration et remplacement du contenu ..............................................................................................................................................................26Ajout de contenu .......................................................................................................................................................................................................27Supprimons ! .............................................................................................................................................................................................................27Crer de nouveaux nuds dans le DOM ..................................................................................................................................................................28Manipuler les attributs ...............................................................................................................................................................................................28Les attributs en gnral .............................................................................................................................................................................................28Les classes ...............................................................................................................................................................................................................29Les data-* du HTML5 ................................................................................................................................................................................................

2/31

www.siteduzero.com
http://www.siteduzero.com/http://-/?-


3/30

jQuery, dynamisez vos pages plus simplement !

Par Alex-D

Mise jour : 12/07/2012Difficult : Facile

133 visites depuis 7 jours, class 520/797

l'heure du Web 2.0 et bientt du Web 3.0, les bibliothques et frameworks JavaScript jailliss ent pour combler la complexit et lemanque de soupless e du langage. L'une des plus clbres et rependues se dnomme jQuery. Vous naviguez chaque jour sur dessites qui utilisent jQuery, commencerpar le Site du Zro.

jQuery es t une bibliothque des tine simplifier l'criture de vos codes JavaScript. Grce cette librairie vous pourrezdynamiser plus facilement vos pages web. En effet, la bibliothque est lgre, simplifie l'adaptation tous les navigateurs (vousn'crivez qu'un code sans vous soucier des diffrences entre navigateurs), possde une syntaxe lgante et homogne quis'apprend rapidement (beaucoup moins verbeuse que le JavaScript pur , mais toutefois cette syntaxe ne plait pas tout lemonde), et pour finir, sans limites grce la notion deplugin 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 estfort 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 expliquss'ils changent du XHTML.

Site rechargement as ynchrone - Application mathmatique en ligne - Plugin de carrousel paramtrable

Aperu de sites, applications et plugins utilisant jQuery

Sommaire 3/31

www.siteduzero.com
http://uploads.siteduzero.com/files/360001_361000/360708.jpghttp://uploads.siteduzero.com/files/360001_361000/360711.jpghttp://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.htmlhttp://www.siteduzero.com/http://nivo.dev7studios.com/demos/https://www.abettercalculator.com/chttp://www.voyoucommunications.com/http://uploads.siteduzero.com/files/360001_361000/360709.jpghttp://uploads.siteduzero.com/files/360001_361000/360711.jpghttp://uploads.siteduzero.com/files/360001_361000/360708.jpghttp://www.siteduzero.com/tutoriel-3-309961-dynamisez-vos-sites-web-avec-javascript.htmlhttp://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.htmlhttp://ejohn.org/http://plugins.jquery.com/http://fr.wikipedia.org/wiki/Web_3.0http://fr.wikipedia.org/wiki/Web_2.0http://www.siteduzero.com/tutoriels-les-plus-visiteshttp://www.siteduzero.com/tutoriel-21-683621-jquery-dynamisez-vos-pages-plus-simplement.htmlhttp://www.siteduzero.com/membres-294-154073.html


4/30

Partie 1 : Premiers pas avec jQuery

Cette bibliothque va vous permettre de coder plus simplement et p lus rapidement car vous n 'aurez pas vous s oucier desdiffrentes interprtations du JavaScript selon les navigateurs. jQuery es t trs simple comprendre et utiliser mais ncessitenanmoins quelques petites prcisions, notamment s ur l'optimisation de son import sur vos pages web.

Introduction jQueryjQuery es t trs s imple comprendre et utiliser, mais ncessite nanmoins quelques petites prcisions. Nous verrons en quoijQuery s implifie l'criture ains i que l'opt imisation de son import sur vos pages web. Nous finirons par le class ique Hello Worldpour 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 unepanoplie de navigateurs ayant chacun une dclinaison de versions : Internet Explorer 6 10, Firefox 3 10, Opera, Chrome, pourne citer que les plus rpandus. Rien qu 'avec ceux-l, il vous faudrait faire une srie de tes ts de vos codes pour vrifier leurfonctionnement sur chacun d'eux. En effet il vous serait ncessaire d'crire plusieurs portions de code pour pallier aux diffrentesinterprtations des multiples moteurs JavaScript. Vous obtenez alors une syntaxe barbante et vous souciez perptuellement de lacompatibilit 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

returnwindow.pageYOffset;} elseif( document.body && (document.body.scrollTop) ||

navigator.appName=="Microsoft Internet Explorer") { // DOM returndocument.body.scrollTop;

} elseif( document.documentElement &&(document.documentElement.scrollTop) ) { // Internet Explorer 6 returndocument.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 lafonction comme ceci :

Code : JavaScript - scrollTop avec jQuery

var defil = $(document).scrollTop();

Une criture lourde

JavaScript peut tre trs intressant et puiss ant ut iliser 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 plussimples. 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

www.siteduzero.com


5/30

slogan Write less, do more qui signifie crivez moins pour en faire plus . Voici un exemple pour vous convaincre. Vousvous trouvez dans la situation ou vous souhaitez afficher un mess age aux visiteurs u tilisant Internet Explorer, sans bibliothqueil 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 vousmche le travail pour que vous puiss iez dvelopper plus rapidement ce que vous souhaitez. Cela implique, videmment, queJavaScript soit activ au sein du navigateur du visiteur pour que vos s cripts fonctionnent. Il est bon de s avoir que l'expression dvelopper en jQuery es t fauss e, dvelopper en JavaScript en utilisant la bibliothque jQuery est p lus correcte.

... parmi tant d'autres !

Il existe bien d'autres bibliothques JavaScript dont la plus connue avec jQuery est trs certainement Mootools. Vous pourrez lestrouver via une s imple recherche sur les mots -cls bibliothque JavaScript s ur 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 utilisentplusieurs 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 nousallons voir dans la partie suivante.

InstallationEntrons 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 compress ions poss ibles :

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 es t prvu pour tre lu et/ou pour dvelopper avec pour contribuer au


www.siteduzero.com
http://code.jquery.com/jquery.jshttp://www.siteduzero.com/http://code.jquery.com/jquery.jshttp://code.jquery.com/jquery.min.jshttp://jquery.com/http://mootools.net/


6/30

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 voustes 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 s ur le rfrencement naturel de celle-ci.

Copiez le fichier vers votre projet. Je vous suggre l'adresse /js/libs/jquery.min.jspour une organisation optimale devos scripts. En effet, si vous utilisez plusieurs bibliothques (library en anglais, d'o libs ) vous pourrez les s parer de vos

propres scripts en les rangeant dans un dossier distinct. Il n'est en aucun cas obligatoire de ranger ce fichier cet endroit, vouspouvez 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 choisirad'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 cons ole, il existe la commandeCode : 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-8sans BOM ;Eclipse : cliquez sur Window > Prfrences > dans le menu de gauche s ur General > en bas sur Workspace > dans la boiteText 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 s itue 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 faireproprement.

La balise script

La manire la plus classique et s re pour que l'import s oit effectu sans souci est certainement l'utilisation de la balise script versle fichier tlcharg pralablement. Pour rappel la balise script se prsente ainsi :

Code : HTML


www.siteduzero.com


7/30

Vous pourrez noter que je ne prcise pas type="text/javascript"car je considre que l'on dveloppe enHTML5. Celui-ci considrant la balise script comme contenant du JavaScript par dfaut.Si vous dveloppez votre site dans une vers ion antrieure HTML5, la bonne syntaxe sera

Il est noter que les fichiers JS se chargent de manire synchrone : tant que le premier fichier JS n'est pas charg, le navigateurne continue pas l'affichage de la page, il attends d'avoir la totalit du fichier pour continuer avancer. Ainsi, pour fluidifier lechargement, on prfrera placer les fichiers JS aprs tout le contenu pour que celui-ci ne soit charg qu'une fois que notrevisiteur a de quoi se mettre sous la dent. La balise script est donc placerjuste avant la fermeture du body, aprs tout votrecontenu. 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 ets'excutera immdiatement.

Attention, jQuery s era utilis par vos fichiers *.js chargs via cette balise script, veillez donc placer l'import de jQuery avant lesdiffrents imports de vos s cripts . En effet, les s cripts sont chargs un un dans l'ordre o ils s ont placs dans le code HTML. Sivous 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 s uivant :

Code : HTML

Titre

Contenu de la page

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 trsbien configur, le fichier jquery.min.js es t dj en cache chez le visiteur. Quoi de mieux que d'utiliser le cache navigateur devotre 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 v isiteur se rend s ur un s ite< 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 parle 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 u tiliserons galement la balise s cript, nous allonssimplement 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


www.siteduzero.com


8/30

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 unesolution de secours. Nous alors donc nous ress ervir de notre fichier en local avec une petite touche de JavaScript. Nousobtenons alors quelque chose comme cela :

Code : HTML

Titre

Un paragraphe ici
window.jQuery ||document.write('')
La ligne de JavaScript s ignifie que s 'il n'y a pas jQuery, c'est que l'import juste au dess us 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 tantcertains de la disponibilit de jQuery.

Hello World, le grand classiquePour savoir si vous avez russi importer jQuery convenablement, voici un Hello World utilisant jQuery.

Code : HTML

Titre

Un paragraphe
window.jQuery ||document.write('') $('body p').html('Hello World');
Vous comprendrez mieux la petite ligne de code ds la prochaine partie.

Si vous voyez encore Un paragraphe c'est que jQuery n'es t pas import, vrifiez donc les tapes prcdentes . Si votre pageaffiche 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 ! Eneffet, elle va nous servir un peu partout.


www.siteduzero.com


9/30

jQuery() ou $() ?

L'heure est au choix, si vous tes prudents vous prfrerez prvenir les conflits, si vous tes certains que vous n'utiliserez quejQuery, 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 dejQuery, il faudra y faire appel. Le souci c'est que jQuery n'est pas la seule librairie JavaScript a avoir choisi cet alias, si vousutilisez plusieurs librairies, vous allez avoir des conflits s i vous ne protgez pas les diffrentes parties de code, pour ce faire c'esttrs simple :

Code : JavaScript

jQuery(document).ready(function($){ // L on peut utiliser $() en ayant la certitude que c'estjQuery, 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 estdans la fonction. Le mieux reste de coder proprement et d'importer jQuery tout en bas du body puis de faire/importer nos scriptsqui l'utilisent. Le chargement d 'une page HTML est synchrone, c'est--dire qu'ils s ont chargs dans l'ordre qu'ils apparaiss ent

dans le code, de fait, si jquery.js est plac avant notre script.js, rien ne sert de faire cette vrification puisque c'est ledernier 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 utiliserdirectement $() en veillant toujours avoir import jQuery plus haut dans la page (en gnral, juste avant notre script). Si vous

procdez ains i, 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 pass ez par l'API Google, vous pouvezapprendre la premire brique fondamentale de jQuery que sont les slecteurs.


www.siteduzero.com


10/30

Les SlecteursPour 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 s lection des lments des pages . La bibliothque rutilise le potentiel des slecteurs CSS en lescompltant de s lecteurs additionnels.

Les slecteurs CSS

Les slecteurs que vous connaiss ez certainement et utilisez en CSS sont pratiques et permettent de cibler prcisment n'importequel lment d 'une page bien cons truite. Si nous pouvions les utiliser en JavaScript, cela serait quand mme bien plus pratiqueque les getElementById() et autres fonction au nom rallonge, non ? Eh bien, avant de dvelopper jQuery, son crateuravait cr Sizzle : une bibliothque JavaScript qui permet la slection des lments avec les slecteurs CSS. Celle-ci a t intgre jQuery, qui profite ains i de la souplesse d'utilisation de Sizzle. Voyons ds maintenant comment s lectionner un lment.

Comment utiliser les slecteurs ?

Les s lecteurs que nous allons voir par la su ite sont utiliser trs simplement de la faon suivante :Code : JavaScript

jQuery("");// Si on utilise uniquement jQuery ou que l'on est// dans un contexte bien dfini, $ est un alias de jQuery$("");

En s achant que sera votre slecteur constitu des lments dtaills ci-aprs.

Attention toutefois, si vous utilisez des caractres spciaux dans vos slecteurs !"#$%&'()*+,./:;?@[\]^`{|}~ ilfaudra les protger en les prcdant d'un double backslash \\. Par exemple pour slectionner cet lment HTML :5il faudra faire ainsi : $("head\\.nav\\.link\\.lbl");. Le mieuxtant de ne pas utiliser ce genre de caractres pour viter tout problme dans le CSS comme dans le JavaScript.

Un slecteur$(""); 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. jQueryest 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 leslments html, body, ... ce qui n'est gnralement pas dsir. On l'utilisera plutt pour rcuprer tous les lments l'intrieurd'un autre, par exemple : header nav * pour rcuprer tous les lments dans les nav des header.

Le nom de la balise HTML

Expression :elemExemples :span ; div ;p ; sectionOn rcuprera alors tous les lments qui sont ce type d'lment. Il est galement possible de chaner les lments : elem1elem2 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 s uite aprs un elem1 ;elem1~elem2 : pour chaque elem1, on va chercher tous les lments elem2 suivant elem1 dans le mme


www.siteduzero.com


11/30

parent .

La chanabilitit des slecteurs elemX est galement applicable aux slecteurs qui vont suivre.

L'id

Expression :#idExemple :#part_2Slectionne l'lment ayant l'id id. Normalement, ce s lecteur ne renvoie qu'un lment puisqu'un id est cens tre unique. Lesid sont galement chanables, comme indiqu plus haut, bien qu'en soit cela so it inutile puisqu'un id es t thoriquement ddi un s eul lment, pas besoin de filtrer travers un lment parent.

La classe

Expression :.classExemple :.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 desslecteurs de classe ont bien un s ens. En effet, une class e est faite pour tre utilis plusieurs endroits, on pourra donc trouverdes choses comme .titre_1.ico ou encore #corpsh3.ico. On peut galement filtrer avec plusieurs classes sur lemme 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 s oit 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 valeurval.

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 parval ;elem[attr$="val"] : l'inverse ici attr doit exactement terminer parval.elem[attr*="val"] :attr doit simplement contenirval.

Des slecteurs du mme genre, mais un peu plus particuliers, ils sont bas s s ur 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 elemdont l'attribut attr sera s trictement gal val ou bien, que lavaleur de l'attribut s oit 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 casextrmes pourrait donner des choses comme ceci : a[href^="#"][data-bulle="true"][data-truc|="une-valeur"][data-class="js"]


www.siteduzero.com


12/30

Slecteur multiple

Parfois nous voulons avoir deux slecteurs diffrents et leur faire subir le mme traitement. Pour cela, comme en CSS, on peutsparer 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-classeExemple :a:nth-child(2n)Sizzle permet d 'utiliser toutes les pseudos -class es que propos e CSS3 lexception de celles qui su ivent :

::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"].contenua[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 class es js etcssgradient, puis il y trouvera un lment ayant l'id corps qui a un ou des enfant(s) direct(s) section. Nous avons faitune partie du chemin, mais a n'est pas fini. Dans les section trouves, on cherche alors les paragraphesp ayant un id qui

contient la suite de caractres "part" et qui a galement la classe contenu. Dans ces paragraphes on ira chercher les lmentsayant 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

...

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 doncla documentation officielle des slecteurs CSS3 : http://www.w3.org/TR/css3-selectors/ .


www.siteduzero.com
http://www.siteduzero.com/http://www.w3.org/TR/css3-selectors/


13/30

Les pseudos-classes gres par jQueryComme je vous l'avais promis, nous voil au moment ou nous allons dcouvrir les pseudo-class es CSS que jQuery gre, maisauss i celles que jQuery ajoute. Pas de s ouci se faire au niveau des pseudo-classes CSS, elles s ont compatibles toutnavigateurs puisque c'est jQuery qui gre tout cela. Les ps eudo-classes vont nous permettre de slectionner certains lmentsencore 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 -class es 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 t rs important d'avoir connaissance de la ngation pour viter une srie de slecteurs la place d'un. Il s'agit de lapseudo-class e :not('selecteur') dont il est ici question. Il est poss ible d'tre dans la situation o nous avons 3 tailles pour nosliens : .small,.normal,.big et que l'on veuille ne slectionner que les .small et les .normal. Pour l'utiliser c'esttrs 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 slecteursplus 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 leserveur, par exemple. Ou encore, envoyer les donnes en asynchrone (AJAX). Pour pouvoir envoyer ces informations, cesvaleurs, il va nous falloir les rcuprer dans la page. Une premire solution, qui vous vient naturellement l'esprit avec ce quevous 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 :;bouton de remise zro :;bouton de soumission :;bouton de soumission en image :.

En HTML5, il est possible et recommand de ne pas fermer la balise input.

jQuery propose une ps eudo-class e ass ocie respectivement chacun de ces boutons :

:button

:reset:submit:image

Les noms tant directement repris des types , quoi de plus s imple retenir ?


www.siteduzero.com


14/30

Les champs

Le plus impos ant des champs est certainement textarea, mais ayant une balise rien qu' lui, pas bes oin de pseudo-class e. Enrevanche pour les champs de texte et mot de pas se, cela devient intressant :

champ texte :plus connus ainsi :;champ mot de passe :

;

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-class e, en effet ils sont privilgis tout comme les textarea avec une baliseddie et donc simplement slectionnable.Toujours selon le mme modle :

bouton radio :;checkbox :;

Pour slectionner ces lments nous auront donc, vous l'aurez devin :

:radio:checkbox

Mais, ce qui est trs intress ant c'est que l'on peut galement filtrer les champs radio/checkbox qui sont cochs grce lapseudo-class e :checked. Il est donc pos sible, par exemple, de rcuprer toutes les checkbox coches en faisant$(":checkbox:checked").

Le champ d'envoi de fichier

Dernier type de champs s lectionnable avec une pseudo-classe implmente par jQuery : les champs de type fileavec la pseudo-classe :file, comme vous auriez pu vous en douter.

Les tats des champs

Les champs input peuvent tre dsact ivs comme ceci :. C'est galement valable pourles autres balises qui composent un formulaire (textarea, select, ...). Ainsi, ils sont affichs mais l'utilisateur ne peut pas modifierleur valeur. jQuery nous a une fois de plus concoct une pseudo-class e pour slectionner les champs activs et une autre pourles 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-cifonctionne sur tous les lments, mme en dehors des formulaires, mais elle est particulirement utile dans ce contexte.

Les Enfants


www.siteduzero.com


15/30

Nous avions vu dans la partie prcdente des slecteurs permettant de slectionner certains enfant , mais voici quelquespseudos-classes s upplmentaire bien pratiques , qui combines d'autres permettront de contourner le problme du non-supportde certains slecteurs CSS3.

Par rapport leur position dans leur parent

Un enfant peut tre le premier, le nime

ou encore le dernier, en s achant que le premier et le dernier sont tout simplement des casparticuliers parmi les nime pos itions . Attention toutefois, ici on ne va pas aller chercher l'lment tant la position n mais on vane 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

Lien 1 Lien 2 Lien 3 Lien 4Lien 4.1 Lien 5 Lien 6 L c'est un spanLien 7Lien 7.2 Lien 8

$premier = $('#contenu :nth-child(2)');$second = $('#contenu a:first-child');

Le premier slecteur va aller chercher dans le #content tous les lments qui ont la position 2 par rapport leur parent direct. Icion aura donc le second, le deuxime(celui qui contient Lien 4.1 ) et le deuximede chaque.Le second s lecteur ajoute une contrainte en plus : il faut que les lments potentiels s oient des. Ce qui aura ici pour effetde slectionner tous lesqui sont les premiers lments de leur parent. Ici c'est le cas pour presque tous les liens sauf Lien4.1 car il n'est pas le premier de son parent, Lien 7 c'est le premiermais pas le premier de son parent, de mme pour Lien 7.2 .

Par rapport leur position en fonction du slecteur

Les pseudo-class es qui vont s uivre 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 p lus s imples utiliser et qui vont nous

satisfaire dans la plupart des cas . Que diriez-vous de slectionner le nime paragraphe dans une div particulire ? Beaucoup plussimple comprendre, n'est-ce pas ? Voici donc trois pseudo-classes qui vont vous rappeler les prcdentes, mais dont lefonctionnement est diffrent.


www.siteduzero.com


16/30

:eq(n) qui permet de rcuprer l'lment en pos ition n (n doit tre pos itif ou nul) du type prcis (si prcis) s inonl'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 exempleCode : HTML

Un lien

Un autre lienVers une ancreRetour en haut

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)"); tandisque pour avoir Un lien on va p lutt 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. Celaest galement faisable en CSS avec la pseudo-classe :nth-child(2n) pour les pairs et :nth-child(2n+1) pour les impairs. jQuerynous offre une nouvelle fois une notation trs simplifie et, qui plus es t, fonctionne sur tous les navigateurs.Vous savez slectionner des lments dans vos pages , et ce, de diffrentes faons. Je vous invite cons ulter la documentation(en anglais) pour dcouvrir la liste complte et dtaille des slecteurs qui sont grs par jQuery cette adress e :

http://api.jquery.com/category/selectors/Que faire une fois que nous avons russ i slectionner ceux-ci ? C'est ce qui vous attend dans le chapitre suivant avec lesmthodes .


www.siteduzero.com
http://www.siteduzero.com/http://api.jquery.com/category/selectors/


17/30

Les MthodesSlectionner 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 leurdonner.

Qu'est-ce qu'une mthode ?

Souvenez-vous, nous voyions dans le chapitre prcdant les slecteurs que nous utilisions ainsi : $('#selecteur') parexemple. Ceci permet de rcuprer un objet jQuery sur lequel nous allons pouvoir appliquer des actions, modifications , ou toutsimplement de s imples 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 mthodesdiffrentes s ans devoir slectionner l'lment chaque fois. La convention sera celle-ci : une variable contenant unobjet jQuery s era 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 meilleurecomprhension de ce que cont iennent 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 faonsle contenu de nos pages. Voyons ensemble les mthodes les plus s imples 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 choixpuisque nous pouvons faire cela avec ou sans animation. En ce qui concerne les mthodes s ans animes elles s ont au nombrede 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 as sez couramment notamment lors de vos tests rapides pendant le dveloppement. Celles-ci n'ont poursimple effet que de jouer avec la proprit display en la passant block pour.show() et none pour.hide(). Pourvous prouver que je ne vous mens pas, voici le code tout prt tester :

Code : HTML

Titre


www.siteduzero.com


18/30

Un paragraphe
window.jQuery ||document.write('') $('.a-masquer').hide();
Qui, si vous allez dans votre explorateur de code via F12, devrait produire ceci :Code : HTML

Un paragraphe

Vous voyez que cette b ibliothque n'est pas magique, elle vous simplifie juste le travail en allgeant le code de vos applicationsweb utilisant le JavaScript.

Supprimer un lment

Il est parfois u tile d'allger le code source des lments qui ne s ont plus utiles, il existe pour cela une mthode toute s imple quis'applique ainsi :

Code : JavaScript

$('.delete').remove();

Celle-ci retire purement et simplement tous les lments cibls du DOM.

Paramtres et enchanements de mthodesJusqu 'ici les mthodes taient s imples, gentilles et pas trs volues ni paramtrables. Voil ce s ur quoi nous allons dsormaisnous 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 deparamtres.

O mettre les paramtres ?

La mthode .hide(), comme nombre d'autres, peut parfois prendre des paramtres, il suffit de cons ulterla documentation pourle 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 s ont lestypes des paramtres dans la documentation, avec des exemples vous permettant de mieux visualiser s i a n'tait pas le casavant.

Lire et comprendre la documentation

Continuons p lus 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 !


www.siteduzero.com
http://www.siteduzero.com/http://api.jquery.com/hide/http://api.jquery.com/hide/


19/30

Les paramtres sont dsigns par des mots entre les parenthses , ceux qui sont facultatifs tant entre crochets. Ainsi, icinous avons les paramtres duration, easinget 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 lasignature nous s ont donns les dtails s ur chacun des paramtres que nous allons voir sans plus tarder.

Pour ceux qui dveloppent souvent hors-ligne, vous pouvez tlcharger la documentation de jQuery surjQAPI.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 soitils ont un type. Dans l'exemple ci-dessus cit, la documentation nous donne les informations ncess aires :

Citation : Documentation jQuery

durationA string or number determining how long the animation will run.easing A string indicating which easing function to use for the trans ition.callbackA function to call once the animation is complete.

Alors, bien sr c'est en anglais, mais cela reste trs comprhensible. Nous avons ici la poss ibilit d'ajuster la dure de l'animationen donnant un entier/chane, de donner le nom d'une fonction de easinget une fonction de callback. Autant la dure estquelque chos e de concret, autant les deux autres termes sont moins clair pour vous .

Une fonction de easingest 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 icisi on dfini une duration gale 500ms, alors le callbacksera lanc aprs les 500ms d'animation, et mme si cette valeurest 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 fonctionsnommes. Pour rappel une fonction anonyme va tre ainsi :

Code : JavaScript

$('#selecteur').hide(500, "linear", function(){ // Votre code, une fois l'lment masqu});

jQuery c'es t avant tout du JavaScript, et de ce fait les dures sont toujours en millisecondes ! Par ailleurs , il estgalement 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'});


www.siteduzero.com
http://www.siteduzero.com/http://api.jquery.com/hide/http://www.jqapi.com/


20/30

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 u tilise, 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 del'enchanement des mthodes , c'est que ce sont plusieurs mthodes la suite. En effet, cela cons iste tout s implement appliquer

plusieurs mthodes un mme objet (sus ceptible 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 lesparamtres 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'objetdu prochain chapitre, allez-y !


www.siteduzero.com


21/30

Mthodes principalesLes principes des mthodes en poche, nous pouvons voir et comprendre les principales mthodes fournies par jQuery.

Mthodes traversantesSouvenez-vous du chapitre sur les slecteurs (oui c'est loin) et bien je ne vous ai pas encore tout dit ! En effet, il existe desmthodes 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 celatout es t 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 es t s trictement 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 class e .a-trouver. Les deuxmthodes sont identiques puisque que dans le second cas, jQuery va appeler la mthode .find(). C'est plus court crire, arevient au mme, vous de choisir ce que vous prfrez !

Le parcours

S'il y a bien une chos e qui est pratique avec jQuery, c'est de pouvoir parcourir un objet jQuery trs s implement. Lorsque vousutilisez les s lecteurs, il est poss ible que celui-ci slectionne plusieurs lments , dans ce cas vous aurez parfois besoin de lamthode .each() qui prend en paramtre une fonction de callbackcomme ceci :

Code : JavaScript

$('.selecteur').each(function(){ // Votre code});

Maintenant, les plus malicieux se sont certainement poss la quest ion suivante : comment rcuprer l'lment courant dans cetteboucle ? 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();

});


www.siteduzero.com


22/30

Le $(this) est galement disponible dans les fonctions de callbackpour rcuprer l'lment s ur lequel avait t appliqu lamthode mre . Si vous avez bien suivi, le code ci-dessus masquera tous les lments ayant la classe to-hide. Ce code es tquivalent $('.to-hide').hide(); dans le cas prsent, mais il sera utile lorsque nous devrons parcourir une listed'lment pour ensuite faire des manipulations l'intrieur.

Filtrons notre rsultat

Une fonction moins courante, mais trs u tile : .filter() ! Elle va nous permettre de ne slectionner qu'une partie deslments slectionns dans un objet jQuery. Dans les cas les plus simples a n'est spcialement utile, car trs facilementsimplifiable :

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 slectionnertout d'abord nos lments avec $('selecteur') en utilisant un s lecteur en CSS pur pour profiter de la rapidit de lafonction JavaScript querySelectorAll(). Il est galement possible d'utiliser.filter() en lui donnant en paramtre unobjet jQuery ou un lment : voir la documentation pour plus de dtails, rien ne vaut la source !

Le plus intressant dans cette mthode es t la poss ibilit de lui passer une fonction anonyme qui devra renvoyer un boolendisant 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() etdes tests dedans, .filter() nous fait a trs s implement. En voici une dmonstration :

Code : HTML

Lien 1 Lien 2 Lien 3 Lien 4Lien 4.1 Lien 5 Lien 6 L c'est un spanLien7Lien 7.2 Lien 8

$tousLesTrois = $('a').filter(function(index){ return index !=3&& index %3==0|| $('.intrus',this);

});

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 es t faux. Vous

pouvez trs largement complexifier le contenu de la fonction sachant qu'il est poss ible d'avoir l'lment courant avec $(this).


www.siteduzero.com


23/30

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 (slectionpar une classe ou un nom de balise). Souvenez-vous, il existe une ps eudo-class e introduite par jQuery nomme :eq(n), et bienelle 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 6ime 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 pourconvention 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 desentiers ngatifs. Ainsi, pour s lectionner 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 ps eudo-classe, n doit tre pos itif 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 paragraphetrouv s ur la page. Il se peut que ces deux variables contiennent le mme objet jQuery s 'il n'y a qu'un s eul 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 mthodesbien pratiques. Comme vous le savez, dans une famille il y a pour un membre des parents et des enfants . Il y a galement lesfrres et surs, c'est pareil dans le DOM et jQuery nous propose, des mthodes dont les noms sont trs inspirs pour naviguerdans 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();


www.siteduzero.com


24/30

Chacune de ces mthodes peut prendre un s lecteur en paramtre pour filtrer le rsultat. Par exemple, vous tes dans unformulaire avec le code suivant :

Code : HTML

Connexion Pseudo :

Mot de passe :

var $inputPseudo = $('#input-pseudo'); var $form = $inputPseudo.parents('form'); var $parent = $inputPseudo.parent();

Ici nous avons donc la mthode .parents() qui va aller chercher tous les parents et filtrer pour ne prendre que les,sachant qu'un input ne peut tre que dans un la fois, nous aurons forcment le seul et uniqueparent.Par ailleurs $parent va contenir laqui entoure tous lesetdans 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'lmentcourant.

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 celac'est s imple : on spcifie un slecteur qui va slectionner l'lment contenu et remonter au parent pour avoir le conteneursouhait, 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');


www.siteduzero.com


25/30

Simple n'est-ce pas ? Ceci va rcuprer tous lesqui ont au moins un 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 'unavec undedans.

noter que .is() peut tester plusieurs chos es en mme temps sur le mme lment, il suffit pour a de sparer les tests parune 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 lesqui contiennent eux-mme deset on va chercher dans cestous lesqui sont dans des. Une fois que nous sommes ici, on remonte au parent et on masque tous les lments frres quisuivent celui-ci. Une fois que l'animation est termine, on fait un test sur chaque lment masqu pour s avoir si c'est un

paragraphe (ce qui est poss ible puisqu 'on masque tous les lments s uivants unsi vous avez suivi) : s'il c'est le cason le masque s inon 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 s ans l'explication :BRAVO !

Gestion du contenuTout 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 unefoultitude de mthodes qui permette de manipuler le contenu : ajout, modification, suppress ion...


www.siteduzero.com


26/30

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 lesbesoins :

.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 desgetters et dessetters. Si elles s ont utilises s ans paramtre elles vont retourner le contenu, s inonelles 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 "

Salut tous !
" s'il existe un p dans la
page, bien sr

// On peut galement utiliser les getters et setters en mme tempspour ajouter du contenu par exemple$elem = $('p');$elem.html("Salut tous !"+ $elem.html())

Mais dans ce second cas, nous allons voir que des mthodes plus s imples 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 propos e 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 objetjQuery. Attention toutefois s 'il s'agit d'un lment de la page, celui-ci sera supprim aprs l'opration s i vous l'utilisez comme ceci:

Code : HTML

Mon ami !
Hey !
$('p').append('span');

Alors, on aura le code HTML suivant aprs excution du code :


www.siteduzero.com


27/30

Code : HTML

Mon ami !Hey !

Ajout avant/aprsOn peut vouloir ajouter du contenu avant ou aprs un lment existant, notamment lorsque l'on veut crer un nouveau nuddans 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'lmentcourant ;.after() et .insertAfter() sont quivalentes .append() et .appendTo()mais APRS l'lment courant.

Comme toujours, petite illustration :

Code : HTML

Salut !

$('p').after("Comment vas-tu ?");

Donnera ceci aprs excution du code :

Code : HTML

Salut !
Comment vas-tu ?
Supprimons !

Aprs avoir ajout du contenu, quoi de plus normal que de vouloir en retirer ? Il est pos sible de supprimer uniquement lecontenu texte ou bien de s upprimer le nud HTML directement. Voici les s pcifications 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 ncess aire 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


www.siteduzero.com


28/30

paragraphe avec du contenu il est prfrable de faire comme ceci :

Code : JavaScript

var contenu ="Salut ! Je suis du texte mettre dans unparagraphe";$("
").append(contenu);
En effet, $("
") ou $("") va rellement crer un nouveau nud dans le DOM tandis que$("
"+contenu+"
"); va faire appel innerHtml qui est plus rapide dans le cas de gross es 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 poss ible de faire toutce que l'on voudra.

Manipuler les attributsNos pages sont cons titues de balises qui comportent de nombreux attributs , ceux-ci sont primordiaux dans le fonctionnement

d'une page web. Il est pos sible en JavaScript de les manipuler, et comme toujours jQuery nous propose des mthodes as sezsimples que je vous dcouvrir ensemble.

Les attributs en gnral

Rcuprer et soumettre des valeurs

Tout comme .text() il existe .attr() qui sert la fois degetteret desetter. Voici les dtails de cette mthode pas des plussimples que l'on ait vu :

.attr("attribut") est legetterqui prend en paramtre le nom de l'attribut, il retournera alors sa valeur ;

.attr("attribut", "valeur") est la version la plus simple dusetterqui va mettre l'attribut la valeursouhaite ;.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

$('
').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 es t tellement s imple 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


www.siteduzero.com


29/30

toujours, nous avons une mthode par actions , celles-ci sont : ajouter, supprimer, tester, ... class ique ! Quoi de plus simple qued'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 s i dj prsente(s) ;.removeClass("une-classe autre-classe") fonctionne de la mme faon, mais va supprimer la ou lesclasse(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'auss i simples mthodes, enchanons tout de suite avec un autre type d 'attribut tout rcent : lesdata-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 frquemmentauparavant 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 so it ncessaire de multiplier un champ X fois, autantde fois que l'utilisateur le voudra (ajouter des membres une conversation prive, tags , catgories...). Dans ce cas prcis engnral on utilisait la technique cons istant cacher l'lment original et le dupliquer autant de fois que nces saire. Avec leHTML5, nous avons la poss ibilit de rajouter des attributs au format data-* o * vaut ce que l'on souhaite. Dans notresituation nous pourrions avoir dans la div qui contient tous les membres de la conversation prive, un data-membre quicontiendrait le modle d'un nouveau champ pour ajouter un membre.

Code : HTML

Il n'y aura plus qu' rcuprer le HTML dans l'attribut data-membre et l'afficher en dess ous 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 s implement y stocker des informations pour les rutiliser plustard, d'autres fois elles s eront 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 s pciaux, 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 :


www.siteduzero.com


30/30

Code : JavaScript

$('
').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 sontretirs et la lettre suivante est en majusculevar editUrl2 = $('p').data("edit-url"); // Revient la mme chosequ'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 leJavaScript.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 encoretant 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 toutautre point concernant jQuery. Si vous le souhaitez, vous pouvez partager votre plugin sur le site de jQuery dans la partie qui estconsacre ceux-ci.

http://docs.jquery.com/

Documents

JQuery_SiteDuZero