Jquery - Simplifiez Et Enrichissez Vos Developpements Javascript

5/21/2018 Jquery - Simplifiez Et Enrichissez Vos Developpements Javascript

http:///reader/full/jquery-simplifiez-et-enrichissez-vos-developpements-javascript

Rfrence

Rseauxet tlcom

Programmation

Dveloppementweb

Scurit

Systmedexploitation

jQuery

Simplifi ez et enrichissezvos dveloppements JavaScrip

J. Chaffer et K. SwPrfac par John Resing, crateur de

http://www.free-livres.com/



jQuerySimplifiez et enrichissez vosdveloppements JavaScript

Jonathan Chaffer

Karl Swedberg

Traduit par Herv Soular

avec la contribution technique de Didier Mouronva



Pearson Education France a apport le plus grand soin la ralisation de ce livre afin de vous fournir une information complte et fiable. Cependant, Pearson Education France nassume de responsabilits, ni pour son utilisation, ni pour les contrefaons de brevets ou atteintes aux droits de tiercepersonnes qui pourraient rsulter de cette utilisation.

Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illustrer les descriptions thoriques. Ils ne sont en aucun cas destins une utilisation commerciale ou professionnelle

Pearson Education France ne pourra en aucun cas tre tenu pour responsable des prjudices oudommages de quelque nature que ce soit pouvant rsulter de lutilisation de ces exemples ouprogrammes.

Tous les noms de produits ou marques cits dans ce livre sont des marques dposes par leurpropritaires respectifs.

Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2 et 3 adu Code de la proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson EducatioFrance ou, le cas chant, sans le respect des modalits prvues larticle L. 122-10 dudit code.

No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanicaincluding photocopying, recording or by any information storage retrieval system, without permission fromPearson Education, Inc.

Publi par Pearson Education France47 bis, rue des Vinaigriers75010 PARISTl. : 01 72 74 90 00www.pearson.fr

ISBN : 978-2-7440-4142-6Copyright 2009 Pearson Education FranceTous droits rservs

Titre original :Learning jQuery 1.3

Traduit de lamricain par Herv Soulard

Contribution technique : Didier Mouronval

ISBN original : 978-1-847196-70-5Copyright 2009 Packt PublishingAll rights reserved

dition originale publie par Packtwww.packtpub.com



Table des matires

Avant-propos ..................................................................................................................... VII

Prface ldition franaise ............................................................................................ IX

propos des auteurs ........................................................................................................ XI

Prface ............................................................................................................................... XIIIOrganisation du livre ..................................................................................................... XIIIPrrequis ........................................................................................................................ XVPublic du livre................................................................................................................ XVIConventions typographiques ......................................................................................... XVIVotre avis ....................................................................................................................... XVIITlcharger le code........................................................................................................ XVII

1 Premiers pas ................................................................................................................ 11.1 Intrt de jQuery................................................................................................. 21.2 Efficacit de jQuery............................................................................................ 31.3 Historique du projet jQuery................................................................................ 41.4 Premire page web avec jQuery......................................................................... 5

1.5 En rsum........................................................................................................... 12

2 Slecteurs ..................................................................................................................... 132.1 Le DOM ............................................................................................................. 132.2 La fonction $().................................................................................................... 142.3 Slecteurs CSS ................................................................................................... 152.4 Slecteurs dattribut............................................................................................ 182.5 Slecteurs personnaliss ..................................................................................... 202.6 Mthodes de parcours du DOM ......................................................................... 242.7 Accder aux lments du DOM ......................................................................... 272.8 En rsum........................................................................................................... 27

3 vnements .................................................................................................................. 293.1 Effectuer des tches au chargement de la page .................................................. 293.2 vnements simples ........................................................................................... 333.3 vnements composs........................................................................................ 423.4 Le priple dun vnement................................................................................. 453.5 Modifier le priple : lobjet event....................................................................... 47



IV Table des matires

3.6 Retirer un gestionnaire dvnements ................................................................ 523.7 Simuler une action de lutilisateur...................................................................... 553.8 En rsum........................................................................................................... 59

4 Effets ............................................................................................................................ 614.1 Modifier les styles CSS ...................................................................................... 614.2 Bases du masquage/affichage............................................................................. 664.3 Effets et vitesse................................................................................................... 684.4 Effets composs.................................................................................................. 694.5 Crer des animations personnalises.................................................................. 714.6 Effets simultans ou squentiels......................................................................... 754.7 En rsum........................................................................................................... 82

5 Manipulation du DOM............................................................................................... 835.1 Manipuler des attributs....................................................................................... 83

5.2 Insrer de nouveaux lments ............................................................................ 875.3 Dplacer des lments ........................................................................................ 895.4 Envelopper des lments .................................................................................... 975.5 Copier des lments............................................................................................ 985.6 Les mthodes du DOM en bref .......................................................................... 1055.7 En rsum........................................................................................................... 107

6 AJAX............................................................................................................................ 1096.1 Charger des donnes la demande..................................................................... 1106.2 Choisir le format des donnes ............................................................................ 1256.3 Passer des donnes au serveur............................................................................ 126

6.4 Surveiller la requte............................................................................................ 1326.5 AJAX et les vnements..................................................................................... 1366.6 Questions de scurit.......................................................................................... 1376.7 Autres solutions.................................................................................................. 1396.8 En rsum........................................................................................................... 144

7 Manipulation des tables ............................................................................................. 1457.1 Tri et pagination ................................................................................................. 1467.2 Modifier laspect de la table............................................................................... 1737.3 En rsum........................................................................................................... 197

8 Manipulation des formulaires.................................................................................... 1998.1 Amliorer un formulaire de base........................................................................ 1998.2 Formulaires compacts......................................................................................... 2228.3 Manipuler des donnes numriques ................................................................... 2368.4 En rsum........................................................................................................... 257



Table des matires V

9 Carrousels et prompteurs .......................................................................................... 2599.1 Prompteur de nouvelles ...................................................................................... 2609.2 Carrousel dimages............................................................................................. 2769.3 En rsum........................................................................................................... 301

10 Utilisation des plugins ................................................................................................. 30310.1 Rechercher des plugins et de laide.................................................................... 30310.2 Utiliser un plugin................................................................................................ 30410.3 Le plugin Form................................................................................................... 30510.4 La bibliothque jQuery UI ................................................................................. 30710.5 Autres plugins recommands ............................................................................. 31710.6 En rsum........................................................................................................... 328

11 Dveloppement de plugins ......................................................................................... 32911.1 Ajouter de nouvelles fonctions globales ............................................................ 329

11.2 Ajouter des mthodes lobjet jQuery............................................................... 33311.3 Mthodes de parcours du DOM ......................................................................... 33711.4 Ajouter des mthodes abrges .......................................................................... 34011.5 Paramtres dune mthode ................................................................................. 34411.6 Ajouter une expression de slection................................................................... 35311.7 Distribuer un plugin............................................................................................ 35511.8 En rsum........................................................................................................... 357

Annexe A Ressources en ligne ....................................................................................... 359A.1 Documentation sur jQuery ................................................................................. 359A.2 Rfrences JavaScript......................................................................................... 360A.3 Compacteurs de code JavaScript........................................................................ 361A.4 Rfrence (X)HTML.......................................................................................... 361A.5 Rfrences CSS.................................................................................................. 362A.6 Blogs................................................................................................................... 362A.7 Frameworks de dveloppement web utilisant jQuery ........................................ 365

Annexe B Outils de dveloppement .............................................................................. 367B.1 Outils pour Firefox ............................................................................................. 367B.2 Outils pour Internet Explorer ............................................................................. 368B.3 Outils pour Safari ............................................................................................... 369

B.4 Outils pour Opera ............................................................................................... 370B.5 Autres outils ....................................................................................................... 370

Annexe C Fermetures en JavaScript ............................................................................ 373C.1 Fonctions internes............................................................................................... 373C.2 Interactions entre fermetures .............................................................................. 377



VI Table des matires

C.3 Fermetures dans jQuery...................................................................................... 378C.4 Dangers lis aux fuites de mmoire ................................................................... 381C.5 En rsum........................................................................................................... 384

Annexe D Rfrence rapide ........................................................................................... 385D.1 Expressions de slection..................................................................................... 385D.2 Mthodes de parcours du DOM ......................................................................... 387D.3 Mthodes dvnement....................................................................................... 389D.4 Mthodes deffet................................................................................................. 391D.5 Mthodes de manipulation du DOM.................................................................. 392D.6 Mthodes AJAX................................................................................................. 395D.7 Autres mthodes................................................................................................. 396

Index .................................................................................................................................. 399



Avant-propos

Jai t trs heureux dapprendre que Karl Swedberg et Jonathan Chaffer entreprenaientlcriture dejQuery. En tant que premier ouvrage traitant de jQuery, ce livre a fix unniveau de qualit que les autres sur le mme thme, ou sur JavaScript en gnral, se sontefforcs datteindre. Depuis sa sortie, il a toujours fait partie des titres JavaScript en ttedes ventes, principalement en raison de sa qualit et de sa prise en compte des dtails.

Jtais particulirement content que Karl et Jonathan sattellent cette tche car je les

connais bien et je savais quils seraient dexcellents auteurs. Travaillant au cur delquipe jQuery, jai eu loccasion de connatre Karl au cours des deux dernires annes,notamment pour la rdaction de cet ouvrage. Lorsque je regarde le rsultat, ses comp-tences de dveloppeur et denseignant de la langue anglaise taient manifestement bienadaptes ce projet.

Jai galement eu lopportunit de rencontrer les auteurs en personne, un fait plutt raredans le monde des projets open-source distribus. Ils sont toujours des membres fidlesde la communaut jQuery.

La bibliothque jQuery est utilise par des personnes dhorizons diffrents, notamment

des concepteurs, des dveloppeurs et des programmeurs plus ou moins expriments. Ilen est de mme au sein de lquipe jQuery. Ses membres aux connaissances variesapportent leurs avis sur la direction donner au projet. Il existe cependant un pointcommun entre tous les utilisateurs de jQuery : ils constituent une communaut de dve-loppeurs et de concepteurs dont lobjectif est de simplifier le dveloppement en Java-Script.

Dire quun projet open-source est de type communautaire ou que son but est daider lesnouveaux utilisateurs tient du clich. Toutefois, dans le cas de jQuery, cela na rien dunvu pieux. Au sein de lquipe jQuery, les personnes qui soccupent de la communaut

jQuery, qui rdigent la documentation ou qui dveloppent des plugins sont plus nom-breuses que celles en charge du code de base. Bien que les responsables du dveloppe-ment de la bibliothque fassent preuve dun dynamisme lev, cest la communaut quisest tablie autour de jQuery qui fait toute la diffrence entre un projet lthargique et unprojet qui rpond chaque besoin, voire les anticipe.



VIII jQuery

Notre faon de mener le projet et votre manire dutiliser le code sont fondamentalementtrs diffrentes de celles que lon rencontre dans la plupart des projets open-source ouavec la plupart des bibliothques JavaScript. Les membres du projet et de la commu-naut jQuery sont de vritables experts. Ils savent pourquoi jQuery est diffrent et font

de leur mieux pour transmettre ces connaissances aux utilisateurs.Pour comprendre ce quest la communaut jQuery, la lecture dun article ne vous suffirapas. Vous devez vous y impliquer pour prendre pleinement conscience de ce qui sypasse. Jespre que vous trouverez loccasion de participer. Rejoignez-nous sur lesforums, les listes de diffusion et les blogs, et laissez-nous vous guider lors de votreapprentissage de jQuery.

La bibliothque jQuery nest pas quun morceau de code. Elle reprsente la sommedexpriences qui ont conduit son existence, avec les nombreux hauts et bas, les difficul-ts de son dveloppement et lexcitation de la voir grandir et russir. Son volution sest

faite en phase avec les utilisateurs et les membres de lquipe, avec un souci constant decomprhension et dadaptation.

Lorsque jai constat que cet ouvrage considrait jQuery comme un outil unifi, noncomme une compilation des expriences quil cache, jtais la fois dcontenanc etenthousiaste. Voir comment les autres apprennent, comprennent et faonnent jQuery,voil ce qui rend ce projet si stimulant.

Je ne suis pas le seul entretenir avec jQuery une relation diffrente dune relation nor-male entre un utilisateur et un outil. Je ne suis pas certain de pouvoir expliquer pourquoicest ainsi, mais jai pu le constater de nombreuses fois cet instant unique o le visage

de lutilisateur sillumine lorsquil ralise quel point jQuery va laider.

un moment prcis, le dclic se passe. Lutilisateur de jQuery comprend que loutil dontil se sert est bien plus quun simple outil. Lcriture dapplications web dynamiquesprend alors pour lui un tout autre sens. Cest une chose incroyable et rellement ma pr-fre dans le projet jQuery.

Je souhaite que vous ayez lopportunit dprouver galement cette sensation.

John ResigCrateur de jQuery



Prface ldition franaise

Lapparition, il y a quelques annes, de ce que lon appelle le "Web 2.0" a suscit unregain dintrt pour le langage JavaScript. Jappelle Web 2.0 la capacit dune pageInternet interagir avec son utilisateur, au point parfois de devenir une vritable appli-cation. Ainsi, JavaScript, autrefois cantonn des actions minimes et souvent mses-tim, est petit petit devenu quasiment incontournable dans la conception de sites sevoulant modernes.

La principale difficult lorsque lon aborde un dveloppement JavaScript est de tenircompte des diffrences dinterprtation et de syntaxe entre les divers navigateurs. SiInternet Explorer est celui qui donne le plus de fil retordre, il ne faut pas oublier que,mme pour les autres, des diffrences existent !

Ces deux facteurs conjugus, la forte demande en JavaScript pour obtenir des sitesdynamiques et les diffrentes implmentations de ce langage, font que de nombreusesbibliothques sont apparues ces dernires annes afin de faciliter le travail des dve-loppeurs. Le but de ces bibliothques (frameworksen anglais) est double : uniformiserla syntaxe de JavaScript pour la rendre compatible avec tous les navigateurs et ajouter

de nouvelles fonctionnalits au langage. Parmi ces bibliothques, jQuery sembleaujourdhui la plus populaire et la plus utilise de toutes. Son succs vient probable-ment de son concept modulaire.

En plus des intentions gnrales cites prcdemment, jQuery a t pens selon troisides majeures :

n faciliter la slection densembles dlments d'un document HTML ;

n offrir une capacit de chanage des instructions sur les collections rcupres ;

n permettre aux dveloppeurs de crer eux-mmes et facilement des extensions

personnalises.Cest larticulation de ces trois principes, au-del de la simple syntaxe, qui vous est pr-sente dans ce livre. Vous apprendrez crer des fonctions concises, simples et rutili-sables.



X jQuery

Lensemble des explications sappuie sur des exemples prcis et fonctionnels, qui semettent en place au fur et mesure des notions traites. Vous dcouvrirez ainsi imm-diatement comment intgrer concrtement les fonctions abordes, mais aussi commentse construit un code jQuery.

Ces exemples ont le mrite de bien insister sur lintrt dutiliser la bibliothque defaon globale. En effet, trop souvent, ce genre de bibliothque nest employ que pourlune de ses fonctionnalits (par exemple les fonctions AJAX), ce qui est une ineptie entermes de conception. Cest comme si vous utilisiez une photo haute dfinition commevignette dans une page HTML sans loptimiser au pralable. Il est dommage de chargerune bibliothque telle que jQuery sans tirer profit de lensemble de ses avantages et detoute sa puissance.

Didier Mouronval

Responsable des rubriques JavaScript etAjax de developpez.com



propos des auteurs

Jonathan Chafferest le directeur technique de Structure Interactive, une agence weblocalise Grand Rapids, Michigan. Il y supervise des projets de dveloppement webfonds sur diverses technologies et participe galement aux tches de programmation.

Au sein de la communaut open-source, Jonathan participe activement au projet Drupal,qui a adopt jQuery comme framework JavaScript. Il est lauteur du module CCK (ContentConstruction Kit), trs employ pour la gestion du contenu structur sur les sites Drupal. Ilest charg des principales restructurations du systme de menus de Drupal et de la rfrencede lAPI dveloppeur.

Jonathan vit Grand Rapids avec sa femme, Jennifer.

Il souhaite remercier Jenny pour son enthousiasme et son soutien infatigables, Karlpour la motivation quil lui transmet lorsque lesprit est faible, et la communaut ArsTechnica pour son inspiration constante vers lexcellence technique.

Karl Swedbergest dveloppeur web chez Fusionary Media Grand Rapids, Michigan.Il passe le plus clair de son temps mettre en uvre des conceptions, en mettant laccentsur du code HTML conforme aux standards, des styles CSS propres et du JavaScript nonintrusif. En tant que membre de lquipe du projet jQuery et contributeur actif la listede discussion jQuery, Karl participe des ateliers et des confrences et propose des for-mations professionnelles en Europe et en Amrique du Nord.

Avant son aventure dans le dveloppement web, Karl a travaill comme rviseur, commeprofesseur danglais au lyce et comme cafetier. Son intrt pour la technologie sestrvl au dbut des annes 1990 alors quil travaillait chez Microsoft Redmond,Washington, sans faiblir depuis.

Karl prfrerait passer du temps avec sa femme, Sara, et ses deux enfants, Benjamin etLucia.

Il souhaite remercier Sara pour son amour loyal et son soutien, et ses deux charmants

enfants. Il exprime son plus profond respect envers Jonathan Chaffer pour son expertiseen programmation, ainsi que sa gratitude pour avoir voulu crire cet ouvrage avec lui.

Il remercie galement John Resig pour avoir cr la meilleure bibliothque JavaScriptau monde et avoir runi une communaut extraordinaire autour de ce projet. Ses remer-ciements vont au personnel de Packt Publishing, aux relecteurs techniques du livre, jQuery Cabal et tous ceux qui ont apport leur aide et leurs ides.



Prface

Lhistoire a commenc en 2005 par un travail passionn de John Resig, un petit gnie duJavaScript qui travaille prsent pour la Mozilla Corporation. Inspir par les pionniersdu domaine, tels que Dean Edwards et Simon Willison, Resig a runi un ensemble defonctions pour faciliter la recherche dlments dans une page web et leur attribuer descomportements. Avant quil nannonce publiquement son projet en janvier 2006, il avaitajout la modification du DOM et les animations de base. Il a nomm son projet jQueryafin de souligner le rle central de la recherche (query) des lments dans une page webet leur manipulation par du code JavaScript. Au cours des quelques annes qui ont suivi,le jeu des fonctionnalits de jQuery sest dvelopp, les performances se sont amlioreset certains des sites les plus populaires dInternet lont adopt. Bien que Resig reste ledveloppeur en chef du projet, jQuery a pu vritablement spanouir dans le mondeopen-source, jusqu senorgueillir aujourdhui dune quipe de dveloppeurs JavaScriptde premier plan et dune communaut dynamique de milliers de dveloppeurs.

Grce la bibliothque JavaScript jQuery, vous pouvez amliorer vos sites web, quelque soit votre niveau dexprience. En un seul fichier de taille rduite, elle offre denombreuses fonctionnalits, une syntaxe facile apprendre et une compatibilit robuste

entre les navigateurs. Par ailleurs, les centaines de plugins dvelopps pour tendre lesfonctionnalits de jQuery en font un outil pratiquement indispensable lors de nimportequel dveloppement de scripts ct client.

jQueryest une introduction en douceur aux concepts de jQuery. Grce cet ouvrage,vous pourrez ajouter des interactions et des animations vos pages, mme si vos prc-dentes tentatives en JavaScript ont pu vous laisser perplexe. Il va vous aider franchirles obstacles dresss par AJAX, les vnements, les effets et les fonctionnalits avan-ces du langage JavaScript. Il contient galement un court guide de rfrence de labibliothque jQuery, vers lequel vous pourrez vous tourner en cas de besoin.

Organisation du livre

Au Chapitre 1, Premiers pas, vous ferez vos premires armes avec jQuery. Ce chapitrecommence par une description de cette bibliothque JavaScript et de ce quelle peutvous apporter. Il explique comment obtenir et configurer jQuery, puis passe lcrituredun premier script.



XIV jQuery

Le Chapitre 2, Slecteurs, dtaille lutilisation des expressions de slection de jQuery,ainsi que les mthodes de parcours du DOM afin de rechercher des lments dans lapage, o quils se trouvent. Vous utiliserez jQuery pour appliquer des styles divers l-ments de la page, une opration quil est parfois impossible de raliser avec du CSS pur.

Au Chapitre 3, vnements, vous utiliserez le mcanisme de gestion des vnements dejQuery pour dclencher des comportements suite des vnements gnrs par le navi-gateur. Vous verrez comment jQuery facilite linsertion non intrusive dvnements,avant mme que le chargement de la page ne soit termin. Ce chapitre abordera gale-ment des sujets plus avancs, comme la propagation des vnements, la dlgation etles espaces de noms.

Le Chapitre 4, Effets, prsente des techniques danimation avec jQuery. Il expliquecomment masquer, afficher et dplacer des lments de la page en employant des effets la fois utiles et agrables lil.

Le Chapitre 5, Manipulation du DOM, montre comment modifier une page lademande. Il vous apprendra intervenir sur la structure dun document HTML, ainsique sur son contenu.

Au Chapitre 6,AJAX, vous dcouvrirez les nombreuses mthodes proposes par jQuerypour simplifier laccs aux fonctionnalits ct serveur, sans recourir aux actualisationspnibles de la page.

Dans les trois chapitres suivants (7, 8 et 9), vous travaillerez sur plusieurs exemplesrels, en runissant tout ce que vous avez appris aux chapitres prcdents pour crer des

solutions jQuery robustes des problmes courants.Au Chapitre 7,Manipulation des tables, vous trierez, filtrerez et mettrez en style des infor-mations de manire obtenir une mise en forme agrable et fonctionnelle des donnes.

Le Chapitre 8,Manipulation des formulaires, vous permettra de matriser les dtails dela validation ct client, vous y concevrez une prsentation de formulaire adaptative etmettrez en uvre des fonctionnalits interactives ct client, telles que lauto-compl-tion dans les champs du formulaire.

Le Chapitre 9, Carrousels et prompteurs, montre comment amliorer la prsentation etlintrt des lments dune page en les affichant sous forme de groupes plus faciles

grer. Vous ferez en sorte que les informations apparaissent et disparaissent, que ce soitautomatiquement ou sous le contrle de lutilisateur.

Dans les deux chapitres suivants (10 et 11), vous dpasserez les mthodes standard dejQuery pour explorer les extensions tierces de la bibliothque et verrez diffrentesmanires de ltendre vous-mme.



Prface XV

Le Chapitre 10, Utilisation des plugins, sintresse au plugin Form et aux plugins offi-ciels pour linterface utilisateur runis sous le nom jQuery UI. Vous y apprendrez ga-lement rechercher dautres plugins jQuery populaires et connatre leurs fonctions.

Au Chapitre 11,Dveloppement de plugins, vous verrez comment tirer profit des possi-

bilits extraordinaires dextension de jQuery pour dvelopper vos propres plugins. Vouscrerez vos propres fonctions utilitaires, ajouterez des mthodes lobjet jQuery, cri-rez des expressions de slection personnalises, etc.

LAnnexe A,Ressources en ligne, recommande plusieurs sites web qui proposent desinformations sur diffrents sujets en rapport avec jQuery, JavaScript et le dveloppe-ment web en gnral.

lAnnexe B, Outils de dveloppement, vous dcouvrirez quelques programmes et uti-litaires tiers pour ldition et le dbogage du code jQuery depuis votre environnementde dveloppement personnel.

LAnnexe C, Fermetures en JavaScript, prsente tout ce que vous devez savoir sur leconcept de fermetures ce quelles sont et comment les utiliser pour votre propre bn-fice.

LAnnexe D,Rfrence rapide, donne une vue densemble de la bibliothque jQuery, ycompris chacune de ses mthodes et ses expressions de slection. Sa prsentation facile parcourir vous sera prcieuse en ces moments o vous savez ce que vous voulez fairemais sans tre certain du nom de la mthode ou du slecteur dlments.

PrrequisPour crire et excuter le code illustr dans cet ouvrage, vous avez besoin des lmentssuivants :

n un diteur de texte ;

n un navigateur web moderne, comme Chrome de Google, Firefox de Mozilla, SafaridApple ou Internet Explorer de Microsoft ;

n la bibliothque jQuery, en version 1.3.2 ou ultrieure, tlchargeable depuis le sitehttp://jquery.com/.

Par ailleurs, pour mettre en uvre les exemples AJAX du Chapitre 6, vous aurez besoindun serveur compatible PHP.



XVI jQuery

Public du livre

Ce livre est destin aux concepteurs web qui souhaitent ajouter des lments interactifs leurs crations et aux dveloppeurs qui veulent donner leurs applications web lameilleure interface utilisateur. Des connaissances minimales en programmation Java-Script sont indispensables ; vous devez tre laise avec la syntaxe de ce langage. Vousdevez possder les bases du balisage HTML et des styles CSS. Aucune connaissance dejQuery nest requise, pas plus quune exprience avec dautres bibliothques JavaScript.

Conventions typographiques

Cet ouvrage emploie plusieurs styles pour le texte afin de mettre en exergue les diff-rentes informations. Voici quelques exemples de ces styles, avec leur signification.

Dans le texte, le code est prsent de la manire suivante : "Nous pouvons inclure

dautres contextes laide de la directive include."Lorsquun lment de code correspond une valeur indique par lutilisateur, il est criten italique de la manire suivante : .find(slecteur).

Voici un exemple de bloc de code :

Le titre

Un paragraphe.

Un autre paragraphe.

Encore un autre paragraphe.

Lorsque nous souhaitons attirer votre attention sur une partie dun bloc de code, leslignes ou les lments correspondants sont indiqus en gras :

$(document).ready(function() { $('a[href^=mailto:]').addClass('mailto'); $('a[href$=.pdf]').addClass('pdflink'); $('a[href^=http][href*=henry]')

.addClass('henrylink');});

Les entres et les sorties de la ligne de commande se prsentent de la manire suivante :

fonctExt():Fonction externeFonction interne



Prface XVII

Les termes nouveauxet les mots importants sont crits dans une police italique. Lesmots affichs lcran, par exemple dans les menus ou les botes de dialogue, apparais-sent dans le texte sous la forme suivante : "Notez licne PDF droite du lien HAMLET,licne denveloppe ct du lien EMAIL, ainsi que le fond blanc et la bordure noire

autour du lien HENRYV."

ATTENTION

Les avertissements signalent des actions viter.

ASTUCE

Ces encadrs prsentent des astuces.

INFO

Ces notes proposent des informations supplmentaires sur le sujet en cours.

Votre avis

Lavis de nos lecteurs tant toujours le bienvenu, nhsitez pas nous faire part de voscommentaires. Pour cela, rendez-vous sur la page ddie cet ouvrage sur le site webPearson (http://www.pearson.fr) et cliquez sur le lien RAGIR.

Si vous souhaitez proposer la publication dun titre dont vous avez besoin ou si voussouhaitez devenir auteur, ouvrez la page CONTACTSsur le site web Pearson, remplissezle formulaire prsent et envoyez-le au service EDITORIAL.

Malgr tout le soin apport la rdaction du contenu de cet ouvrage, des erreurs sonttoujours possibles. Si vous en rencontrez, que ce soit dans le texte ou dans le code,merci de nous les indiquer en allant sur la page CONTACTSdu site web Pearson et enenvoyant le formulaire rempli au service GNRAL.

Tlcharger le code

Les fichiers des exemples de code sont disponibles depuis le site web Pearson (http://www.pearson.fr), en suivant le lien CODESSOURCES sur la page ddie ce livre. Ilscontiennent les instructions permettant de les employer.



1Premiers pas

Au sommaire de ce chapitre

U

Intrt de jQueryU Efficacit de jQueryU Historique du projet jQuery

U Premire page web avec jQuery

U En rsum

Le World Wide Web est aujourdhui un environnement dynamique et ses utilisateursont des exigences leves quant laspect et aux fonctions des sites. Pour construire dessites interactifs intressants, les dveloppeurs se tournent vers des bibliothques Java-Script, comme jQuery, qui leur permettent dautomatiser les tches courantes et de sim-

plifier les plus complexes. La popularit de jQuery vient de sa capacit simplifier ungrand nombre de tches.

Les fonctionnalits de jQuery tant nombreuses, il peut sembler difficile de savoir paro commencer. Toutefois, sa conception fait preuve de cohrence et de symtrie. Laplupart de ses concepts sont emprunts la structure de HTMLet de CSS(CascadingStyle Sheets). Les concepteurs ayant peu dexprience en programmation peuvent ainsidmarrer rapidement, car la plupart des dveloppeurs web matrisent mieux ces deuxtechnologies que JavaScript. Dans ce premier chapitre, nous allons crire un pro-gramme jQuery oprationnel constitu uniquement de trois lignes de code. Les pro-grammeurs expriments bnficieront galement de cette cohrence conceptuelle,

comme nous le verrons plus loin dans les chapitres traitant de sujets plus avancs.

Voyons prsent ce que jQuery peut apporter.



2 jQuery

1.1 Intrt de jQuery

La bibliothque jQuery fournit une couche dabstraction gnrique pour les scripts webclassiques. Elle est donc utile pour la plupart des dveloppements de scripts. En raisonde sa nature extensible, il est impossible dtudier toutes ses utilisations dans un mmeouvrage, dautant que le dveloppement de plugins proposant de nouvelles possibilitsest permanent. Toutefois, les fonctionnalits standard permettent de rpondre auxbesoins suivants :

n Accder aux lments dun document.Sans laide dune bibliothque JavaScript,il faut crire de nombreuses lignes de code pour parcourir larborescence du DOM(Document Object Model) et localiser des parties spcifiques de la structure dundocument HTML. jQuery fournit un mcanisme de slection robuste et efficace quipermet de retrouver nimporte quels lments dun document afin de les examinerou de les manipuler.

n Modifier laspect dune page web.CSS propose une solution puissante pour modi-fier le rendu des documents, mais elle montre ses limites lorsque les navigateursweb ne respectent pas les mmes standards. Avec jQuery, les dveloppeurs peuventcontourner ce problme en se fondant sur une prise en charge identique des stan-dards quels que soient les navigateurs. Par ailleurs, la bibliothque permet de modi-fier les classes ou les proprits de style appliques une partie du document, mmeaprs que la page a t affiche.

n Altrer le contenu dun document. jQuery ne se borne pas des changementscosmtiques mais permet de modifier le contenu du document. Du texte peut tre

chang, des images peuvent tre insres ou interverties, des listes tre rordonnes,lintgralit de la structure du contenu HTML peut tre revue et tendue. Toutes cespossibilits sont permises par uneAPI(Application Programming Interface) simpledemploi.

n Rpondre aux actions de lutilisateur.Mme les comportements les plus laborset les plus puissants ne sont daucune utilit si leur excution nest pas contrle. Labibliothque jQuery propose une solution lgante pour intercepter une grandevarit dvnements, comme un clic sur un lien, sans avoir mlanger des gestion-naires dvnements au code HTML. De plus, cette API de gestion des vnementspermet de passer outre les incohrences des navigateurs, qui constituent une vrita-

ble nuisance pour les dveloppeurs web.

n Animer les modifications dun document. Pour la bonne mise en uvre descomportements interactifs, le concepteur doit galement fournir un retour visuel lutilisateur. La bibliothque jQuery apporte son aide en proposant des animations,comme les effets de fondu et de volet, ainsi quune bote outils pour en construirede nouvelles.



Chapitre 1 Premiers pas 3

n Rcuprer des informations partir dun serveur sans actualiser la page.Cetype de code, connu sous le nom AJAX(Asynchronous JavaScript And XML), aideles dveloppeurs web crer un site ractif proposant des fonctionnalits riches. Labibliothque jQuery permet de retirer de ce code les complexits propres aux navi-

gateurs et de laisser les dveloppeurs se concentrer sur laspect serveur.n Simplifier les tches JavaScript courantes.Outre les fonctionnalits de jQuery

orientes document, la bibliothque apporte des amliorations aux constructionsJavaScript de base, comme les itrations et la manipulation des tableaux.

1.2 Efficacit de jQuery

Avec lintrt rcent port au HTML dynamique, les frameworks JavaScript ont proli-fr. Certains sont spcialiss et se focalisent sur une ou deux des tches prcdentes.Dautres tentent de runir au sein dun mme paquetage tous les comportements ettoutes les animations imaginables. Pour offrir les diverses fonctionnalits dcrites pr-cdemment, tout en restant compact, jQuery emploie plusieurs stratgies :

n Exploiter CSS.En fondant le mcanisme de localisation des lments de la pagesur les slecteurs CSS, jQuery hrite dune mthode concise mais lisible pour expri-mer une structure de document. La bibliothque devient un point dentre pour lesconcepteurs qui souhaitent ajouter des comportements la page, car la connaissancede la syntaxe de CSS est un prrequis au dveloppement web professionnel.

n Accepter les extensions.Pour viter les dangers de la prolifration des fonctionna-lits, jQuery relgue la prise en charge des cas dutilisation spciaux auxplugins. Laprocdure de cration de nouveaux plugins tant simple et parfaitement documen-te, elle a encourag le dveloppement dune grande diversit de modules cratifs etutiles. Par ailleurs, les fonctionnalits standard de jQuery sont elles-mmes ralisespar des plugins et peuvent tre retires pour obtenir une bibliothque plus compacte.

n Masquer les excentricits du navigateur. Malheureusement, le dveloppementweb est confront au non-respect des standards par les diffrents navigateurs. Unepart importante dune application web peut tre ddie aux diffrentes mises enuvre des fonctionnalits pour chaque plateforme. Si le monde des navigateurs enconstante volution rend impossible la cration dune base de code parfaitement

indpendante de la plateforme pour les fonctions labores, jQuery ajoute unecouche dabstractionqui normalise les tches courantes, permettant ainsi de simpli-fier le code et den rduire la taille.

n Manipuler des ensembles. Lorsque nous demandons jQuery de "trouver tous leslments de classe collapsible et de les masquer", il nest pas ncessaire deparcourir chaque lment retourn. En effet, les mthodes comme .hide() sont



4 jQuery

conues pour travailler automatiquement sur des ensembles dobjets la placedobjets individuels. Grce cette technique, nomme itration implicite, les cons-tructions de type boucle sont gnralement inutiles et le code devient plus court.

n Autoriser plusieurs actions sur une ligne. Pour viter un abus des variablestemporaires ou des rptitions coteuses, jQuery emploie avec la plupart de sesmthodes un motif de programmation appel chanage. Autrement dit, le rsultat dela plupart des oprations sur un objet est lobjet lui-mme, auquel la prochaineaction peut tre applique.

Grce toutes ces stratgies, le paquetage jQuery a pu rester compact moins de 20 koaprs compression , tout en proposant des techniques qui permettent au code qui uti-lise la bibliothque de rester lui aussi compact.

Llgance de la bibliothque vient en partie de sa conception et en partie de son proces-sus volutionniste encourag par la communaut dynamique qui sest dveloppeautour du projet. Les utilisateurs de jQuery se rassemblent pour discuter non seulementdu dveloppement des plugins, mais galement des amliorations du noyau de la biblio-thque. LAnnexe A,Ressources en ligne, dtaille plusieurs ressources communautairesproposes aux dveloppeurs jQuery.

En dpit de tout le travail ncessaire la conception dun systme aussi souple etrobuste, le produit final est libre dutilisation. Ce projet open-source est la fois souslicence GNU Public License (adapte une utilisation dans dautres projets open-source) et sous licenceMIT License(pour faciliter son utilisation dans des logiciels pro-pritaires).

1.3 Historique du projet jQuery

Cet ouvrage sarticule autour de jQuery 1.3.x, cest--dire la version la plus rcente dela bibliothque au moment de lcriture de ces lignes. Lobjectif de la bibliothque apporter une solution simple au problme de recherche des lments dans une page webet de leur manipulation na pas chang au cours de son dveloppement, contrairement certains dtails de sa syntaxe et ses fonctionnalits. Ce court historique du projetdcrit les changements les plus importants entre les versions.

n

Phase de dveloppement public.John Resig a mentionn pour la premire fois uneamlioration de la bibliothque "Behaviour" de Prototype en aot 2005. Ce nouveauframework est officiellement sorti le 14 janvier 2006 sous le nom jQuery.

n jQuery 1.0 (aot 2006).Cette premire version stable de la bibliothque disposaitdj dune prise en charge robuste des slecteurs CSS, de la gestion des vnementset des interactions AJAX.




n jQuery 1.1 (janvier 2007). Cette version a considrablement assaini lAPI. Lesmthodes rarement employes ont t combines afin de rduire le nombre demthodes apprendre et documenter.

n jQuery 1.1.3 (juillet 2007).Cette version intermdiaire a intgr de nombreuses

amliorations des performances du moteur de slection de jQuery. partir de l,lefficacit de jQuery est devenue suprieure celle des bibliothques JavaScriptcomparables, comme Prototype, Mootools et Dojo.

n jQuery 1.2 (septembre 2007).La syntaxeXPathpour la slection des lments at retire de cette version car elle tait redondante avec celle de CSS. La personna-lisation des effets est devenue beaucoup plus souple et le dveloppement des plug-ins, beaucoup plus simple grce lajout des vnements lis un espace de noms.

n jQuery UI (septembre 2007).Cette nouvelle suite de plugins a remplac le pluginInterface, certes rput mais vieillissant. Une riche collection de widgets prfabri-

qus tait incluse, ainsi quun ensemble doutils pour construire des lmentssophistiqus comme des interfaces avec glisser-dposer.

n jQuery 1.2.6 (mai 2008).Les fonctionnalits du plugin Dimensions de BrandonAaron ont t intgres la bibliothque principale.

n jQuery 1.3 (janvier 2009).Une refonte majeure du moteur de slection (Sizzle) apermis une grande amlioration des performances de la bibliothque. La dlgationdes vnementsest officiellement prise en charge.

INFO

Les notes pour les versions antrieures de jQuery peuvent tre consultes sur le site web duprojet (http://docs.jquery.com/History_of_jQuery).

1.4 Premire page web avec jQuery

Puisque nous avons vu ltendue des fonctionnalits que propose jQuery, voyons pr-sent comment mettre en uvre cette bibliothque.

Tlcharger jQuery

Sur le site web officiel de jQuery (http://jquery.com/), vous trouverez toujours la ver-sion la plus rcente de la bibliothque et son actualit. Pour dmarrer, nous avonsbesoin dune copie de jQuery, tlchargeable directement depuis la page daccueil dusite. Plusieurs versions de la bibliothque peuvent tre disponibles tout moment. Entant que dveloppeurs de sites, la version non compresse la plus rcente nous convien-



6 jQuery

dra parfaitement. Elle pourra tre remplace par une version compresse dans les envi-ronnements de production.

Aucune installation nest ncessaire. Pour utiliser la bibliothque jQuery, il suffit de laplacer sur le site dans un emplacement public. Puisque JavaScript est un langage inter-

prt, aucune phase de compilation ou de construction nest requise. Lorsquune page abesoin de jQuery, il suffit simplement de faire rfrence au fichier correspondant depuisle document HTML.

Configurer le document HTML

La plupart des exemples dutilisation de jQuery comprennent trois composants : ledocument HTML lui-mme, les fichiers CSS dfinissant ses styles et les fichiers Java-Script pour sa manipulation. Dans notre premier exemple, nous allons utiliser une pagecontenant un extrait de livre, avec plusieurs classes appliques diffrents lments.

De l'autre ct du miroir

De l'autre ct du miroir

par Lewis Carroll 1. La maison du miroir

Sur la table, tout prs d'Alice, il y avait un livre. Tout en observant le Roi Blanc (car elle tait encore un peu inquite son sujet, et se tenait prte lui jeter de l'encre la figure au cas o il s'vanouirait de nouveau), elle se mit tourner les pages pour trouver un passage qu'elle pt lire... car c'est crit dans une langue que je ne connais pas, se dit-elle.

Et voici ce qu'elle avait sous les yeux:
YKCOWREBBAJ sevot xueutcils sel ; eruehlirg tiat lI' :tneialbirv te edniolla'l rus tneiaryG ; sevogorob sel tneialla xuerovilf tuoT .tneialfirnuob sugruof snohcrev seL




Elle se cassa la tte l-dessus pendant un certain temps, puis, brusquement, une ide lumineuse lui vint l'esprit: Mais bien sr! c'est un livre du Miroir! Si je le tiens devant un miroir, les mots seront de nouveau comme ils doivent tre.

Et voici le pome qu'elle lut:

JABBERWOCKY 'Il tait grilheure; les slictueux toves Gyraient sur l'alloinde et vriblaient: Tout flivoreux allaient les borogoves; Les verchons fourgus bourniflaient.

INFO

Lorganisation des fichiers sur le serveur na pas rellement dimportance. Les rfrencesentre les fichiers doivent simplement tre adaptes lorganisation choisie. Dans la plupartdes exemples tudis dans cet ouvrage, nous dsignerons les fichiers par des chemins relatifs(../images/foo.png) la place de chemins absolus (/images/foo.png). Le code pourraainsi tre excut localement sans ncessiter un serveur web.

Immdiatement aprs le prambule HTML classique, la feuille de style est charge.Pour cet exemple, elle est relativement rduite.

body {

font: 62.5% Arial, Verdana, sans-serif;}h1 {font-size: 2.5em;margin-bottom: 0;

}h2 {font-size: 1.3em;margin-bottom: .5em;

}h3 {font-size: 1.1em;margin-bottom: 0;

}

.poem {margin: 0 2em;

}.highlight { font-style: italic; border: 1px solid #888; padding: 0.5em; margin: 0.5em 0; background-color: #ffc;}



8 jQuery

Aprs la rfrence la feuille de style, les fichiers JavaScript sont inclus. Il est impor-tant que la balise pour jQuery soit place avantcelle de nos scripts. Dans lecas contraire, la bibliothque ne serait pas disponible au moment o notre code tenteraitde lutiliser.

INFO

Dans la suite de cet ouvrage, seules les parties pertinentes des fichiers HTML et CSS serontprsentes. Les fichiers complets sont disponibles en franais sur le site de lditeur ( http://www.pearson.fr) et en anglais sur le site web ddi ce livre ( http://book.learning-jquery.com).

La page obtenue est illustre la Figure 1.1.

Nous allons utiliser jQuery pour appliquer un nouveau style au texte du pome.

INFO

Cet exemple a pour objectif dillustrer une utilisation simple de jQuery. Dans la ralit, un telstyle pourrait tre appliqu uniquement laide de CSS.

Figure 1.1

La page avantapplication dun

style avec jQuery.




Ajouter jQuery

Notre code personnalis doit tre plac dans le second fichier JavaScript, actuellementvide, qui est inclus dans le document HTML en utilisant . Pour cet exemple, nous avons seulement besoin

de trois lignes de code :$(document).ready(function() { $('.poem-stanza').addClass('highlight');});

Rechercher le texte du pome

Dans jQuery, la slection dune partie du document constitue lopration fondamentale.Pour cela, nous utilisons la construction $(). De manire gnrale, une chane de carac-tres contenant une expression de slection CSS est passe en paramtre. Dans notreexemple, nous souhaitons rechercher toutes les parties du document auxquelles la

classe poem-stanza est applique. Par consquent, le slecteur est trs simple. Nousrencontrerons des options plus complexes tout au long de cet ouvrage. Au Chapitre 2,nous dtaillerons les diffrentes manires de localiser les lments dun document.

La fonction $()est en ralit une fabrique pour lobjet jQuery, qui constitue la briquede base avec laquelle nous travaillerons partir de maintenant. Lobjet jQuery encap-sule des lments du DOM, zro ou plus, et nous permet dinteragir avec eux de diff-rentes manires. Dans notre cas, nous souhaitons modifier laspect de ces parties de lapage et, pour cela, nous changerons les classes appliques au texte du pome.

Injecter la nouvelle classe

Comme la plupart des mthodes de jQuery, la mthode .addClass()a un nom parfaite-ment explicite : elle applique une classe CSS la partie de la page que nous avonsslectionne. Elle prend comme seul paramtre le nom de la classe ajouter. Cettemthode ainsi que son complment .removeClass()nous permettront dobserver faci-lement le fonctionnement de jQuery au cours de notre exploration des diffrentesexpressions de slection. Pour le moment, notre exemple ajoute simplement la classehighlight, que la feuille de style dfinit comme du texte en italique avec une bordure.

Vous remarquerez quaucune itration nest requise pour ajouter la classe toutes lesstrophes du pome. Nous lavons indiqu, jQuery utilise une itration implicitedans lesmthodes comme .addClass()et un seul appel de fonction suffit pour modifier toutesles parties slectionnes du document.

Excuter le code

$()et .addClass()suffisent pour atteindre notre but, cest--dire changer laspect dutexte du pome. Cependant, si cette ligne de code est insre en tant que telle dans len-tte du document, elle naura aucun effet. Le code JavaScript est gnralement excut



10 jQuery

ds quil est rencontr par le navigateur et, au moment du traitement de len-tte, ilnexiste encore aucun contenu HTML auquel appliquer un style. Nous devons retarderlexcution du code jusqu ce que le DOM soit disponible.

Pour contrler lexcution dun code JavaScript, le mcanisme classique consiste

invoquer ce code depuis des gestionnaires dvnements. Il existe de nombreux gestion-naires pour les vnements dclenchs par lutilisateur, comme les clics avec les bou-tons de la souris et les appuis sur les touches du clavier. Si nous navions pas jQuery notre disposition, nous devrions employer le gestionnaire onload, qui est invoqu aprsque la page, ainsi que toutes ses images, a t affiche. Pour dclencher lappel notrecode suite lvnement onload, nous devons le placer dans une fonction :

function highlightPoemStanzas() { $('.poem-stanza').addClass('highlight');}

Ensuite, nous associons la fonction lvnement en y faisant rfrence dans la balise

HTML :

De cette manire, notre code est excut lorsque le chargement de la page est termin.

Cette approche prsente quelques inconvnients. Nous avons altr le contenu HTML lui-mme pour mettre en place ce comportement. Ce couplage troit entre la structure et lafonction conduit un encombrement du code, avec un risque de rptition des mmesappels de fonctions sur diffrentes pages ou, dans le cas dautres vnements tels que lesclics de souris, sur chaque instance dun lment dune page. Lajout de nouveaux compor-tements impose une intervention en plusieurs endroits, ce qui augmente les sources

derreurs et complique le travail parallle des concepteurs et des programmeurs.Pour viter ce problme, jQuery nous permet de planifier linvocation de fonctionsaprs que le DOM a t charg, sans attendre laffichage des images, en utilisant laconstruction $(document).ready(). Avec la fonction dfinie prcdemment, nous pou-vons crire la ligne suivante :

$(document).ready(highlightPoemStanzas);

Cette technique ne ncessite aucune modification du code HTML. Le comportement esttotalement associ partir du fichier JavaScript. Au Chapitre 3, nous verrons commentrpondre dautres types dvnements, en sparant galement leurs effets de la struc-

ture HTML.La solution propose reste toutefois peu conomique, car nous avons d dfinir unefonction, highlightPoemStanzas(), alors quelle est employe immdiatement et uneseule fois. Autrement dit, nous avons cr un identifiant dans lespace de noms globaldes fonctions, sans que cela nous apporte un rel avantage, avec linconvnient davoir nous rappeler de ne pas le rutiliser. Comme dautres langages de programmation,




JavaScript propose une rponse cette inefficacit : les fonctions anonymes (parfoisappelesfonctions lambda). Grce ces fonctions, nous pouvons crire le code tel quiltait initialement prsent :

$(document).ready(function() {

$('.poem-stanza').addClass('highlight');});

En utilisant le mot cl functionsans prciser un nom de fonction, nous dfinissons unefonction exactement l o elle est requise, non avant. Cela permet de rduire le dsordredans le code et nous conduit trois lignes de JavaScript. Cet idiome est extrmementpratique avec le code jQuery car de nombreuses mthodes prennent en argument unefonction et toutes ces fonctions sont rarement rutilisables.

Lorsque cette syntaxe est employe pour dfinir une fonction anonyme dans le corps duneautre fonction, il est possible de crer une fermeture(closure). Il sagit dun concept la-bor et puissant quil est indispensable de matriser car la dfinition dun grand nombre defonctions imbriques peut avoir des consquences et des implications inattendues surlusage de la mmoire. Nous y reviendrons en dtail lAnnexe C.

Le produit final

Notre code JavaScript tant en place, nous obtenons la page illustre la Figure 1.2.

Figure 1.2

La page aprsapplication dun

style avec jQuery.



12 jQuery

Les strophes du pome sont prsent en italique et places dans des botes, comme pr-cis par la feuille de style alice.css. En effet, notre code JavaScript a ajout la classehighlight ces lments du document.

1.5 En rsum prsent, nous comprenons pourquoi un dveloppeur optera pour un framework Java-Script au lieu dcrire tout le code partir de zro, mme pour les tches les plus l-mentaires. Nous avons vu quelques cas dans lesquels la bibliothque jQuery excelle etpourquoi son choix simpose. Nous savons galement quelles tches elle permet desimplifier.

Dans ce chapitre, nous avons appris disposer de jQuery dans le code JavaScript de lapage web, utiliser la fonction $()pour localiser les lments de la page ayant une cer-taine classe, invoquer .addClass()pour appliquer des styles supplmentaires cesparties de la page, et appeler $(document).ready()pour dclencher lexcution de cecode aprs le chargement de la page.

Lexemple choisi a permis dillustrer le fonctionnement de jQuery, mais il nest pas trsutile dans les cas rels. Au chapitre suivant, nous tendrons ce code pour explorer lesslections sophistiques de jQuery, en choisissant des utilisations pratiques de cettetechnique.



2Slecteurs

Au sommaire de ce chapitre

U

Le DOMU La fonction $()

U Slecteurs CSS

U Slecteurs dattribut

U Slecteurs personnaliss

U Mthodes de parcours du DOM

U Accder aux lments du DOM

U En rsum

La bibliothque jQuery se fonde sur la puissance des slecteurs CSS (Cascading Style

Sheets) pour que nous puissions accder rapidement et facilement des lments ou des groupes dlments du DOM. Dans ce chapitre, nous examinerons quelques slec-teurs CSS, ainsi que des slecteurs propres jQuery. Nous examinerons galement leparcours du DOM laide des mthodes de jQuery, qui apportent une plus grande sou-plesse encore.

2.1 Le DOM

Lun des aspects les plus puissants de jQuery rside dans sa capacit slectionner ais-ment des lments dans le DOM (Document Object Model). Le DOM est une sorte de

structure gnalogique arborescente. HTML, comme dautres langages de balisage, uti-lise ce modle pour dcrire les relations entre les lments dune page. Pour faire rf-rence ces relations, nous employons la terminologie associe aux relations familiales :parents, enfants, etc. Un exemple simple permettra de mieux comprendre lapplicationde la mtaphore gnalogique un document :



14 jQuery

Le titre

Un paragraphe.

Un autre paragraphe.

Encore un autre paragraphe.

est lanctrede tous les autres lments ; autrement dit, tous les autres lmentssont des descendantsde . Les lments et sont non seulement desdescendants mais galement des enfantsde . De mme, en plus dtre lanctrede et de , est galement leurparent. Les lments

sont desenfants (et des descendants) de , des descendants de et de , et des

frres. Pour de plus amples informations concernant laffichage de la structure arbores-cente du DOM laide de logiciels tiers, consultez lAnnexe B.

Avant daller plus loin, il est important de noter que le jeu dlments obtenu laidedes slecteurs et des mthodes est toujours plac dans un objet jQuery. Les objetsjQuery permettent de manipuler trs facilement les lments recherchs dans une page.Nous pouvons aisment lier des vnements ces objets et leur ajouter de jolis effets,tout comme enchanerde multiples modifications ou effets. Toutefois, les objets jQuerydiffrent des lments du DOM ou des listes de nuds et, en tant que tels, noffrent pasncessairement les mmes mthodes et proprits pour certaines tches. la fin de ce

chapitre, nous verrons comment accder aux lments du DOM qui sont encapsulsdans un objet jQuery.

2.2 La fonction $()

Quel que soit le type de slecteur que nous voulons employer dans jQuery, linstructioncommence toujours avec le symbole du dollar et des parenthses : $(). Tout ce quil estpossible dutiliser dans une feuille de style peut galement tre plac entre guillemets etinsr entre les parenthses. Ainsi, nous pouvons ensuite appliquer des mthodesjQuery la collection dlments obtenue.

Les trois constituants de base des slecteurs sont un nom de balise, un identifiant(ID) etune classe. Ils peuvent tre employs de manire indpendante ou en association avecdautres slecteurs. Le Tableau 2.1 donne un exemple pour chacun de ces trois slec-teurs lorsquils sont employs indpendamment.



Chapitre 2 Slecteurs 15

viter un conflit entre jQuery et dautres bibliothques JavaScript

Dans jQuery, le symbole du dollar ($) est un alias pour jQuery. Lorsque plusieurs biblioth-ques sont utilises dans une mme page, il est possible que des conflits surviennent car lafonction $()est trs souvent dfinie par les bibliothques JavaScript. Pour viter de telsconflits, nous pouvons remplacer chaque occurrence de $par jQuerydans le code jQuery. LeChapitre 10 proposera dautres solutions ce problme.

Nous lavons mentionn au Chapitre 1, lorsque nous associons des mthodes la fonc-tion $(), les lments encapsuls dans lobjet jQuery sont parcourus automatiquementet implicitement. Par consquent, nous pouvons gnralement viter litration expli-cite, par exemple avec une boucle for, qui est souvent de mise dans les scripts manipu-lant le DOM.

Puisque les bases sont prsent poses, nous sommes prts utiliser les slecteurs demanire plus labore.

2.3 Slecteurs CSS

La bibliothque jQuery prend en charge pratiquement tous les slecteurs dcrits dansles spcifications 1 3 de CSS (voir le site du World Wide Web Consortium ladressehttp://www.w3.org/Style/CSS/#specs). Ainsi, tant que JavaScript est activ, les dve-loppeurs peuvent enrichir leurs sites web sans se demander si le navigateur de lutilisa-teur, en particulier Internet Explorer 6, comprendra ou non les slecteurs labors.

INFO

Les dveloppeurs jQuery srieux doivent toujours appliquer les concepts damliorationprogressive et de dgradation lgante leur code afin de sassurer quune page seratoujours affiche correctement, si ce nest joliment, que JavaScript soit activ ou non. Nousreviendrons sur ces concepts tout au long de cet ouvrage.

Tableau 2.1 : Utilisation des trois slecteurs de base

Slecteur CSS jQuery Description

Nom de balisep $('p') Slectionne tous les paragraphes dudocument.

Identifiant #un-id $('#un-id') Slectionne llment unique du

document dont lidentifiant est un-id.Classe .une-classe $('.une-classe') Slectionne tous les lments du

document dont la classe est une-classe.



16 jQuery

Pour comprendre le fonctionnement de jQuery avec les slecteurs CSS, nous nousappuierons sur une structure souvent employe par les sites web pour la navigation : laliste imbrique non ordonne.

Comdies Comme il vous plaira Tout est bien qui finit bien Le Songe d'une nuit d't La Nuit des rois Tragdies Hamlet Macbeth Romo et Juliette

Historiques Henry IV (email) Partie I Partie II

Henry V Richard II

Vous remarquerez que lidentifiant de la premire balise est selected-plays,mais quaucune classe nest associe aux balises . Lorsque aucun style nest appli-qu, la liste est affiche conformment la Figure 2.1.

Figure 2.1

Aspect de la listesans applicationdun style.




Elle se prsente comme attendu, avec des puces et des lments organiss verticalementet indents en fonction de leur niveau.

Appliquer un style aux lments de liste

Supposons que nous voulions que les lments de premier niveau, et uniquementceux-l, soient organiss lhorizontale. Nous pouvons commencer par dfinir une classehorizontaldans la feuille de style :

.horizontal { float: left; list-style: none; margin: 10px;}

La classe horizontalfait en sorte que llment soit flottant gauche de celui qui lesuit, lui retire la puce sil sagit dun lment de liste et ajoute une marge de 10 pixelssur ses quatre cts.

Au lieu dassocier directement la classe horizontal un lment dans le documentHTML, nous lajoutons dynamiquement aux lments de premier niveau de la liste,cest--dire COMDIES, TRAGDIESet HISTORIQUES. Cela nous permet dillustrer lutilisa-tion des slecteurs dans jQuery :

$(document).ready(function() { $('#selected-plays > li').addClass('horizontal');});

Notre code jQuery dbute par lenveloppe $(document).ready(), qui sexcute dsque le DOM a t charg.

La deuxime ligne utilise le combinateur denfant(>) pour ajouter la classe horizontal tous les lments de premier niveau et eux seuls. Le slecteur plac dans la fonction$()signifie "rechercher chaque lment de liste (li) qui est un enfant (>) de llmentdont lidentifiant est selected-plays(#selected-plays)".

La Figure 2.2 prsente laffichage de la liste aprs que la classe a t applique.

Figure 2.2

Aspect de la liste aprs application dune classe aux lments de premier niveau.



18 jQuery

Pour donner un style tous les autres lments, cest--dire ceux qui ne sont pas de pre-mier niveau, nous avons plusieurs mthodes notre disposition. Puisque nous avonsdj appliqu la classe horizontal aux lments de premier niveau, nous pouvonsslectionner les lments secondaires en utilisant une pseudo-classe de ngationpour

identifier tous les lments de liste qui ne sont pas de la classe horizontal. Cela sepasse dans la troisime ligne de code :

$(document).ready(function() { $('#selected-plays > li').addClass('horizontal'); $('#selected-plays li:not(.horizontal)').addClass('sub-level');});

Cette fois-ci, nous slectionnons chaque lment de liste (li) qui est un descendant dellment dont lidentifiant est selected-plays (#selected-plays) et dont la classenest pas horizontal(:not(.horizontal)).

Lorsque nous ajoutons la classe sub-level ces lments, un arrire-plan gris leur est

attribu par la feuille de style. La Figure 2.3 illustre la nouvelle prsentation de la listeimbrique.

2.4 Slecteurs dattribut

Les slecteurs dattributsde CSS sont particulirement utiles. Ils permettent de dsi-gner un lment par lune de ses proprits HTML, comme lattribut titledun lien oulattribut altdune image. Par exemple, pour slectionner toutes les images qui poss-dent un attribut alt, nous crivons le code suivant :

$('img[alt]')

INFO

Dans les versions antrieures la 1.2, jQuery utilisait la syntaxe du langage XML Path(XPath)pour ses slecteurs dattribut et proposait plusieurs autres slecteurs XPath. Mme si cesslecteurs ont depuis t retirs de la bibliothque jQuery standard, ils restent disponiblessous forme dun plugin (http://plugins.jquery.com/project/xpath/).

Figure 2.3

Aspect de la liste aprs application dune classe aux lments secondaires.




Appliquer un style aux liens

Les slecteurs dattribut utilisent une syntaxe issue des expressions rgulires pouridentifier la valeur au dbut (^) ou la fin ($) dune chane de caractres. Nous pouvonsgalement nous servir de lastrisque (*) pour indiquer une valeur place nimporte o

dans une chane et un point dexclamation (!) pour indiquer linverse dune valeur.

Supposons que nous souhaitions appliquer des styles diffrents aux diffrents types deliens. Nous commenons par les dfinir dans la feuille de style :

a { color: #00c;}a.mailto { background: url(images/mail.png) no-repeat right top; padding-right: 18px;}a.pdflink {

background: url(images/pdf.png) no-repeat right top; padding-right: 18px;}a.henrylink { background-color: #fff; padding: 2px; border: 1px solid #000;}

Ensuite, nous utilisons jQuery pour ajouter les classes mailto, pdflinket henrylinkaux liens appropris.

Pour ajouter une classe tous les liens de type courrier lectronique, nous construisons

un slecteur qui recherche toutes les ancres (a) dont lattribut href([href) commencepar mailto:(^=mailto:]) :

$(document).ready(function() { $('a[href^=mailto:]').addClass('mailto');});

Pour ajouter une classe tous les liens vers des fichiers PDF, nous utilisons le symboledu dollar la place du symbole de laccent circonflexe. En effet, nous voulons slec-tionner des liens ayant un attribut hrefqui se terminepar .pdf :

$(document).ready(function() { $('a[href^=mailto:]').addClass('mailto');

$('a[href$=.pdf]').addClass('pdflink');});

Il est galement possible de combiner les slecteurs dattribut. Par exemple, nous pou-vons ajouter la classe henrylink tous les liens dont lattribut href commence parhttpet inclut henry :



20 jQuery

$(document).ready(function() { $('a[href^=mailto:]').addClass('mailto'); $('a[href$=.pdf]').addClass('pdflink'); $('a[href^=http][href*=henry]').addClass('henrylink');});

La Figure 2.4 prsente la nouvelle version de la liste aprs que ces trois classes ont tappliques aux trois types de liens.

Notez licne PDF droite du lien HAMLET, licne denveloppe ct du lien EMAIL,ainsi que le fond blanc et la bordure noire autour du lien H ENRYV.

2.5 Slecteurs personnaliss

la grande diversit de slecteurs CSS, jQuery ajoute ses propres slecteurs personnali-ss. Pour la plupart, ils permettent de slectionner certains lments dans un groupe. Lasyntaxe est identique celle despseudo-classes CSS, dans laquelle le slecteur commencepar des deux-points (:). Par exemple, pour slectionner le deuxime lment parmilensemble obtenu laide dun slecteur de balises dont la classe est horizontal,nous crivons le code suivant :

$('div.horizontal:eq(1)')

La partie :eq(1) slectionne le deuxime lment de lensemble car les indices destableaux JavaScript commencent zro. loppos, CSS numrote partir de un. Par

consquent, un slecteur CSS comme $('div:nth-child(1)')slectionne tous les l-ments qui sont le premier enfant de leur parent (toutefois, dans ce cas, il est plussimple dutiliser $('div:first-child')).

Figure 2.4

Aspect de la liste aprs application des classes aux diffrents types de liens.




Appliquer un style en alternance aux lignes dune table

Avec :odd et :even, jQuery propose deux slecteurs personnaliss trs intressants.Voyons comment utiliser lun deux pour crer des bandes dans la table suivante :

Comme il vous plaira Comdie Tout est bien qui finit bien Comdie 1601 Hamlet Tragdie

1604 Macbeth Tragdie 1606 Romo et Juliette Tragdie 1595 Henry IV, Partie I

Historique 1596 Henry V Historique 1599

Nous compltons la feuille de style de manire appliquer un style toutes les lignes dela table et dfinir une classe altpour les lignes paires :

tr {

background-color: #fff;}.alt { background-color: #ccc;}

Notre code jQuery associe la classe altaux lignes paires de la table (balises ) :



22 jQuery

$(document).ready(function() { $('tr:odd').addClass('alt');});

Attention, pourquoi utilisons-nous le slecteur :odd (impair) pour cibler des lignespaires ? Comme dans le cas du slecteur :eq(), :oddet :evense fondent sur la num-rotation JavaScript, qui commence zro. Par consquent, la premire ligne possde lenumro 0 (pair), la deuxime, le numro 1 (impair), etc. La Figure 2.5 montre le rsultatde notre petit bout de code sur la table.

Vous constaterez un rsultat sans doute inattendu si la page contient plusieurs tables.Par exemple, puisque la dernire ligne de cette table possde un fond blanc, la premireligne de la table suivante aura un fond gris. Pour viter ce type de problme, la solutionconsiste utiliser le slecteur :nth-child(). Il peut prendre en argument un nombrepair ou impair. Attention, cependant, car :nth-child()est le seul slecteur jQuery qui

commence un. Pour obtenir le mme effet que prcdemment et pour quil reste coh-rent sur les multiples tables dun document, nous modifions le code de la maniresuivante :

$(document).ready(function() { $('tr:nth-child(even)').addClass('alt');});

Supposons que, pour une raison ou pour une autre, nous souhaitions mettre en exergueles cellules de la table qui font rfrence lune des pices HENRY. Pour cela, aprsavoir ajout une classe la feuille de style de manire placer le texte en gras et en ita-lique (.highlight {font-weight:bold; font-style: italics;}), il suffit dajouter

notre code jQuery la ligne suivante, fonde sur le slecteur :contains() :$(document).ready(function() { $('tr:nth-child(even)').addClass('alt'); $('td:contains(Henry)').addClass('highlight');});

La Figure 2.6 montre notre jolie table bandes, dans laquelle les pices HENRY sontmises en exergue.

Figure 2.5

Application alter-ne dun style auxlignes dune table.




Il est important de noter que le slecteur :contains()est sensible la casse. Si nousavions utilis $('td:contains(henry)'), cest--dire sans le H majuscule, aucune cel-lule naurait t slectionne.

Bien videmment, il existe des solutions pour crer des tables bandes et mettre du

texte en exergue sans passer par jQuery ni utiliser un script ct client. Quoi quil ensoit, la combinaison de jQuery et de CSS constitue une bonne solution pour mettre enplace des styles de ce type lorsque le contenu est gnr dynamiquement et que nousnavons accs ni au contenu HTML ni au code ct serveur.

Slecteurs pour formulaires

Lorsquon manipule des formulaires, les slecteurs personnaliss de jQuery peuventsimplifier la slection des lments recherchs. Le Tableau 2.2 dcrit quelques-uns deces slecteurs.

Figure 2.6

Application dunstyle certainescellules de la table.

Tableau 2.2 : Slecteurs jQuery pour les formulaires

Slecteur Correspondance

:text, :checkbox,:radio, :image,:submit, :reset,:password, :file

lments de saisie dont lattribut de type est gal au nom du slecteur(sans les deux-points). Par exemple, :textslectionne .

:input lments de type input, textarea, selectet button.

:button lments buttonet inputdont lattribut de type est gal button.

:enabled lments de formulaire activs.

:disabled lments de formulaire dsactivs.

:checked Boutons radio ou cases cocher slectionns.

:selected lments optionslectionns.



24 jQuery

Comme les autres slecteurs, il est possible de combiner les slecteurs pour formulairesafin dobtenir une meilleure prcision. Par exemple, nous pouvons slectionner tous lesboutons radio cochs (non les cases cocher) avec $(':radio:checked')ou slection-ner toutes les zones de saisie de mot de passe et les champs de saisie de texte dsactivs

avec $(':password, :text:disabled'). Avec les slecteurs personnaliss, nous appli-quons les principes de base de CSS pour construire la liste des lments correspondants.

2.6 Mthodes de parcours du DOM

Les slecteurs jQuery tudis jusqu prsent permettent de slectionner des lmentsdans larborescence du DOM, que ce soit latralementou vers le bas, et de filtrer lesrsultats. Sil sagissait de la seule manire de slectionner les lments, nos possibilitsseraient relativement limites (mme si les expressions de slection sont plutt robus-tes, en particulier par rapport aux solutions classiques daccs au DOM). En de nom-

breuses occasions, il est ncessaire de slectionner un lment parentou un lmentanctre. Cest ce moment-l que les mthodes jQuery pour le parcours du DOMentrent en scne. Elles permettent de parcourir le DOM dans toutes les directions.

Pour certaines mthodes, lexpression de slection scrit de manire quasi identique.Par exemple, la ligne $('tr:odd').addClass('alt'); employe initialement pourajouter la classe altpeut tre rcrite avec la mthode .filter() :

$('tr').filter(':odd').addClass('alt');

Cependant, en gnral, les deux manires de slectionner les lments se compltent.De plus, la mthode .filter()est particulirement puissante car elle peut prendre une

fonction en argument. Cette fonction permet de crer des tests complexes pour le choixdes lments qui feront partie du jeu correspondant. Par exemple, supposons que nousvoulions ajouter une classe tous les liens externes. jQuery ne propose aucun slecteurpour rpondre ce besoin. Sans une fonction de filtre, nous serions obligs de parcourirexplicitement chaque lment et de les tester un par un. En revanche, grce lafonctionde filtre, nous pouvons nous appuyer sur litration implicite de jQuery et garder uncode concis :

$('a').filter(function() { return this.hostname && this.hostname != location.hostname;}).addClass('external');

La deuxime ligne applique un filtre deux critres sur la collection dlments :

1. Ils doivent possder un attribut hrefavec un nom de domaine (this.hostname). Cetest permet dexclure les liens mailtoet ceux dautres espces.

2. Le nom de domaine cibl par le lien ( nouveau this.hostname) ne doit pas corres-pondre (!=) au nom de domaine de la page courante (location.hostname).




Plus prcisment, la mthode .filter()itre sur le jeu dlments correspondants, entestant la valeur de retour de la fonction applique chacun. Si elle retourne false,llment est retir de la collection obtenue. Si elle retourne true, il est conserv.

Revenons prsent notre table bandes pour voir si nous ne pourrions pas exploiter

les mthodes de parcours.

Appliquer un style certaines cellules

Prcdemment, nous avons ajout la classe highlight toutes les cellules qui contien-nent le texte Henry. Pour appliquer un style la cellule qui suit chaque cellule contenantce nom, nous pouvons partir du slecteur crit et lui enchaner la mthode next() :

$(document).ready(function() { $('td:contains(Henry)').next().addClass('highlight');});

La Figure 2.7 illustre la nouvelle prsentation de la table.

La mthode .next() slectionne uniquement llment frre suivant. Pour mettre enexergue toutes les cellules qui viennent aprs celle qui contient Henry, nous pouvonsemployer la mthode .nextAll() :

$(document).ready(function() { $('td:contains(Henry)').nextAll().addClass('highlight');});

INFO

Comme nous pouvions le supposer, les mthodes .next()et .nextAll()ont leurs homolo-gues .prev() et .prevAll(). Par ailleurs, la mthode .siblings() slectionne tous lesautres lments au mme niveau du DOM, quils viennent avant ou aprs llment prc-demment slectionn.

Figure 2.7

Application dunstyle aux cellules quisuivent certainesautres cellules.



26 jQuery

Pour inclure la cellule dorigine (celle qui contient Henry) avec les cellules qui suivent,nous pouvons ajouter la mthode .andSelf() :

$(document).ready(function() { $('td:contains(Henry)').nextAll().andSelf().addClass('highlight');

});Vous le constatez, il existe diffrentes manires de combiner les slecteurs et les mtho-des de parcours pour slectionner la mme collection dlments. Voici par exempleune autre faon de slectionner chaque cellule dune ligne dont au moins lune contientle nom Henry :

$(document).ready(function() { $('td:contains(Henry)').parent().children().addClass('highlight');});

Dans ce cas, au lieu de parcourir transversalement les lments frres, nous remontonsdun niveau dans le DOM avec .parent(), vers llment , puis nous slection-

nons toutes les cellules de la ligne avec .children().

Enchaner des mthodes

Les combinaisons de mthodes de parcours que nous venons de prse

Jquery - Simplifiez Et Enrichissez Vos Developpements Javascript

Documents

Transcript of Jquery - Simplifiez Et Enrichissez Vos Developpements Javascript