Vous êtes sur la page 1sur 373

Introduction

Depuis1995,soitdsledbutdelouvertureduwebaugrandpublic,leJavaScriptestlecompagnonfidleduHTML. Nanmoins,ilfautadmettrequesareconnaissanceparlesdveloppeursatlente.Cependant,depuislapparition dAJAX, la situation a totalement volu. Les designers lui dcouvrent des qualits jusque l inexploites et le JavaScriptacquiertenfinseslettresdenoblesse. JavaScriptestcependantunlangagedeprogrammationpartentireavectouteslesdifficultsdapprentissageque cela implique. Lide de concevoir un framework ddi JavaScript pour accrotre la productivit de dveloppement sestainsiimpose.CestalorsquapparatleframeworkjQuery. Mais jQuery, grce lapproche innovante de son jeune inventeur John Resig, reconsidre compltement lapport et lcritureduJavaScript.Eneffet,iltaitimpratifdetenircompteduDOMetdesfeuillesdestyleCSSapparusdepuisla naissanceduJavaScript.Ilimportaitgalementderevenirunesyntaxeplusintuitivecardelaversion1.1initialela version1.7actuelle,lvolutionduJavaScriptsestraliseauprixdunecomplexitcroissante. LesgrandsnomsdelinformatiqueetdInternetcommeGoogle,NokiaetMicrosoftnesontpasrestsenresteetont rapidementapportleurreconnaissancejQuery.Ainsi,lalibrairiejQueryestmaintenantinclusedanslasuitedoutils dedveloppementVisualStudiodeMicrosoft. Le contexte ainsi plant, il semble vident quune connaissance approfondie du HTML (ou XHTML) et des feuilles de styleCSSestindispensable.DebonnesnotionsdeJavaScriptsontgalementsouhaites.JQuerysadresseeneffet unpublicaufaitdecesdiffrentestechniques. Danscetouvrage,nousallonsparcourirlesdiffrentsthmesabordsparjQuery.Lauteuraprivilgiuneapproche structureetprogressive.ChaquepointdejQueryestillustrparunexempleavantdepasserdesapplicationsplus pointues.Attironslattentiondulecteursurlechapitreconsacrauxslecteurs(chapitreLesslecteursenjQuery).Il estnonseulementlillustration de la diversit de jQuery pour atteindre aisment nimportequellmentdelapage mais un lment essentiel dans lapprentissage de jQuery. Suivront ensuite des sujets plus interactifs comme la manipulationdesfeuillesdestyleouduDOM,leseffetsvisuels,lAJAXrevuparjQueryetlesplugins. Votretudetermine,vosapplicationsWebserontnenpasdouter,plusinteractives,plusrichesetplusinnovantes, letoutavecunefacilitdcritureduJavaScriptinsouponne.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

LeretourduJavaScript
LesapplicationsWebactuellessesituentdansunenvironnementdynamique.Jamaisencorelessitesnonttaussi richesenprsentationsvisuellesetautresfonctionssoutenantlagestiondesinformations. DslespremiresheuresduWeb,leJavaScriptatunpartenaireprivilgidanslaconceptiondespagesHtmlpar linteractivit quil permettait dajouter cellesci. Mais sa prsence et son influence restrent longtemps limites, principalementcausedesdifficultsderalisationdescriptsvraimentcompatiblesaveclesdiffrentsnavigateursde lpoque. LapparitionduDOM(Document Object Model),permettantdaccderoudemettrejourlecontenu,lastructureetle style des documents Html, fut le premier moteur du renouveau du JavaScript. Dautant plus que le DOM, recommandation du W3C, fut largement adopt par tous les navigateurs. Ce qui attnua les problmes dinteroprabilitdesscripts. Vinrent ensuite AJAX (Asynchronous JavaScript and XML) et les requtes XMLHttpRequest associes qui donnrent naissanceauJavaScriptasynchroneoffrantlapossibilitdemodifierunepartiedespagesWebsansdevoirrecharger lentiretdecellesci.LaportetaitouvertedesapplicationsJavaScriptbeaucoupplusrichesrpondantaumieux ausoucidinteractivitdesapplicationsWeb.Iciaussilacompatibilittaitgagnante. Le concept du Web 2.0, dans ses objectifs dune meilleure usabilit et dune plus grande ergonomie, a quant lui encore renforc linteractivit des pages et la demande dapplications plus tendues. Et voil le JavaScript propuls commeunlmentincontournabledansledveloppementdesapplicationsWeb. LameilleurepreuvedecerepositionnementduJavaScriptestassurmentlapparitiondenouveauxmoteursJavaScript danslesnavigateursrcents.QuecesoitGoogleChromeavecsonmoteurJavaScriptOpenSourceV8,Operaavecle projetCarakan,Safaridanssaversion4ouFirefox3.5avecTraceMonkey,touscherchentamliorer(etparfoisde faonsensible)letraitementduJavaScript.SeulInternetExplorer8estunpeulatranemaislerenouvellementde sonmoteurJavaScriptfaitpartiedesprioritsdInternetExplorer9.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

PrsentationdeJQuery
jQueryestunframeworkJavaScriptlibreetOpenSource,implantctclient,quiportesurlinteractionentreleDOM, JavaScript,AJAXetleHtml.CettelibrairieJavaScriptapourbutdesimplifierlescommandescommunesduJavaScript.La devisedejQueryesteneffet,"criremoinspourfaireplus"(writelessdomore).

jQuery,dumoinslorigine,estl uvredunseulhomme:JohnResig.CejeunesurdoudeJavaScriptdveloppala premireversiondejQueryenjanvier2006.Ilavaitalorspeinevingtans!Sil reste llmentmoteurdejQuery,il peutmaintenantsefaireaiderparunecommunautdepassionns. LesspcificitsdejQuerysontnombreusesmaislessentielleestassurmentlasouplessequilapportepouraccder tousleslmentsdudocumentHtmlgrcelamultitudedeslecteursmisenplace(voirchapitreLesslecteursen jQuery).Cettecaractristiquefutdailleursretenuepourdonnerunnomceframework:jpourJavaScriptetQuery pourchercherouaccderauxlments. Notons galement que cette librairie jQuery est en constante volution. Les mises jour et nouvelles versions se succdentunrythmergulier: Aot2006:versionstabledejQuery1.0. Janvier2007:jQuery1.1. Septembre2007:jQuery1.2. Janvier2009:jQuery1.3. Cestsurlaversion1.3.queportecetouvrage. LaqualitdejQueryatreconnueparlesgrandscomptesduWebetdelinformatique.CitonsGoogle,Mozilla,Dell, IBM,WordPress,Nokiaetbiendautres.MicrosoftlaincorpordernirementsonlogicielVisualStudio.Sacroissance estrapideetilseposeenconcurrentsrieuxdautresframeworkcommePrototype,DojoToolkitetSciptaculouspour neciterqueceuxl.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

LespointsfortsdejQuery
LeframeworkjQueryestdeplusenplusreconnuetadoptparlesdveloppeurscarlesapportsdecetenvironnement sontnombreux. LapprochedejQueryneconsistepasseulementenuncodagedesscriptsplusintuitifsetconcismaissaphilosophie premireestconcentresurlensembledeslmentsprisencompteparleDOM.LeJavaScripttraditionnel,dansson volution historique, a d saccommoder du Document Object Model. John Resig avec jQuery, a en quelque sorte reconsidrleJavaScriptenlepercevantcommeunvritablelangagedeprogrammationaxenprioritsurleDOM.Ce quimodifietotalementlafaondapprhenderetdcrireleJavaScript. TousleslmentsduDOMsontaismentaccessiblesavecjQuery.Lesmthodes getElementById, getElementsByName et getElementsByTagName du JavaScript montrent trs rapidement leurs limites, spcialement lorsque le concepteur souhaiteaccderauxattributsetautrespropritsdestyle.AvecjQuery,tousleslmentsdudocumentpeuventtre accds facilement et surtout intuitivement. Le chapitre suivant, consacr aux slecteurs, illustrera la diversit apporteparjQueryenlamatire. Lapproche de jQuery est complte. Les mthodes et fonctions de jQuery ne se limitent pas quelques animations dordreesthtique.Parquelqueslignesdecode,jQuerypeutmodifierdutexte,insrerdesimages,trierdestableaux ourorganiserlentiretdelastructuredudocumentHtml.CeframeworkposeunregardnouveausurleJavaScript et,aprsunbrefapprentissage,simplifiegrandementlaconceptionetlcrituredesscripts.Nousnemanqueronspas dattirervotreattention,danslasuitedecetouvrage,surlaconcisionducodeainsiproduit. LecodejQueryestcompatibleaveclesdiffrentsnavigateurs.Ladviancedesnavigateurs,infimeouplusmarque, parrapportauxstandardsduDOMetdesfeuillesdestyle,estuneregrettableralitdudveloppementdapplications Webvolues.GrcelinterfacelogicielleajouteparjQuery,lecodedesapplicationsservlecompatibleavecles principaux navigateurs du march. Il faut dj fouiller les trfonds des forums spcialiss pour trouver quelques accrochages portant sur des dtails sommes toutes peu utiliss. Cette compatibilit ressort en particulier sur les lments de feuilles de style CSS3 qui ne sont encore reprises que de faon trs fragmentaire par les navigateurs. Citonscommeexemplelopacitdeslments.LesmthodesjQuery fadeIn(), fadeOut()et fadeTo() permettent de fairevariercetteopacitdemanirecompatibleavectouslesnavigateurs. Une communaut dynamique de dveloppeurs soutient jQuery. Cette communaut, initie selon les principes historiques de passion et de partage dInternet, fournit une multitude de plugins, soit des extensions de jQuery, ddies des tches trs spcifiques. Ces plugins, souvent des merveilles de programmation, sont disponibles librement sur la toile et sont trs priss par les concepteurs de site. Un carrousel dimages ou un tableau triable implmentenquelquesminutesetenquelqueslignesdecode,simplifiegrandementleurtravail.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

MiseenplacedejQuery
jQuerytantunelibrairiectclient,samiseenplaceestextrmementsimple. Dansunpremiertemps,ilfauttlchargerjQuery.LadresselaplusindiquepourleraliserestcelledusitedejQuery luimme soit http://jquery.com/. Sous la rubrique Download, il vous est propos une version compresse dite de production(production)de19KBetuneversiondedveloppement(development)de120KB.Cettedernireestbien adapte notre tude car elle permet au plus curieux de jeter un il sur le code utilis par jQuery. La version de productionestutiliseunefoisletravaildedveloppementterminetvospagesmisesenligne. Aumomentdelcrituredecetouvrage,lefichiertlchargportelenomdejquery1.3.2.js.Pourlasuitede notretude,nouslavonsrenommenjquery.js.Unefoiscefichiertlcharg,ildevratreprsentdansle mmedossierqueceluidelapageHtml(ouXhtml)quicomporteraunscriptjQuery.

LespagesfaisantappelduJavaScripttraitparjQuerydoiventcomporterdanslenttedudocument,soit entre les balises <head> </head>, un appel vers ce fichier JavaScript externe : <script type="text/javascript" src="jquery.js"></script> Commentaires LalibrairiejQueryestainsichargechaquefoisquelleestncessaireaubondroulementdelapage.Ilfautce propos souligner le caractre compact de la librairie jQuery. Avec ses 19 KB dans sa version de production, elle na quasiaucuneconsquencesurletempsdetlchargementdelapage.Eneffet,19KBcorrespondautlchargement dunepetiteicneprsentedansledocument. Ilatditciavant,quelefichierjquery.jsdevaittreprsentdanslemmedossierquelapageHtml.Cettefaonde procderestidalementadaptelapprentissagedejQuery.Danslapratique,jquery.jsserasouventinclusdansun sousrpertoire par exemple js. On y accde alors par <script type="text/javascript" src="js/jquery.js"></script>. IlestpossibledutiliserdirectementlesversionsdejQueryhbergesparGooglesurAJAXLibrariesAPI.Lelienversle fichierjQuerydevientalors: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> ou <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.min.js"> </script> LestenantsdecettemthodeavancentunechargerduiteduserveurdevotresiteetuneconnexionjQueryaussi (sinonplus)rapidequpartirdunserveurquelconque.Deplus,celapermetauxnavigateursdenepastlcharger inutilementplusieursfoislammelibrairiesurchaquesitequilutilise,puisquunefoisjQuerytlchargpartirdes serveursdeGoogleetmisencache,lenavigateurnauraplusletlchargernouveau.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

InitierunscriptjQuery
Leframeworkmisenplaceetprttreutilis,ilfautaupralableparcourirquelquesnotionsthoriques. TouteslesinstructionsoupourtreplusprcislesscriptsjQuerysarticulentautourdunmodleunique.Soit, jQuery(function(){ //contenu excut lorsque le document sera charg }); Pourconomiserdesfrappesdeclavier,lesignedollar($)quifonctionnecommealiasdejQueryestpresquetoujours utilis. $(function(){ //contenu excut lorsque le document sera charg }); Serfrantcemodle,toutscriptjQuerycommencepar: <script type="text/javascript"> $(document).ready(function() { // code jQuery }); </script> Soit,selonunerestitutionassezlibre,crerunobjetjQuery($)partirdudocument(document)quandceluiciestprt (ready). LaparticularitdecettefonctionestdechargerleslmentsduDOMdsqueceuxcisontdisponibles,soitbienavant lechargementcompletdelapage. Ce en quoi jQuery se diffrencie du JavaScript classique. Celuici utilise, par exemple, le classique window.onload = function()quiattendquelapageettousleslmentsquellecontientsoientcompltementchargs.Cequipeuttre trslongspcialementlorsquilyadesimagesdunetailleconsquente.CestuneparticularitessentielledejQuery quisebase,rappelonsle,defaonnativesurleslmentsduDOM. Cemodedefonctionnementprsentedenombreuxavantages: Tousleslmentsdelapagesontinclusdansunobjetquelesslecteurs,mthodesetfonctionsdejQuerypourront manipuler. LecodeHtmlestdpouilldetoutesmentionsJavaScriptcommeparexemplelesnotations <a href="javascript:void (0);">lien</a>. Tout le code JavaScript/jQuery se situe dans une partie spare de la page Html (entre les balises <head>...</head>)oudansunfichierjsexterne.Cequirespectepleinementleprincipedelasparationducontenu etdelaprsentation. Avec$(document).ready(),leslmentsdelapagesontladispositiondudveloppeur,avantlechargementcomplet etlaffichagedecelleci.Cequiestbienpratiquepouractiverdeseffetsdapparitionoudedisparitiondslaffichagede lapageparlenavigateur. VousrencontrerezsurlatoiledesscriptsjQueryquidbutentaveclcritureraccourcie: $(function () { // code jQuery }); Nousgarderonstoutaulongdecetouvrage,linstruction$(document).ready()plusacadmiqueetplusparlante. Le signe $ est galement utilis par dautres framework comme par exemple Prototype. La mthode jquery.noconflict (voir le chapitre Quelques mthodes utilitaires viter les conflits) permet dviter les conflitslappeldelalias$avecuneautrelibrairiequiutiliseraitgalementcenommagepourunedesesfonctions.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

UnepremireapplicationjQuery
Ralisonscommeentreenmatire,unmenudenavigationverticaldroulant. Le but ici nest pas de comprendre les mthodes jQuery qui seront tudies plus avant mais davoir un aperu de limplantation et lorganisation gnrale des scripts jQuery. Cette premire application a aussi comme objectif de familiariserlelecteuraveclapprochesuivieparlauteurdansnotreexplorationdejQuery.

LefichierHtmldedpartseprsenteainsi: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> body { margin: 10px; font: 0.8em Arial, Helvetica, sans-serif;} .menu { width: 150px;} .menu_chapitre { padding: 5px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background: #9cf;

ENI Editions - All rigths reserved - Jonifar lina

- 1-

border: 1px solid black;} .menu_point a { display:block; color:black; background-color:white; padding-left:30px; text-decoration:none;} .menu_point a:hover { color: black; text-decoration:underline;} </style> </head> <body> <div> <div class="menu"> <p class="menu_chapitre">Chapitre 1</p> <div class="menu_point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> <p class="menu_chapitre">Chapitre 2</p> <div class="menu_point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> <p class="menu_chapitre">Chapitre 3</p> <div class="menu_point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> </div> </div> </body> </html>

laboronslescriptjQuerypaspas. Nous supposons que la librairie jquery.js a t tlcharge et incorpore dans le dossier contenant le fichier Html prcdent. AppelonslejQueryenplaantentrelesbalises<head>et</head>,labalisedenttesuivante.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

<script type="text/javascript" src="jquery.js"></script> Lescriptenluimmepeutdbuter. <script type="text/javascript"> $(document).ready(function(){ ... }); </script> AveccettepremireinstructionjQuery,larbreduDOMrelatifaudocumentestchargdansunobjetjQuery. Une premire opration effectuer consiste ne pas afficher les sousmenus, soit les divisions dont la classe est menu_point. <script type="text/javascript"> $(document).ready(function(){ $("div.menu_point").hide(); ... }); </script> Ainsi, jQuery ($) slectionne ces divisions <div> dont la classe est menu_point (("div.menu_point")) et les fait disparatre(hide()). Passonsmaintenantlapartiequiprendenchargeledroulementdusousmenulorsquundeschapitresatcliqu. <script type="text/javascript"> $(document).ready(function(){ $("div.menu_point").hide(); $("p.menu_chapitre").click(function(){ $(this).next("div.menu_point").slideDown(300) .siblings("div.menu_point").slideUp("slow"); }); }); Dtaillonscettepartie: $("p.menu_chapitre").click(function(){ Le clic dundesparagraphesdontlaclasseest menu_chapitre (soit de faon code $("p.menu_chapitre"))engendre unefonctionquiseradtailleparleslignessuivantes( click(function()). $(this).next("div.menu_point").slideDown(300) partirdecetlment(this),lescriptdemandederechercherllment<div>quilesuitetquialaclassemenu_point (soit next("div.menu_point")).Ondemandealorsdefaireapparatrecettedivisionselonuneffetdeglissementvers lesbas( slideDown(300)). .siblings("div.menu_point").slideUp("slow"); Ilfautencorerefermerlesdivisionsouvertesdesautreschapitres.IlestdemandjQuerydeslectionnerlesfrres immdiats(siblings)dechaquedivision<div>quidisposeduneclasse menu_point(siblings("div.menu_point"))et derefermercesdivisionsparuneffetdeglissementverslehaut(slideUp("slow")). Ilfautnoterquedemultiplesactionsonttainsiencodesdansunemmeinstruction.Cesdiffrentesoprations sontsimplementreliesparunpoint. }); Findecettefonctionrelativeauclicdunparagraphe. }); Findureadyetfindescript. VousremarquerezdjlaconcisionducodejQuery.Quelqueslignessuffissentpourdveloppercescript.

ENI Editions - All rigths reserved - Jonifar lina

- 3-

Aufinal,lefichierHtmlseprsenteainsi: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div.menu_point").hide(); $("p.menu_chapitre").click(function(){ $(this).next("div.menu_point").slideDown(300) .siblings("div.menu_point").slideUp("slow"); }); }); </script> <style type="text/css"> body { margin: 10px; font: 0.8em Arial, Helvetica, sans-serif;} .menu { width: 150px;} .menu_chapitre { padding: 5px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background: #9cf; border: 1px solid black;} .menu_point a { display:block; color:black; background-color:white; padding-left:30px; text-decoration:none;} .menu_point a:hover { color: black; text-decoration:underline;} </style> </head> <body> <div> <div class="menu"> <p class="menu_chapitre">Chapitre 1</p> <div class="menu_point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> <p class="menu_chapitre">Chapitre 2</p> <div class="menu_point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> <p class="menu_chapitre">Chapitre 3</p> <div class="menu_point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> </div> </div> </body> </html>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

10

LadocumentationrelativejQuery
LadocumentationrelativejQueryestabondantesurlatoilemaisestmajoritairementenanglais. UnedocumentationenlignetrscompltedejQuery,estdisponiblesurlesiteofficiel :http://docs.jquery.com/ Ilestgalementpossibledeconsultercettedocumentationhorsligne:
G

SousformedunfichierAdobeAirtlchargersurhttp://api.jquery.com/ Sous forme dun fichier chm tlcharger ladresse : http://charupload.wordpress.com/2007/12/07/jquery documentationchm/ SousformeduneAPI:http://jquery.bassistance.de/apibrowser/

Un aidemmoire prcieux au format Adobe pdf ou Microsoft xls ou image png est disponible lurl http://www.javascripttoolbox.com/jquery/cheatsheet/ Citonsaussi,VisualjQueryconsultableenligne(http://visualjquery.com/)outlchargeableauformatzipladresse: http://support.aptana.com/asap/browse/STU3495 Pourunedocumentationcomplteenfranais,ilfautsereporter:
G

Au site Developpeur Web 2 qui propose une traduction assez fidle de la documentation officielle (jquery.developpeurweb2.com/documentation.php). Ausitetrssympathiqueetdexcellentefacturedunpassionnladresse:jquery.jarodxxx.com/.

Lorsque vous consultez les documentations et tutoriels relatifs jQuery, assurezvous quils correspondent bien la version 1.3. Il y a en effet des diffrences sensibles entre la version 1.2 et 1.3. Pour exemple, les slecteurs dattributs comportant le signe @ ne sont plus reconnus par la version 1.3. Les notations du style a [@href] ou $("input[@type= radio][@checked]") nont plus cours et indiquent que la documentation consulte est obsolte.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

11

Outilsdedveloppementetdedbogage
RappelonsquejQueryestunframeworkctclient.Ainsi,ilnencessitequunstrictminimumdoutilsunnavigateur etunditeurdetexte.IlfautcependantnoterquepourlesscriptsAJAX(voirchapitreAJAXvuparjQuery),linstallation dunserveurWeblocalestprvoirmaisnousyreviendronslorsdeltudedecechapitre. Pour ce qui est du dbogage, il nexiste pas de solution miracle pour debugger le code JavaScript. Pourtant, les navigateurs proposent depuis quelque temps, des solutions innovantes permettant dinspecter et de dbugger lenvironnementdespagesWeb,soitleHtml,lesCSS,lesscriptsetleDOM. LeplusreconnuparlesdveloppeursestFirebug.CetteextensiondeFirefoxpermet,enuncoupd il,decontrler votreHtml,CSS,JavaScript,DOMetAJAX.

Pourentirerlemeilleurprofit,nemanquezpasdeconsulterlexcellenttutorial(enfranais)ladresse: http://ericpommereau.developpez.com/tutoriels/outilweb/firebug/ Il existe galement une solution multiplateforme pour les autres navigateurs soit Firebug Lite, qui est le pendant "script"delextensionpourFirefox.Cetteinteroprabilitsepaie(pourlinstant)pardesperformancesinfrieuresla solutionrserveFirefox. Pour sa part, Internet Explorer 8 propose de faon native, des outils de dveloppement qui ne sont pas sans ressemblerceuxdeFirebug.OnyaccdeparlemenuOutilsOutilsdedveloppement(touchederaccourci[F12]).

CitonsencoreDragonflydebuggerpourOperaetWebInspectorpourSafari.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

12

Introduction
LesslecteurssontlundesaspectsleplusimportantdelalibrairiejQuery.Ceuxciutilisentunesyntaxequinestpas sans rappeler celle des feuilles de style CSS. Ils permettent aux concepteurs didentifier rapidement et aisment nimportequellmentdelapageetdyappliquerlesmthodesspcifiquesjQuery. LabonnecomprhensiondecesslecteursjQueryestunlmentclpourlabonnecomprhensionetutilisationde jQuery. Un site Web illustre merveille le rle de ces slecteurs. Il est srement utile de le consulter ladresse www.codylindley.com/jqueryselectors/

ENI Editions - All rigths reserved - Jonifar lina

- 1-

13

Lesslecteursdebase
Ces slecteurs basiques de jQuery ne sont en fait quune reformulation des mthodes getElementById et getElementsByTagNameduJavaScripttraditionnel. LanotationrepriseparjQueryprsentelesavantagesdtreplusconciseetbeaucoupplusintuitive. CesslecteursbasiquessonttrsfrquemmentutilissdanslesscriptsjQueryetleurbonnecomprhensionservle indispensablelapprentissagedejQueryetlasuitedecetouvrage.

1.Slectionparlidentifiant
#identifiant Slectionnellment(unique)spcifiparlattributid="identifiant". $("#box"):slectionnellmentdontlidestbox. CestlanotationjQuerydegetElementByIdduJavaScriptclassique. Rappelons que cet identifiant doit tre unique dans la page. Si par erreur, ce ntait pas le cas, jQuery reprend le premierlmentdotdecetidentifiant. Exemple Entouronsdunebordure,lesecondparagraphedontlidentifiantest"deux". SoitlefichierXhtmlsuivant: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#deux").css("border","1px solid black"); }); </script> <style type="text/css"> p { width: 200px; padding: 3px;} </style> </head> <body> <p>Paragraphe 1</p> <p id="deux">Paragraphe 2</p> <p>Paragraphe 3</p> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

14

DtaillonslescriptjQuery. $(document).ready(function(){ InitialisationdejQuery.LescriptestprtoprerdslechargementduDOM. $("#deux").css("border","1px solid black"); Ilestappliqullmentdontlidest"deux"($("#deux")),lamthodejQueryquipermetdemodifierlesproprits CSS,soiticidajouterunebordure( css("border","1px solid black")).CettemthodejQuery css()seratudieen dtailauchapitreManipulationdesfeuillesdestyleCSS. }); Finduscript.

2.Slectionparlenomdelabalise
lment Slectionnetousleslments(oubalises)dontlenomestspcifi. $("div"):slectionnetouteslesdivisions<div>delapage. CestlanotationjQuerydegetElementsByTagNameduJavaScriptclassique. Exemple EntouronsduneborduretouslesparagraphesdudocumentXhtml. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("p").css("border","1px solid black"); }); </script> <style type="text/css"> p { width: 200px; padding: 3px;} div { padding: 3px;}
- 2 ENI Editions - All rigths reserved - Jonifar lina

15

</style> </head> <body> <p>Paragraphe 1</p> <p>Paragraphe 2</p> <div>Division 1</div> </body> </html>

$("p").css("border","1px solid black"); jQueryslectionnetouteslesbalisesdeparagraphe<p>($("p"))etappliquecellesci,unebordureparlamthode css().

3.Slectionparlaclasse
.classe Slectionnetousleslments(oubalises)aveclaclassespcifie. $(".texte"):slectionnetousleslmentsdotsdelattributclass="texte". Exemple Entouronsdunebordureleparagraphedotdelaclassegras.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $(".gras").css("border","1px solid black"); }); </script> <style type="text/css"> p { width: 200px; padding: 3px;} .gras { font-weight: bold;} </style> </head> <body> <p class="gras">Paragraphe 1</p>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

16

<p>Paragraphe 2</p> <p>Paragraphe 3</p> </body> </html>

$(".gras").css("border","1px solid black"); LabaliseaveclaclassegrasestslectionneparjQuery( $(".gras")).Unebordureestalorsapplique. Commentaires Onauraitpunoter: $("p.gras").css("border","1px solid black").Ainsi,jQueryslectionnelesbalises <p>avecla classegras. Selon les experts, cette notation serait plus efficace car jQuery peut retrouver directement les balises <p> dans le DOMetensuitefiltrercellesquipossdentuneclassegras. La notation avec plusieurs classes est envisageable. $(".classe1.classe2") slectionne tous les lments qui ont commenomdeclasseclasse1etclasse2. Leslecteurtoile*permetdeslectionnertousleslments. $("*").css("border","1px solid black"); jQuerypermetdassocierplusieursslecteurs. $("div,span,p.nom_classe").css("border","1px solid black");

- 4-

ENI Editions - All rigths reserved - Jonifar lina

17

Lesslecteurshirarchiques
LanotationDOMavecsesparents,descendants,enfants,frresets urs(siblings)estmaintenantbienancredans lcritureduJavaScript.LalibrairiejQuerynepouvaitignorercettefaondeprocder.

1.Slectiondesdescendants
AscendantDescendant Slectionnetouslesdescendantsdellmentnot"Descendant"parrapportllmentparentnot"Ascendant". $("#box p"):slectionnetouslesdescendantsde<p>contenusdansllmentparentidentifiparbox. Lesdescendantspeuventtrelesenfants,lespetitsenfantsetlesarrirepetitsenfants. Exemple Soitdesdivisionsquicontiennentdiverslments.Retrouvonstouslesdescendantsdellmentidentifiparid="box".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#box *").css("border", "1px double black"); }); </script> <style type="text/css"> span#box { display: block;} div { width: 80px; height: 100px; margin: 5px; float: left; background: #9cf; } p { text-align: center;} </style> </head> <body> <span id="box"> <div></div> <div><p>X <img src="jquery.png" alt="" /> X</p></div> <div><p>Par<br /><span>a</span><br />graphe</p></div> </span> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

18

$("#box *").css("border", "1px double black"); LescriptjQueryslectionnetouslesdescendantsdellmentavecunidentifiantbox($("#box *"))etentoureceuxci dunebordure. Ilfautremarquerquesontentoursdunebordure,nonseulementlesenfantssoitlesdivisions <div>,maisaussiles petitsenfantssoitlesbalises<p>etlesarrirepetitsenfantssoitlesbalises<img>et<span>.

2.Slectiondesenfants
Parent>Enfant Slectionnetousleslmentsnotspar"Enfant"quisontlesenfantsdirectsdellmentparentnot"Parent". $("#box > p"):slectionnetouslesenfantsimmdiatsde<p>contenusdansllmentparentidentifiparbox. Exemple Reprenonslagencementdelexempleprcdent.Retrouvonslesenfants(etuniquementlesenfants)dellmentidentifi parid="box".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#box > *").css("border", "1px double black"); }); </script> <style type="text/css"> span#box { display: block;} div { width: 80px; height: 100px; margin: 5px; float: left; background: #9cf; } p { text-align: center;} </style> </head> <body> <span id="box"> <div></div> <div><p>X <img src="jquery.png" alt="" /> X</p></div>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

19

<div><p>Par<br /><span>a</span><br />graphe</p></div> </span> </body> </html>

$("#box > *").css("border", "1px double black"); LescriptjQueryslectionnetouslesenfantsdirectsdellmentavecunidentifiantbox($("#box > *"))etentoure ceuxcidunebordure. Ilfautremarquerquelespetitsenfants <p> et arrirepetitsenfants <img>ou <span>nesontplusentoursparune bordure. Onauraitpucrire: $("#box > div").css("border", "1px double black");

3.Slectiondesfrressuivants
Prcdent~Frres Cible les lments frres situs aprs llment identifi par le slecteur "Prcdent" et qui rpondent au slecteur "Frres". $("#prev ~ div")trouvetouteslesdivisions<div>quisontfrresaprsllmentavec#prevcommeidentifiant. Exemple Soitunelistenonordonne.Retrouvonsleslmentsfrresdupremieritemdelaliste. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("li.un ~ li").css("border", "1px double black"); }); </script> <style type="text/css"> li { width: 150px; padding-left: 3px;} </style> </head> <body>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

20

<ul> <li class="un">Item 1</li> <li class="deux">Item 2</li> <li class="trois">Item 3</li> <li class="quatre">Item 4</li> <li class="cinq">Item 5</li> </ul> </body> </html>

$("li.un ~ li").css("border", "1px double black"); Lescriptslectionnetouslesfrresdellmentdeliste<li>dotdelaclasse un($("li.un ~ li")).Touslesautres itemsdelalistesontainsirepris.

4.Slectiondellmentsuivant
Prcdent+Suivant Cible llment immdiatement suivant situ aprs llment identifi par le slecteur "Prcdent" et qui rpond au slecteur"Suivant". $("#prev + div")trouveladivision<div>quisuitllmentavec#prevcommeidentifiant. Exemple Soitunelistenonordonne.Retrouvonsllmentsuivantdupremieritemdelaliste. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("li.un + li").css("border", "1px double black"); }); </script> <style type="text/css"> li { width: 150px; padding-left: 3px;} </style> </head> <body>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

21

<ul> <li class="un">Item 1</li> <li class="deux">Item 2</li> <li class="trois">Item 3</li> <li class="quatre">Item 4</li> <li class="cinq">Item 5</li> </ul> </body> </html>

$("li.un + li").css("border", "1px double black"); Trouvelefrreimmdiatparmilesfrresdellmentdeliste<li>dotdelaclasseun($("li.un + li")).

ENI Editions - All rigths reserved - Jonifar lina

- 5-

22

LesfiltresjQuerydebase
Tous les lments du DOM tant rpertoris par jQuery, il devient facile de filtrer des lments dtermins comme le premier,ledernier,etc.

1.Lepremierlment
:first Slectionnelapremireinstancedunlment. $("li:first"):slectionnelepremierlmentdeliste<li>dudocument. Leslecteur :firstslectionneunseullmenttandisque:first-child(voirLesfiltresenfantsLepremier lmentduprsentchapitre)peutenslectionnerplusieurs,soitunpourchaqueparent.

Exemple Mettreunarrireplandecouleurlapremireligneduntableau. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:first").css("background", "#9cf"); }); </script> <style type="text/css"> table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> <tr><td>10</td><td>11</td><td>12</td></tr> </table> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

23

$("tr:first").css("background", "#9cf"); $("tr:first")slectionnelapremirebalise<tr>.

2.Ledernierlment
:last Slectionneladernireinstancedunlment. $("li:last"):slectionneledernierlmentdeliste<li>dudocument. Exemple Mettreunarrireplandecouleurladernirecelluleduntableau. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:last").css("background", "#9cf"); }); </script> <style type="text/css"> table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> <tr><td>10</td><td>11</td><td>12</td></tr> </table> </body> </html>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

24

$("td:last").css("background", "#9cf"); $("td:last"):lescriptslectionneladernirebalise<td>.

3.Leslmentspairs
:even Slectionneleslmentspairsselonunindexcommenant0. $("tr:even"):slectionneleslignesdindexJavaScript0,2,4soitleslignes1,3,5lcran. Exemple Appliquonsuneffetlistinguntableauendotantunelignesurdeuxdunarrireplan. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:even").css("background", "#9cf"); }); </script> <style type="text/css"> table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> <tr><td>10</td><td>11</td><td>12</td></tr> <tr><td>13</td><td>14</td><td>15</td></tr> </table> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

25

$("tr:even").css("background", "#9cf"); jQueryslectionnelesbalises<tr>pairesetlesagrmentedunarrireplandecouleur. CeteffetquirclameraitdenombreuseslignesdecodeenJavaScriptclassique,seprogrammeenjQueryen uneseuleligne.CetexempleillustrebienlaconcisionducodegnrenjQuery.

4.Leslmentsimpairs
:odd Slectionneleslmentsimpairsselonunindexcommenant0. $("tr:odd"):slectionnelescellulesdindexJavaScript1,3,5soitlescellules2,4,6,lcran. Exemple Appliquonslemmeeffetlistinguntableauendotantunelignesurdeuxdunarrireplanmaisavecdautreslignesqu lexempleprcdent. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:odd").css("background", "#9cf"); }); </script> <style type="text/css"> table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

26

<tr><td>10</td><td>11</td><td>12</td></tr> <tr><td>13</td><td>14</td><td>15</td></tr> </table> </body> </html>

$("tr:odd").css("background", "#9cf"); jQueryslectionnelesbalises<tr>impairesetlesagrmentedunarrireplandecouleur.

5.Unlmentdtermin
:eq(index) Slectionnellmentdterminparlavaleurdelindex. Comme les index JavaScript dbutent zro, le slecteur :eq(0) slectionne donc le premier lment, :eq(1) le secondlmentetainsidesuite. $("td:eq(2)"):slectionnelatroisimecelluleduntableau. Exemple Soitunelistenumrote.Retrouvonsllmentdelistequiapparatensecondepositionlcran. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li:eq(1)").css("background", "#9cf"); }); </script> <style type="text/css"> li { width: 150px;} </style> </head> <body> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

27

<li>Item de liste 5</li> </ul> </body> </html>

$("li:eq(1)").css("background", "#9cf"); Lesecondlmentestaccdpar:eq(1).Ilsuffitdespcifierquecestlesecondlmentdeliste( $("li:eq(1)")).

6.Leslmentssuivants
:gt(index) Slectionneleslmentsavecunevaleurdindexsuprieure(greaterthan)lavaleurfournieenparamtre. Pourrappel,lesindexJavaScriptdbutent0. $("a:gt(1)"):slectionnetouslesliensdelapageencommenantparletroisime(soitaprslesecondlment). Exemple Soitunelistenumrote.Slectionnonsleslmentsdelistedelitemdeliste3lafindecelleci. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li:gt(1)").css("background", "#9cf"); }); </script> <style type="text/css"> li { width: 150px;} </style> </head> <body> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul>

- 6-

ENI Editions - All rigths reserved - Jonifar lina

28

</body> </html>

$("li:gt(1)").css("background", "#9cf"); ("li:gt(1)"):tousleslmentsdelalistequisuiventlitem2sontslectionns.

7.Leslmentsprcdents
:lt(index) Slectionneleslmentsavecunevaleurdindexinfrieure(lessthan)lavaleurfournieenparamtre. Parrappel,lesindexJavaScriptdbutent0. $("p:lt(3)"):slectionnetouslesparagraphessitusavantlequatrime,soitlestroispremiersparagraphes. Exemple Soitunelistenumrote.Slectionnonslesquatrepremierslmentsdecelleci. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li:lt(4)").css("background", "#9cf"); }); </script> <style type="text/css"> li { width: 150px;} </style> </head> <body> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 7-

29

$("li:lt(4)").css("background", "#9cf"); $("li:lt(4)"):tousleslmentsdelistequiprcdentlitem5sontslectionns.

8.Lesbalisesdetitre
:header Retournetousleslmentsquisontdesbalisesdetitrecomme<h1>,<h2>,<h3>,etc. $(":header"):slectionnetouteslesbalisesdetitredelapage. Exemple Slectionnonstouteslesbalisesdetitredelapage. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(":header").css("background", "#9cf"); }); </script> <style type="text/css"> body { font-size: 10px; font-family: Arial; } h1, h2, h3 { margin: 3px 0; } </style> </head> <body> <h1>Titre de niveau 1</h1> <p>Contenu</p> <h2>Titre de niveau 2</h2> <p>Contenu</p> <h3>Titre de niveau 3</h3> <p>Contenu</p> </body> </html>

- 8-

ENI Editions - All rigths reserved - Jonifar lina

30

$(":header").css("background", "#9cf"); $(":header"):slectionnetouteslesbalisesdetitredelapage.

9.Exclusiondunlment
:not(slecteur) Exclutdelaslectiontousleslmentsquirpondentaucritrespcifiparleslecteur. $("div:not(#box)"):slectionnetouteslesdivisionssaufcelleidentifieparbox. Exemple Slectionnonstousleslmentsdunelistelexclusiondepremieretdernieritem. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li:not(:first, :last)").css("background", "#9cf"); }); </script> <style type="text/css"> li { width: 150px;} </style> </head> <body> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 9-

31

$("li:not(:first, :last)").css("background", "#9cf"); Slectionnetousleslmentsdeliste<li>sauflapremireetdernireoccurrencedeceuxci. Ilfauttreattentiflordreetauplacementdesparenthsesouvrantesetsurtoutfermantes.

- 10 -

ENI Editions - All rigths reserved - Jonifar lina

32

Lesfiltresenfants
Danscechapitre,nousavonsdjabordlesslecteurshirarchiquesquipermettaientdeslectionnerlesenfants. Lesfiltresenfantspermettentdeffectueruntriparmilesenfantsdunlment.

1.Lepremierenfant
:firstchild Slectionnetousleslmentsquisontlepremierenfantdeleurparent. $("ul:first-child"):slectionnelepremierenfant(soitlepremierlmentdeliste)delalistenonordonne<ul>. Le slecteur :first-child peut slectionner plusieurs lments soit un pour chaque parent. ne pas confondre avec :first qui ne reprend quun seul lment (voir la section Les filtres jQuery de base Le premierlmentduprsentchapitre).

Exemple Retrouvonslepremierlieninclusdansunparagraphe. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p a:first-child").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 15px;} </style> </head> <body> <p> <a href="#">Lien 1</a><br /> <a href="#">Lien 2</a><br /> <a href="#">Lien 3</a><br /> <a href="#">Lien 4</a><br /> <a href="#">Lien 5</a> </p> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

33

$("p a:first-child").css("background", "#9cf"); $("p a:first-child"):lepremierlien<a>,enfantdelabalise<p>estslectionn.

2.Ledernierenfant
:lastchild Slectionnetousleslmentsquisontledernierenfantdeleurparent. $("ul:last-child"):slectionneledernierenfant(soitledernierlmentdeliste)delalistenonordonne<ul>. Le slecteur :last-child peut slectionner plusieurs lments soit un pour chaque parent. ne pas confondre avec :last qui ne reprend quun seul lment (voir la section Les filtres jQuery de base Le dernierlmentduprsentchapitre).

Exemple Retrouvonsledernierlieninclusdansunparagraphe. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p a:last-child").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 15px;} </style> </head> <body> <p> <a href="#">Lien 1</a><br /> <a href="#">Lien 2</a><br /> <a href="#">Lien 3</a><br />

- 2-

ENI Editions - All rigths reserved - Jonifar lina

34

<a href="#">Lien 4</a><br /> <a href="#">Lien 5</a> </p> </body> </html>

$("p a:last-child").css("background", "#9cf"); $("p a:last-child"):ledernierlien<a>,enfantdelabalise<p>estslectionn.

3.Lenimeenfant
:nthchild(index) Slectionneleslmentsquisontlenimeenfantdeleurparent.Lapositionestfournieparleparamtreindex. AucontrairedenombreuxindexenjQuery,lindexnedbutepasici0mais1. $("ul li:nth-child(2)"):slectionnelesecondlment<li>delaliste<ul>. Revenons cette fameuse exception concernant lindex. La plupart des index utiliss par jQuery font appel des fonctions natives de JavaScript et respectent la convention de dbuter les index 0. Le slecteur :nth-child, slecteurspcifiquejQuery,eststrictementdrivdesspcificationsCSS.Lavaleurdindex1signifiedoncbienquil sagitdupremierlment. La confusion avec :eq(index), abord la section Les filtres jQuery de base Un lment dtermin du prsent chapitre, dont lindex commence 0, peut tre une source derreur difficilement dcelable dans certains scripts jQuery. Exemple Retrouvonsllmentdelistequiapparatensecondepositionlcran. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li:nth-child(2)").css("background", "#9cf"); }); </script> <style type="text/css"> li { width: 150px;}

ENI Editions - All rigths reserved - Jonifar lina

- 3-

35

</style> </head> <body> <ul> <li>Item <li>Item <li>Item <li>Item <li>Item </ul> </body> </html>

de de de de de

liste liste liste liste liste

1</li> 2</li> 3</li> 4</li> 5</li>

$("li:nth-child(2)").css("background", "#9cf"); Lescriptslectionnetousleslmentsdeliste<li>quisontensecondepositiondanslordredesenfants. Aveclefiltre:eq(),nousaurionsutilislanotation: $("li:eq(1)").css("background", "#9cf");

4.Lesenfantspairsetimpairs
Varianteduslecteurprcdent.Leslecteurnth-childpeutslectionnerleslmentspairsetimpairs. :nthchild(evenouodd) Slectionneleslmentsquisontlesnimesenfantspairs(even)ouimpairs(odd)deleurparent. Comme:nth-childdontilestunevariante,lindexdbute1. $("table tr:nth-child(odd)"):slectionneleslignesimpaires<tr>dutableau. Iciaussilaconfusionavec:evenet:odd(voirlessectionsLesfiltresjQuerydebase LeslmentspairsetLesfiltres jQuerydebase Leslmentsimpairsduprsentchapitre)estpossiblecarlindexdeceuxcidmarre0. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("table tr:nth-child(odd)").css("background", "#9cf");}); </script> <style type="text/css">

- 4-

ENI Editions - All rigths reserved - Jonifar lina

36

table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> <tr><td>10</td><td>11</td><td>12</td></tr> <tr><td>13</td><td>14</td><td>15</td></tr> </table> </body> </html>

$("table tr:nth-child(odd)").css("background", "#9cf");}); Le script slectionne tous les lments de ligne <tr> qui sont en rang impair dans lordredesenfantsdelabalise <table>.

5.Lesenfantsuniques
:onlychild Slectionne tous les lments qui sont enfant unique de leur parent. Si le parent a plusieurs enfants, aucune slectionnesteffectue. $("div button:only-child") : retrouve les boutons (balise <button>) qui nont pas de frre(s) dans toutes les divisionsrencontres. Exemple Retrouverlelienquiestenfantuniquedunebalisedeparagraphe<p>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){

ENI Editions - All rigths reserved - Jonifar lina

- 5-

37

$("p a:only-child").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 10px; margin-bottom: 0px;} </style> </head> <body> <p><a href="#">Lien 1</a> | <a href="#">Lien 2</a> | <a href="#">Lien 3</a><br /></p> <p><a href="#">Lien 1</a></p> <p><a href="#">Lien 1</a> | <a href="#">Lien 2</a></p> </body> </html>

$("p a:only-child").css("background", "#9cf"); $("p a:only-child") :jQuerypasseenrevuelesdiffrentsparagraphes.Examinelesliens<a>prsentsdansceuxci etneretientqueleparagraphequinecomportequunseullien.

- 6-

ENI Editions - All rigths reserved - Jonifar lina

38

Lesfiltresdecontenu
1.Untextedonn
:contains(texte) Slectionneleslmentsquicontiennentuntexteouunfragmentdetextefournienargument. Ilfautnoterquelargumenttexteestsensiblelacasse( casesensitive). $("div:contains(Eni)"):slectionnelesdivisionsquicontiennentletexte"Eni". Exemple Mettonsenvidencelesparagraphesquicontiennentlefragmentdetexte"En".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:contains(En)").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 10px; margin-bottom: 0px;} </style> </head> <body> <p>Editions Eni</p> <p>Spcialis en informatique</p> <p>En Bretagne</p> </body> </html> $("p:contains(En)").css("background", "#9cf");

ENI Editions - All rigths reserved - Jonifar lina

- 1-

39

$("p:contains(En)"):metenvidencelesparagraphescontenantleslettres"En".

2.Uncontenuvide
:empty Slectionnetousleslmentsquinontpasdenfants(incluslesn udsdetexte). $("div:empty"):slectionnelesdivisionsvides. Exemple Retrouvonslescellulesvidesduntableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:empty").css("background", "#9cf");}); </script> <style type="text/css"> table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <table> <tr><td>1</td><td>2</td><td></td></tr> <tr><td></td><td>5</td><td></td></tr> <tr><td>7</td><td></td><td>9</td></tr> </table> </body> </html> $("td:empty").css("background", "#9cf");}); $("td:empty"):retrouvelescellulesdetableau<td>vides.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

40

3.Laqualitdeparent
:parent Slectionneleslmentsquisontparent,cestdirequiontdeslmentsenfants,incluslesn udsdetexte. $("div:parent"):slectionnelesdivisionsquiontdeslmentsenfants. Ceslecteurestenquelquesortelinverseduprcdent. Exemple Reprenonsnotretableauetretrouvonslescellulesnonvides.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:parent").css("background", "#9cf");}); </script> <style type="text/css"> table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <table> <tr><td>1</td><td>2</td><td></td></tr> <tr><td></td><td>5</td><td></td></tr> <tr><td>7</td><td></td><td>9</td></tr> </table> </body> </html> $("td:parent").css("background", "#9cf");}); $("td:parent"):retrouvelescellulesdetableau<td>quiontuncontenuetquisontdoncparent.

4.Unslecteurdtermin

ENI Editions - All rigths reserved - Jonifar lina

- 3-

41

:has(slecteur) Slectionneleslmentsquicontiennentleslecteurtransmisenargument. $("div:has(p)"):slectionnelesdivisionsquicontiennentunoudesparagraphe(s). Exemple Retrouvonsleparagraphequicomporteunlien.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:has(a)").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 10px; margin-bottom: 0px;} </style> </head> <body> <p>Paragraphe</p> <p>Paragraphe <a href="#">Lien</a></p> <p>Paragraphe</p> </body> </html> $("p:has(a)").css("background", "#9cf"); $("p:has(a)"):retrouveleparagraphequipossdeunlien.

- 4-

ENI Editions - All rigths reserved - Jonifar lina

42

Lesfiltresdevisibilit
1.lmentvisible
:visible Slectionneleslmentsquisontvisibles. $("p:visible"):slectionnelesparagraphesvisibles. PourcefiltrejQuery,unlmentestconsidrcommevisiblesilconsommedelespacedansledocument. LespropritsCSSdevisibilitnesontpasprisesencompte.

Exemple Dotonslesdivisionsvisiblesdunarrireplandecouleur. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("div:visible").css("background", "#9cf"); }); </script> <style type="text/css"> .hidden { display:none;} div { width: 40px; height: 40px; margin: 5px; float: left; border: 1px solid black;} p { text-align: center;} </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="hidden"></div> <div class="hidden"></div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

43

$("div:visible").css("background", "#9cf"); $("div:visible"):uniquementlesdivisionsvisiblessontslectionnes.

2.Elmentcach
:hidden Slectionneleslmentsquisontcachs. $("p:hidden"):slectionnelesparagraphescachs. Exemple Cescriptvaafficher,auclicdubouton,lesdivisionscaches.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

- 2-

ENI Editions - All rigths reserved - Jonifar lina

44

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $("div:hidden").css("background", "#9cf").show(); }); }); </script> <style type="text/css"> button {margin-left: 50px;} .hidden { display:none; } div { width: 40px; height: 40px; margin: 5px; float: left; border: 1px solid black;} </style> </head> <body> <p><button>Montrer les &lt;div&gt; cachs</button></p> <div class="box"></div> <div class="hidden"></div> <div class="hidden"></div> <div class="hidden"></div> <div class="box"></div> </body> </html> Dtaillonsbrivementlescript. $("button").click(function () { $("div:hidden").show("fast"); }); Au clic du bouton ($("button").click(function()), les divisions caches (("div:hidden")) sont affiches (show ("fast")).

ENI Editions - All rigths reserved - Jonifar lina

- 3-

45

Lesfiltresdattribut
LesattributssontnombreuxdanslelangageHtmletXhtml.Citonstitle,alt,src,href,width,style,etc. Dans certaines documentations disponibles sur Internet, vous tes susceptibles de retrouver la notation [@attr] relative aux filtres dattribut. Cette notation a t retire de la version jQuery 1.3. Il suffit simplement de retirer le signe@desslecteurspourlarendrecompatibleaveclaspcification1.3.

1.Lattribut
[attribut] Slectionneleslmentsdotsdelattributspcifi. $("div[id]"):slectionneleslmentsquiontunattributid. Exemple Retrouvonsleslmentsdelisteaveclattributclass.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li[class]").css("border", "1px solid black"); }); </script> <style type="text/css"> li { width: 150px;} .italique { font-style: italic; } </style> </head> <body> <ul> <li class="italique">Item de liste 1</li> <li class="italique">Item de liste 2</li> <li>Item de liste 3</li> <li class="italique">Item de liste 4</li> <li>Item de liste 5</li> </ul> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

46

$("li[class]").css("border", "1px solid black"); $("li[class]"):parmileslmentsdeliste<li>,jQueryslectionneceuxquipossdentunattributdeclasse.

2.Lattributavecunecertainevaleur
[attribut=valeur] Slectionneleslmentsdotsdunattributavecunevaleurdtermine. $("input[name=newsletter]"):slectionnellmentdeformulaire<input>avecunattributname="newsletter". Exemple Mettonsenexergueleslmentsdelistedotsdelattributdeclasseclass="gras".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li[class=gras]").css("background", "#9cf"); });

- 2-

ENI Editions - All rigths reserved - Jonifar lina

47

</script> <style type="text/css"> li { width: 150px;} .italique { font-style: italic;} .gras { font-weight: bolder;} </style> </head> <body> <ul> <li class="italique">Item de liste 1</li> <li class="italique">Item de liste 2</li> <li class="gras">Item de liste 3</li> <li class="italique">Item de liste 4</li> <li class="gras">Item de liste 5</li> </ul> </body> </html> $("li[class=gras]").css("background", "#9cf"); $("li[class=gras]") : parmi les lments de liste <li>, jQuery slectionne ceux qui possdent un attribut de classeclass="gras".

3.Lattributquinapasunecertainevaleur
[attribut!=valeur] Slectionne les lments qui nont pas lattribut spcifi et ceux qui ont lattribut spcifi mais pas avec la valeur indique.Valeurestcasesensitive. $("input[name!=newsletter]"):slectionneleslmentsdeformulaire <input>quinontpasdattribut nameetceux quiontunattributnameavecuneautrevaleurquenewsletter. Exemple Retrouvonslesliensquinontpaslattributtitle="lien interne".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">

ENI Editions - All rigths reserved - Jonifar lina

- 3-

48

$(document).ready(function(){ $("a[title!=lien interne]").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { margin-left: 20px;} </style> </head> <body> <p> <a href="#" title="lien interne">Lien 1</a><br /> <a href="#" title="lien interne">Lien 2</a><br /> <a href="#" title="lien externe">Lien 3</a><br /> <a href="#" title="lien interne">Lien 4</a><br /> <a href="#" title="lien externe">Lien 5</a><br /> </p> </body> </html> $("a[title!=lien interne]").css("background", "#9cf"); $("a[title!=lien interne]"):parmilesliens<a>,retenonsceuxquinontpaslattributtitle="lien interne".

4.Lattributdontlavaleurcommencepar
[attribut^=value] Slectionneleslmentsquipossdentlattributspcifietdontlavaleurcommenceparlescaractresindiqus. $("input[name^=news]"):slectionneleslmentsdeformulaire <input> avec lattribut nameetdontlavaleurde celuicicommenceparlescaractres"news". Exemple Parmilesliensdisponibles,retenonsceuxdontlattributtitlecommenceparlalettreX.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){

- 4-

ENI Editions - All rigths reserved - Jonifar lina

49

$("a[title^=X]").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { margin-left: 20px;} </style> </head> <body> <p> <a href="#" title="Html">Html</a> <a href="#" title="Xhtml">Xhtml</a><br /> <a href="#" title="Dhtml">Dhtml</a> <a href="#" title="Xml">Xml</a><br /> <a href="#" title="Xslt">Xslt</a> <a href="#" title="Xpath">Xpath</a><br /> <a href="#" title="Xforms">Xforms</a> <a href="#" title="CSS">CSS</a><br /> <a href="#" title="Wml">Wml</a> <a href="#" title="Rds">Rds</a></p> </body> </html> $("a[title^=X]").css("background", "#9cf"); $("a[title^=X]"):parmilesliens<a>,retenonsceuxdontlattributtitlecommenceparlelettreX.

5.Lattributdontlavaleurfinitpar
[attribut$=value] Slectionneleslmentsquipossdentlattributspcifietdontlavaleursetermineparlescaractresindiqus. $("input[name$=letter]"):slectionneleslmentsdeformulaire<input>aveclattribut nameetdontlavaleurde celuicisetermineparlescaractres"letter". Exemple Enreprenantlexempleprcdent,retenonslesliensdontlattributtitlesetermineparleslettres"ml".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

50

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a[title$=ml]").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { margin-left: 20px;} </style> </head> <body> <p> <a href="#" title="Html">Html</a> <a href="#" title="Xhtml">Xhtml</a><br /> <a href="#" title="Dhtml">Dhtml</a> <a href="#" title="Xml">Xml</a><br /> <a href="#" title="Xslt">Xslt</a> <a href="#" title="Xpath">Xpath</a><br /> <a href="#" title="Xforms">Xforms</a> <a href="#" title="CSS">CSS</a><br /> <a href="#" title="Wml">Wml</a> <a href="#" title="Rds">Rds</a></p> </body> </html> $("a[title$=ml]").css("background", "#9cf"); $("a[title$=ml]"):parmilesliens<a>,retenonsceuxdontlattributtitlesetermineparleslettres"ml".

6.Lattributdontlavaleurcontient
[attribut*=value] Slectionneleslmentsquipossdentlattributspcifietdontlavaleurcomportelescaractresindiqus. $("input[name*=slet]"):slectionneleslmentsdeformulaire <input> avec lattribut nameetdontlavaleurde celuicicomportelescaractres"slet". Lasquence(oulordre)deslettresestrespecte. Exemple Toujoursenreprenantlexempleprcdent,retenonslesliensdontlattributtitlecomporteleslettres"tm".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"

- 6-

ENI Editions - All rigths reserved - Jonifar lina

51

lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a[title*=tm]").css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { margin-left: 20px;} </style> </head> <body> <p> <a href="#" title="Html">Html</a> <a href="#" title="Xhtml">Xhtml</a><br /> <a href="#" title="Dhtml">Dhtml</a> <a href="#" title="Xml">Xml</a><br /> <a href="#" title="Xslt">Xslt</a> <a href="#" title="Xpath">Xpath</a><br /> <a href="#" title="Xforms">Xforms</a> <a href="#" title="CSS">CSS</a><br /> <a href="#" title="Wml">Wml</a> <a href="#" title="Rds">Rds</a></p> </body> </html> $("a[title*=tm]").css("background", "#9cf"); $("a[title*=tm]"):parmilesliens<a>,retenonsceuxdontlattributtitlecomporteleslettres"tm".

7.Lesfiltresmultiplesdattribut
[filtredattribut1][filtredattribut2][filtredattribut3] Slectionneleslmentsquirpondenttouslesfiltresdattributspcifis. $("input[id][name$=man]"):slectionnelesbalises <input>quipossdentunidentifiant idetdontlattribut name seterminepar"man". Exemple Retenonslesliensdontlattributtitlecommencepar"lien",seterminepar"interne"etcomporte"chapitre1".

ENI Editions - All rigths reserved - Jonifar lina

- 7-

52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a[title^=lien][title$=interne][title*=chapitre1]") .css("background", "#9cf"); }); </script> <style type="text/css"> a { color: black;} p { margin-left: 20px;} </style> </head> <body> <p> <a href="#" title="lien chapitre1 interne">Lien 1</a><br /> <a href="#" title="lien chapitre2 interne">Lien 2</a><br /> <a href="#" title="lien chapitre1 interne">Lien 3</a><br /> <a href="#" title="lien chapitre3 interne">Lien 4</a><br /> <a href="#" title="lien externe">Lien 5</a><br /> </p> </body> </html> $("a[title^=lien][title$=interne][title*=chapitre1]") Parmi les liens <a>, retenons ceux dont lattribut title commence par "lien", se termine par "interne" et comporte "chapitre1".

- 8-

ENI Editions - All rigths reserved - Jonifar lina

53

Lesslecteursetfiltresdeformulaires
LesformulairesenjQuerymritentuneplacepartdansnotretudedujQuery.Ainsilesslecteursetfiltresrelatifs auxformulairesserontabordsauchapitreLesformulaires.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

54

Lesslecteursetlescaractresspciaux
LessymbolesreprisdanslasyntaxedejQueryconstituentunproblmelorsquilssontutilissdanslapartielittraledu code. Il faut alors indiquer que ces caractres ne sont pas des symboles jQuery. Pour ce faire, on fera prcder les caractresspciauxdedeuxbarresobliquesinverses\\(backslashes) Parexemple: #foo\\:bar #foo\\[bar\\] #foo\\.bar LalistecompltedescaractresspciauxquiappartiennentlasyntaxedejQuerysont:# ; & , . + * ~ : " ! ^ $ [ ] ( ) = > | / Ilestplusraisonnabledelesviterpurementetsimplement.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

55

Introduction
LesnombreuxslecteursdejQuerymisenplace,nousentamonsaveccechapitre,laspectdynamiqueduJavaScriptet dejQueryquiestdemodifierleslments.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

56

Ajouterousupprimeruneclasse
addClass(classe) Ajoutelaclassespcifietousleslmentsslectionns. $("p:last").addClass("selected"):ajoutelaclasseselectedaudernierparagraphe. CettemthoderetourneunobjetjQuery. Commentaires Ilfautnoterquecettemthodeneremplacepasuneclasse.Elleajoutesimplementuneclasse. Ilestpossibledajouterplusduneclasselafois.Ellessontnoteslesuneslasuitedesautres,sparesparun espace,soitaddClass(classe1 classe2 classe3). CettemthodeaddClass()estsouventassocielamthoderemoveClass()pourcreruneffetdecommutation. removeClass(classe) Supprimelaclassespcifietousleslmentsslectionns. $("p:last").removelass("selected"):supprimelaclasseselectedaudernierparagraphe. CettemthoderetourneunobjetjQuery. Exemple Au survol dun paragraphe par le curseur, mettons celuici en vidence en le dotant dun arrireplan de couleur et dune bordure.Ceteffetseraliseenajoutantuneclasseaupassagedelasouris.

Ledocumentinitialseprsentecommesuit: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


ENI Editions - All rigths reserved - Jonifar lina - 1-

57

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> div { width: 150px; height: 35px; line-height: 35px; vertical-align: middle; text-align: center; cursor: pointer;} .arriereplan { background-color: #9cf; border: 1px solid black;} </style> </head> <body> <div>Important</div> <div>Important</div> <div>Important</div> </body> </html> PassonsauscriptjQuery. <script type="text/javascript"> $(document).ready(function(){ $("div").mouseover(function(){ $(this).addClass("arriereplan"); }); $("div").mouseout(function(){ $(this).removeClass("arriereplan"); }); }); </script> Dtaillonsceluici. $(document).ready(function(){ AuchargementduDOM. $("div").mouseover(function(){ $(this).addClass("arriereplan"); }); Au survol dunedivision <div> par la souris (mouseover), le script ajoute (addClass()) la division survole (this), la classearriereplan. $("div").mouseout(function(){ $(this).removeClass("arriereplan"); }); Lorsque le curseur quitte la division (mouseout), jQuery retire (removeClass()) la division survole (this), la classe arriereplan. }); Findescript. LefichierXhtmlcompletdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- 2 ENI Editions - All rigths reserved - Jonifar lina

58

8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseover(function(){ $(this).addClass("arriereplan"); }); $("div").mouseout(function(){ $(this).removeClass("arriereplan"); }); }); </script> <style type="text/css"> div { width: 150px; height: 35px; line-height: 35px; vertical-align: middle; text-align: center; cursor: pointer;} .arriereplan { background-color: #9cf; border: 1px solid black;} </style> </head> <body> <div>Important</div> <div>Important</div> <div>Important</div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

59

Vrifierlaprsenceduneclasse
hasClass(classe) Vrifiesilaclassespcifieenargumentestprsentepourleslmentscibls.Retourne truesilaclassespcifieest prsentepouraumoinsundeslmentscibls,falsedanslecascontraire. $("#p1").hasClass("box"):vrifiesillmentidentifiparp1possdelaclassebox. Lamthoderenvoieunboolen(trueoufalse). Exemple Soitunesriedeparagraphes.

Audpart, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> p { width: 150px; padding-left: 15px; cursor: pointer;} .arriereplan { height: 30px; line-height: 30px; vertical-align: middle; background-color: #9cf; border: 1px dashed black;} </style> </head> <body> <p>Article</p> <p class="new">Nouveau</p> <p>Article</p> <p class="new">Nouveau</p> </body> </html> Au survol de la souris, le script jQuery ne doit doter dun arrireplan de couleur et dune bordure uniquement les paragraphesaveclaclassenew.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

60

LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("p").mouseover(function(){ if ($(this).hasClass("new") ) { $(this).addClass("arriereplan") }; }); }); </script> Explicationsduscript: $(document).ready(function(){ $("p").mouseover(function(){ AuchargementduDOMetausurvoldesparagraphesparlecurseur. if ($(this).hasClass("new") ) { $(this).addClass("arriereplan") }; Le script vrifie si (if)llment (this) survol possde la classe new(hasClass("new")). Dans laffirmative, la classe arriereplanestajoute( addClass())celuici.RemarquonsqueriennempchedemlangerJavaScriptclassiqueet JavaScriptjQuery. });

- 2-

ENI Editions - All rigths reserved - Jonifar lina

61

}); Findescript Aufinal,voicilefichierXhtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").mouseover(function(){ if ($(this).hasClass("new") ) { $(this).addClass("arriereplan") }; }); }); </script> <style type="text/css"> p { width: 150px; padding-left: 15px; cursor: pointer;} .arriereplan { height: 30px; line-height: 30px; vertical-align: middle; background-color: #9cf; border: 1px dashed black;} </style> </head> <body> <p>Article</p> <p class="new">Nouveau</p> <p>Article</p> <p class="new">Nouveau</p> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

62

Basculerentredeuxclasses
LalibrairiejQueryproposeplusieursmthodesquipermettentdedclenchertanttuneaction,tanttuneautre.Cet effetdepermutationestreprissousletermedetoggle.Nouslerencontreronsplusieursfoisdansnotreexplorationde jQuery. Outredeseffetsspectaculaires,cesmthodesentranentuneconomieapprciabledelignesdecode. toggleClass(classe) Ajoutelaclassespcifiesiellenestpasprsente,retirelaclassespcifiesielleestprsente. $(p).toggleClass("classe1") : applique la classe classe1 aux paragraphes si elle nest pas prsente. Si elle lest, enlvelaclasseclasse1. CettemthoderetourneunobjetjQuery. Exemple Auclicdulien,faireapparatreoudisparatreunedivisiondelapage.

Audpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a{color: black} div { width: 255px; padding: 3px; border: 1px dotted black; cursor: pointer;} .cacher { display: none;} </style> </head> <body> <p><a href="#">In / Out</a></p> <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> <p>Suite de la page...</p> </body>
ENI Editions - All rigths reserved - Jonifar lina - 1-

63

</html> LescriptjQuery:

<script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("div").toggleClass("cacher"); }); }); </script> Exploronslescriptpaspas. $(document).ready(function(){ Auchargementdelapage,duDOMpourtreprcis. $("a").click(function(){ Auclicdelasourissurlelien<a>. $("div").toggleClass("cacher"); Permuter(toggleClass())laclassecachersurladivision<div>. }); }); Findescript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("div").toggleClass("cacher"); }); }); </script> <style type="text/css"> a{color: black} div { width: 255px;

- 2-

ENI Editions - All rigths reserved - Jonifar lina

64

padding: 3px; border: 1px dotted black; cursor: pointer;} .cacher { display: none;} </style> </head> <body> <p><a href="#">In / Out</a></p> <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> <p>Suite de la page...</p> </body> </html> Il y a bien dautres faons de raliser cet effet en jQuery, par exemple, avec les mthodes show() et hide() (voir chapitreLeseffetsconsacrauxeffets).

ENI Editions - All rigths reserved - Jonifar lina

- 3-

65

Connatrelavaleurdunattribut
CettemthodejQuerycorrespondgetAttribute()duJavaScriptclassique. attr(nomdelattribut) Accdelavaleurdelattributmentionn. Cette mthode est assez utile pour retrouver la valeur dun attribut de llment slectionn ou du premier lment slectionnsilyenaplusieurs.Sillmentnapasdattributrpondantcenom,lavaleurundefinedestretourne. $("a").attr("title"):rcuprelavaleurdelattributtitledupremierlienrencontr. CettemthoderetourneunobjetjQuery. Exemple Au clic sur le bouton, recherchons le style attach la balise <span>JavaScript</span>. Le rsultat sera affich dans une divisionprvueceteffet.

Lefichierdedpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css">

ENI Editions - All rigths reserved - Jonifar lina

- 1-

66

div { width: 150px; height: 16px; border: 1px dotted black;} </style> </head> <body> <p><button>Trouver</button></p> <p> jQuery est un framework <span style="fontstyle:italic">JavaScript</span> libre. </p> Le style du &lt;span&gt; est :<div></div> </body> </html> LescriptjQueryseprsenteainsi: <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var css = $("span").attr("style"); $("div").text(css); }); }); </script> Dtaillonsceluici. $(document).ready(function(){ $("button").click(function(){ AuchargementduDOMetauclicdubouton. var css = $("span").attr("style"); Lescriptchargedanslavariablecss,lavaleurdelattributstyle=""attachlabalise<span>. $("div").text(css); Cettevariableestaffichecommedutexte(text(css))dansladivision<div>prvueceteffet. }); }); Findescript. Ledocumentfinaldevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var css = $("span").attr("style"); $("div").text(css); }); }); </script> <style type="text/css"> div { width: 150px; height: 16px; border: 1px dotted black;}
- 2 ENI Editions - All rigths reserved - Jonifar lina

67

</style> </head> <body> <p><button>Trouver</button></p> <p> jQuery est un framework <span style="fontstyle:italic">JavaScript</span> libre. </p> Le style du &lt;span&gt; est :<div></div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

68

Ajouterunattributetsavaleur
attr(attribut,valeur) Assigneunepaireattribut/valeurtousleslmentsconcerns. $("#photo").attr("alt","Parc oliennes"):assignellmentidentifipar#photo,lattributalt="Parc oliennes". CettemthoderetourneunobjetjQuery. Exemple Auclicsurlebouton,untableaudedonnesseraaffichavecunelargeurplusgrandepourlerendreainsipluslisible.

Lefichierdedpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> table { border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

69

</head> <body> <p><button>Agrandir le tableau</button></p> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html> LescriptjQueryscrit: <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("table").attr("width","240px"); }); }); </script> Soit,endtail: $(document).ready(function(){ $("button").click(function(){ AuchargementduDOMetauclicsurlebouton. $("table").attr("width","240px"); Lattributwidthavecunevaleurde240 pxestajoutlabalisedetableau<table>. }); }); Finduscript Uneffetspectaculairepourunminimumdecode! Lefichiercomplet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("table").attr("width","240px"); }); }); </script> <style type="text/css"> table { border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

70

</head> <body> <p><button>Agrandir le tableau</button></p> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

71

Ajouterplusieursattributsetleursvaleurs
attr({proprits}) Permetdassignerunensembledepairesattribut/valeurauxlmentsslectionns. Lesdiffrentespropritssontsparesparunevirgule. $("img").attr({ src: "hat.gif", alt: "Logo jQuery!" }):assignelesattributssrcetaltauximages. CettemthoderetourneunobjetjQuery. Exemple Passonsduneimageuneautreparunsimpleclicsurunlien.

Lesimagesdelexemplesontdisponiblesdanslespacedetlchargementrservcetouvrage. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black;} </style> </head>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

72

<body> <p><a href="#">Image suivante</a></p> <div> <img src="pansolaire1.png" alt="Panneau solaire 1"/> </div> </body> </html> LescriptjQueryseprsentecommesuit. <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("img").attr({ src: "pansolaire2.png", alt: "Panneau solaire 2", title: "Ecologie" }); }); }); </script> tudionslepaspas. $(document).ready(function(){ $("a").click(function(){ AuchargementdejQuery(duDOM)etauclicdulien. $("img").attr({ src: "pansolaire2.png", alt: "Panneau solaire 2", title: "Ecologie" }); Lescriptajoutedabordlabalise <img>,lattribut src.Cequipermetdechargerlanouvelleimage.Accessoirement, lesattributsaltettitlesontgalementajouts. }); }); Findescript. Lefichiercompletdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("img").attr({ src: "pansolaire2.png", alt: "Panneau solaire 2", title: "Ecologie" }); }); }); </script> <style type="text/css"> a { color: black;} </style> </head> <body> <p><a href="#">Image suivante</a></p>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

73

<div> <img src="pansolaire1.png" alt="Panneau solaire 1"/> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

74

Supprimerunattribut
removeAttr(nomdelattribut) Supprimeunattributdeslmentsconcerns. $("#div1").removeAttr("disabled"):supprimelattributdisableddellmentidentifipardiv1. CettemthoderetourneunobjetjQuery. Exemple Supprimonslattributdestyledeladivisionafinderendrelalectureplusaise.

LedocumentXhtmlinitial: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black} </style>
ENI Editions - All rigths reserved - Jonifar lina - 1-

75

</head> <body> <p><a href="#">Version simplifie</a></p> <div style="background-color: #9cf; border: 2px solid black; color: white; font-weight: bold;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </body> </html> LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("div").removeAttr("style"); }); }); </script>

$(document).ready(function(){ $("a").click(function(){ LorsqueleDOMestchargetleliencliqu. $("div").removeAttr("style"); Lescriptenlvelattributdestyleenligne(voirlecodeXhtml)deladivision. }); }); Findescript. LefichierXhtmlfinalseprsentealors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("div").removeAttr("style"); }); }); </script> <style type="text/css"> a { color: black} </style> </head> <body> <p><a href="#">Version simplifie</a></p> <div style="background-color: #9cf; border: 2px solid black; color: white; font-weight: bold;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </body> </html>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

76

Connatrelattributvalue
Cepointatraitauxformulairesetleurattributvalue. val() Rcupresousformedechanedecaractres,lecontenudelattributvaluedupremierlmentdelaslection. $("input").val():rcuprelecontenudelattributvaluedupremierchampdeformulairedetype<input>. Cettemthoderetourneunechanedecaractres. Exemple Rcupronslavaleurduboutonradiococh.

Audpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ENI Editions - All rigths reserved - Jonifar lina

- 1-

77

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> div { width: 150px; height: 16px; border: 1px dotted black;} </style> </head> <body> <form action=""> <input type="radio" name="1" value="Internet Explorer" />Internet Explorer<br /> <input type="radio" name="1" value="Firefox" />Firefox<br /> <input type="radio" name="1" value="Safari" />Safari<br /> <input type="radio" name="1" value="Opera" />Opera<br /> <input type="radio" name="1" value="Google" />Google<br /> <input type="radio" name="1" value="Autre" />Autre </form> <p>Votre choix est : <button>Trouver</button></p> <div></div> </body> </html> LescriptjQuery. <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var choix = $(input:radio:checked).val(); $("div").text(choix); }); }); </script> Explications: $(document).ready(function(){ $("button").click(function(){ AuchargementduDOMetauclicsurlebouton. var choix = $(input:radio:checked).val(); Lecontenuduboutonradioslectionn( input:radio:checked)eststockdanslavariablechoix. $("div").text(choix); Lecontenudelavariablechoixestaffich(text(choix))dansladivision. }); }); Findescript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />

- 2-

ENI Editions - All rigths reserved - Jonifar lina

78

<title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var choix = $(input:radio:checked).val(); $("div").text(choix); }); }); </script> <style type="text/css"> div { width: 150px; height: 16px; border: 1px dotted black;} </style> </head> <body> <form action=""> <input type="radio" name="1" value="Internet Explorer" />Internet Explorer<br /> <input type="radio" name="1" value="Firefox" />Firefox<br /> <input type="radio" name="1" value="Safari" />Safari<br /> <input type="radio" name="1" value="Opera" />Opera<br /> <input type="radio" name="1" value="Google" />Google<br /> <input type="radio" name="1" value="Autre" />Autre </form> <p>Votre choix est : <button>Trouver</button></p> <div></div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

79

Modifierlattributvalue
Variantedeval()tudiaupointprcdent.Ici,jQuerypermetdemodifierlattributvalue. val(valeur) Assigneunenouvellevaleurlattributvaluedellmentslectionn. $("#input").val("Test"):ajoutelavaleurTestunelignedetexte. CettemthoderetourneunobjetjQuery. Exemple Aprsunepremiresoumissionduformulaire,letexteduboutondenvoiestmodifi.

Lefichierinitial: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black;} </style> </head> <body> <form action=""> <p>Mail : <input type="text" id="input1" value="Mention Obligatoire" /></p> <p><input type="submit" id="soumettre" value="Un seul envoi par

ENI Editions - All rigths reserved - Jonifar lina

- 1-

80

utilisateur" /></p> </form> </body> </html> PassonsauscriptjQuery. <script type="text/javascript"> $(document).ready(function(){ $("#soumettre").click(function(){ $("#soumettre").val("Vous avez dj fait un envoi"); return false; }); }); </script> Dtaillonsceluici. $(document).ready(function(){ $("#soumettre").click(function(){ AuchargementduDOMetauclicsurleboutondesoumission. $("#soumettre").val("Vous avez dj fait un envoi"); return false; Unenouvellevaleur("Vous avez dj fait un envoi")esttransmiseauboutondenvoi.Ilfautnoterquelamention prcdenteestainsiremplace. }); }); Finduscript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#soumettre").click(function(){ $("#soumettre").val("Vous avez dj fait un envoi"); }); }); </script> <style type="text/css"> a { color: black;} </style> </head> <body> <form action=""> <p>Mail : <input type="text" id="input1" value="Mention Obligatoire" /></p> <p><input type="submit" id="soumettre" value="Un seul envoi par utilisateur" /></p> </form> </body> </html>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

81

Introduction
EstilncessairedesoulignerlimportancepriseparlesfeuillesdestyledanslcritureducodedespagesWeb?Avec jQuery,lamodificationdynamiquedespropritsdestyleCSSservlefacileimplmenter. Lamthodecss()tudieauxtroispremierspointsdecechapitre,nestpassansrappelerlamthodeattr()aborde auchapitreprcdent.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

82

Accderunepropritdestyle
La mthode css() se dcline de trois faons. La premire permet uniquement daccder la proprit de style CSS dunlmentdonn. css(nom) Permetdaccderunepropritdestyledupremierlmenttrouv. Lenomestunechanedecaractresquireprendlapropritdestyleaccder. $("p").css("color"); Cettemthoderenvoieunechanedecaractres(String). Exemple Soitunepageavec3lmentsdetypebloc.

LedocumentHtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> div { width: 60px; height: 60px; margin: 5px; float: left; background-color:#9cf;"} </style> </head> <body> <div id="div1"></div> <div id="div2" style="border: 3px solid black;"></div> <div id="div3" style="visibility: visible;"></div> <p style="clear: left;" id="resultat">Rsultat </p> </body> </html> Auclicsurunlmentdetypebloc,lescriptafficherarespectivement,degauchedroite,lacouleurdarrireplan,la couleurdelabordureetlavisibilit.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

83

SoitlescriptjQuery: <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#div1").click(function () { var couleur = $(this).css("background-color"); $("#resultat").html("La couleur est <span>" + couleur + "</span>."); }); $("#div2").click(function () { var bordure = $(this).css("border-color"); $("#resultat").html("La couleur de la bordure est <span>" + bordure + "</span>."); }); $("#div3").click(function () {

- 2-

ENI Editions - All rigths reserved - Jonifar lina

84

var visibility = $(this).css("visibility"); $("#resultat").html("La visibilit est <span>" + visibility + "</span>."); }); }); //]]> </script> Dtaillonsceluici. $(document).ready(function(){ DsqueleDOMestcharg. $("#div1").click(function () { var couleur = $(this).css("background-color"); Leclicdelasourissurlepremiercarr(id="div1")chargedanslavariablecouleurlapropritdelacouleurdarrire plandecetlmentparcss("background-color"). $("#resultat").html("La couleur est <span>" + couleur + "</span>."); }); LavaleurdelapropritdestyleestalorsaffichecommeduHtmldanslabalise<p>identifieparresultat. $("#div2").click(function () { var border = $(this).css("border-color"); Le clic de la souris sur le second carr (id="div2") charge dans la variable bordure la couleur de la bordure de cet lmentparcss("border-color"). $("#resultat").html("La couleur de la bordure est <span>" + border + "</span>."); }); LavaleurestaffichedanslapageHtml. $("#div3").click(function () { var visibility = $(this).css("visibility"); Le clic de la souris sur le troisime carr (id="div3") charge dans la variable visibility, ltat de visibilit de cet lmentparcss("visibility"). $("#resultat").html("La visibilit est <span>" + visibility + "</span>."); }); Lavaleurestaffichedanslapage. }); Findescript. Lefichierfinalest: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#div1").click(function () {
ENI Editions - All rigths reserved - Jonifar lina - 3-

85

var couleur = $(this).css("background-color"); $("#resultat").html("La couleur est <span>" + couleur + "</span>."); }); $("#div2").click(function () { var bordure = $(this).css("border-color"); $("#resultat").html("La couleur de la bordure est <span>" + bordure + "</span>."); }); $("#div3").click(function () { var visibility = $(this).css("visibility"); $("#resultat").html("La visibilit est <span>" + visibility + "</span>."); }); }); //]]> </script> <style type="text/css"> div { width:60px; height:60px; margin:5px; float:left; background-color:#9cf;"} </style> </head> <body> <div id="div1"></div> <div id="div2" style="border: 3px solid black;"></div> <div id="div3" style="visibility: visible;"></div> <p style="clear: left;" id="resultat">Rsultat </p> </body> </html>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

86

Modifierlespropritsdestyle
Lafonctioncss(),dotedecertainsparamtres,permetgalementdemodifierdespropritsdestyledlmentsdela page. css({propritdestyle}) ModifielespropritsdestyledunlmentdonnenutilisantlanotationCSScl/valeurpourlespropritsdestyle transformer. $("p").css({ color: "red", background: "blue" }); Ilfautremarquerlaprsencedesaccoladeshabituellespourlesdclarationsdestyle. Si la cl contient un trait dunioncommeparexemple background-color, celleci doit tre place entre des guillemets (soit"background-color"). LanotationJavaScript(CamelCase)peutgalementtreadoptesoitbackgroundColoraulieudebackground-color. CettemthoderenvoieunobjetjQuery. Exemple Illustrons cette mthode jQuery par un exemple. Au survol dun paragraphe, celuiciestdotdun arrireplan et affiche la policedecaractresenitalique.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css">

ENI Editions - All rigths reserved - Jonifar lina

- 1-

87

p { font: Arial sans-serif;} </style> </head> <body> <p>Survoler ce texte avec le curseur.</p> <p>Idem que pour le texte prcdent.</p> </body> </html> LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("p").mouseover(function () { $(this).css({background-color : #9cf, font-style: italic}); }); $("p").mouseout(function () { $(this).css({background-color : , font-style : }); }); }); </script> Explications: $(document).ready(function(){ ChargementduDOM. $("p").mouseover(function () { $(this).css({background-color : #9cf, font-style: italic}); }); Ausurvolduparagraphe <p>parlasouris(mouseover()),lafonction css()modifielacouleurdelarrireplanetmetla policedecaractresenitaliquedeceluici(css({background-color : #9cf, font-style: italic})). $("p").mouseout(function () { $(this).css({background-color : , font-style : }); }); Lorsquelecurseurquitteleparagraphe( mouseout()),lesmodificationssontannules. }); Finduscript. Les proprits notes selon les prescriptions CSS peuvent galement tre reprises selon la notation JavaScript. Le scriptdeviendraitalors: <script type="text/javascript"> $(document).ready(function(){ $("p").mouseover(function () { $(this).css({backgroundColor : #9cf, fontStyle: italic}); }); $("p").mouseout(function () { $(this).css({backgroundColor : , fontStyle : }); }); }); </script> Ledocumentcomplet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />
- 2 ENI Editions - All rigths reserved - Jonifar lina

88

<title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("p").mouseover(function () { $(this).css({background-color : #9cf, font-style: italic}); }); $("p").mouseout(function () { $(this).css({background-color : , font-style : }); }); }); </script> <style type="text/css"> p { font: Arial sans-serif;} </style> </head> <body> <p>Survoler ce texte avec le curseur.</p> <p>Idem que pour le texte prcdent.</p> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

89

Attribuerdespropritsdestyle
Lafonctioncss()dejQueryproposeunedernirefaondenoterlestransformationsdespropritsdestyle. css(cl,valeur) Modifie les proprits de style dun lment donn en utilisant la notation cl/valeur pour les proprits de style transformer.
G

cl(chanedecaractre)correspondaunomdelapropritdestylemodifier. valeur(chanedecaractreounombre)estlanouvellevaleurdelaproprit.Siunnombreestspcifi,jQuery leconvertiautomatiquementenpixel.

$("p").css("color","red"); CettemthoderenvoieunobjetjQuery. Exemple Prenonsdeuxdivisionssuperposes.ParunscriptjQuery,modifionslordredecellesciausurvoldelasouris.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title>
ENI Editions - All rigths reserved - Jonifar lina - 1-

90

<style type="text/css"> #boite1 { position: absolute; left: 20px; top: 20px; width: 80px; height: 50px; padding: 4px; border: 2px solid black; background-color: #9cf;} #boite2 { position: absolute; left: 50px; top: 50px; width: 80px; height: 50px; padding: 4px; border: 2px solid black; background-color: white;} </style> </head> <body> <div id="boite1"> z-index 1 </div> <div id="boite2"> z-index 2 </div> </body> </html> Remarquons quaucune proprit de style relative la superposition des divisions ( z-index) nest prsente dans le codedufichierdedpart. LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("#boite1").mouseover(function () { $(this).css(z-index , 10); }); $("#boite1").mouseout(function () { $(this).css(z-index , ); }); }); </script> Explications: $(document).ready(function(){ AuchargementduDOM. $("#boite1").mouseover(function () { $(this).css(z-index , 10); }); Ausurvoldelasouris(mouseover()),ladivisiondontlidentifiantest boite1,sevoitattribuerunevaleurde z-indexde 10,cequilaplaceaupremierplanparrapportladivisionidentifieparboite2. $("#boite1").mouseout(function () { $(this).css(z-index , ); }); Lorsquelecurseurquitteladivisionboite1,lavaleurpardfautdez-indexestrestitue. }); Findescript.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

91

Ledocumentcompletdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#boite1").mouseover(function () { $(this).css(z-index , 10); }); $("#boite1").mouseout(function () { $(this).css(z-index , ); }); }); </script> <style type="text/css"> #boite1 { position: absolute; left: 20px; top: 20px; width: 80px; height: 50px; padding: 4px; border: 2px solid black; background-color: #9cf;} #boite2 { position: absolute; left: 50px; top: 50px; width: 80px; height: 50px; padding: 4px; border: 2px solid black; background-color: white;} </style> </head> <body> <div id="boite1"> z-index 1 </div> <div id="boite2"> z-index 2 </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

92

Ledimensionnement
JQueryproposeunesriedemthodesrelativesladimensiondeslments. height() Renvoielahauteur,exprimeenpixels,dunlment. $("p").height(); Cettemthoderenvoieunechanedecaractres(String). height(valeur) Assigneunehauteurauxlmentsspcifis.Siaucuneunitnestspcifie(commeemou%),lunit pxserachoisiepar dfaut.
G

valeur(chanedecaractresouentier):valeurdelahauteurassigne.

$("p").height(120); CettemthoderenvoieunobjetjQuery. Aprslahauteur,lalargeur width() Renvoielalargeur,exprimeenpixels,dunlment $("p").width(); Cettemthoderenvoieunechanedecaractres(String). width(valeur) Assigneunelargeurauxlmentsspcifis.Siaucuneunitnestspcifie(commeemou%),lunit pxserachoisiepar dfaut.
G

valeur(chanedecaractresouentier):valeurdelalargeurassigne.

$("p").width(120); CettemthoderenvoieunobjetjQuery. Citonsencorelesmthodes:


G

innerHeight():retournelahauteurintrieure(labordureexcluemaislepaddinginclus)dupremierlment trouvdanslaslection. innerWidth() : rcupre la largeur intrieure (la bordure exclue mais le padding inclus) du premier lment trouvrpondantlaslection. outerHeight(options) : retourne la hauteur extrieure (la bordure incluse et le padding par dfaut) pour le premierlmenttrouvrpondantlaslection. outerWidth(options) : retourne la largeur extrieure (inclut la bordure et le padding par dfaut) pour le premierlmenttrouvrpondantlaslection.

Cesmthodesfonctionnentpourleslmentsvisiblesetnonvisibles. Exemple Auclicsurunlmentbote,unscriptjQuerydtectelalargeuretlahauteur.Cesdimensionssontalorsdoubles.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

93

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> div { position: relative; width: 75px; height: 75px; border: 1px solid black; background-color: #9cf;} </style> </head> <body> <div></div> </body> </html> Lescript: <script type="text/javascript"> $(document).ready(function(){ $("div").click(function () { hauteur=$(this).height()
- 2 ENI Editions - All rigths reserved - Jonifar lina

94

largeur=$(this).width() $(this).height(hauteur*2).width(largeur*2); }); }); </script> Explications: $(document).ready(function(){ $("div").click(function () { Auchargementetauclicsurlabote. hauteur=$(this).height() largeur=$(this).width() Lahauteuretlalargeurdellmentslectionnsontstockesdansunevariable. $(this).height(hauteur*2).width(largeur*2); Lahauteuretlalargeurdellmentsontmultipliespar2. }); }); Finduscript. Ledocumentfinalseprsentealors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function () { hauteur=$(this).height() largeur=$(this).width() $(this).height(hauteur*2).width(largeur*2); }); }); </script> <style type="text/css"> div { position: relative; width: 75px; height: 75px; border: 1px solid black; background-color: #9cf;} </style> </head> <body> <div></div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

95

Lepositionnement
ParalllementauxmthodesjQuerysurladimensiondeslments,jQueryproposedesmthodespourdterminerla positiondeceuxci. position() Renvoielavaleurtopetleftdelapositiondunlmentrelativesonlmentparent. $("p:first").position(); Cettemthoderenvoieunobjetdetypeobject{top,left}. offset() Renvoielavaleurtopetleftdelapositiondunlmentrelativeaudocument. $("p:first").offset(); Cettemthoderenvoieunobjetdetypeobject{top,left}. Plus particulires sont les mthodes scrollTop(valeur) et scrollLeft(valeur) qui permettent de modifier pour un lmentledcalageparrapportaubordsuprieurouaubordgauche.Dunecertainefaon,cesmthodespermettent decontrlerlamplitudedelabarrededfilementverticaleethorizontale. scrollTop(valeur) Modifieledcalage(enpixels)entrelebordsuprieurdudocument(top)etllmentslectionn,enprenantlavaleur passeenargument. valeur:nombrepositifreprsentantlenouveaudcalagedsir. $("div").scrollTop(300); CettemthoderenvoieunobjetjQuery. scrollLeft(valeur) Modifieledcalage(enpixels)entrelebordgauchedudocument(left)etllmentslectionn,enprenantlavaleur passeenargument. valeur:nombrepositifreprsentantlenouveaudcalagedsir. $("div").scrollLeft(300); CettemthoderenvoieunobjetjQuery. Exemple Illustronsceciparunexemple.Parleclicsurunbouton,nousallonspermettrelutilisateurdatteindredirectementlesecond paragrapheduntexte.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

96

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> div { position: relative; width: 250px; height: 130px; border: 1px solid black; margin-top: 10px; padding: 3px; font-size: 0.9em; overflow: auto;} p { margin:2px; width:225px; text-align: justify;} span { font-weight: bold; text-decoration: underline} </style> </head>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

97

<body> <button id="go">Allez au paragraphe 2</button> <button id="reset">Reset</button> <div class="demo"> <p><span>Paragraphe 1</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id semper enim. Vestibulum metus felis, elementum sit amet tristique non, pulvinar vitae metus. Pellentesque interdum, felis non placerat volutpat, nisi justo eleifend magna, at tincidunt massa velit non dolor</p> <p><span>Paragraphe 2</span> In sem velit, placerat vel vestibulum vel, interdum at tortor. Suspendisse vitae metus sem, ut venenatis eros. Sed iaculis dapibus diam, in tempor eros tincidunt in. Ut id vestibulum risus. Integer eu mauris at odio pharetra convallis. In sem velit, placerat vel vestibulum vel, interdum at tortor. Suspendisse vitae metus sem, ut venenatis eros. Sed iaculis dapibus diam, in tempor eros tincidunt in. Ut id vestibulum risus. Integer eu mauris at odio pharetra convallis.</p> </div> </body> </html> LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("#go").click(function () { $("div").scrollTop(148); }); $("#reset").click(function () { $("div").scrollTop(0); }); }); </script> Explicationduscript: $(document).ready(function(){ AuchargementduDOM. $("#go").click(function () { $("div").scrollTop(148); }); Auclicdubouton,lapositiondutexteparrapportaubordsuprieurdeladivisionestmodifiepouratteindrelesecond paragraphe. $("#reset").click(function () { $("div").scrollTop(0); }); Le bouton reset remet le dcalage vers le haut dans sa position initiale pour faire apparatre nouveau le premier paragraphe. }); Findescript. Ledocumentcompletseprsentealorscommesuit. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

98

<script type="text/javascript"> $(document).ready(function(){ $("#go").click(function () { $("div").scrollTop(148); }); $("#reset").click(function () { $("div").scrollTop(0); }); }); </script> <style type="text/css"> div { position: relative; width: 250px; height: 130px; border: 1px solid black; margin-top: 10px; padding: 3px; font-size: 0.9em; overflow: auto;} p { margin:2px; width:225px; text-align: justify;} span { font-weight: bold; text-decoration: underline} </style> </head> <body> <button id="go">Allez au paragraphe 2</button> <button id="reset">Reset</button> <div class="demo"> <p><span>Paragraphe 1</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id semper enim. Vestibulum metus felis, elementum sit amet tristique non, pulvinar vitae metus. Pellentesque interdum, felis non placerat volutpat, nisi justo eleifend magna, at tincidunt massa velit non dolor</p> <p><span>Paragraphe 2</span> In sem velit, placerat vel vestibulum vel, interdum at tortor. Suspendisse vitae metus sem, ut venenatis eros. Sed iaculis dapibus diam, in tempor eros tincidunt in. Ut id vestibulum risus. Integer eu mauris at odio pharetra convallis. In sem velit, placerat vel vestibulum vel, interdum at tortor. Suspendisse vitae metus sem, ut venenatis eros. Sed iaculis dapibus diam, in tempor eros tincidunt in. Ut id vestibulum risus. Integer eu mauris at odio pharetra convallis.</p> </div> </body> </html>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

99

Applications
1.Redimensionnerlatailledescaractres
Nousallonspermettrelutilisateurdemodifier,songr,latailledelapolicedecaractrespourunmeilleurconfort delecture.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> p { font-size: 1em;} </style> </head> <body> <input type="button" value="Plus grand" id="plus" /> <input type="button" value="Plus petit" id="moins" /> <p>Lorem ipsum dolor sit amet, magna adipiscing elit. Quisque at cursus est. Phasellus id ligula massa. Quisque id lacus mauris. Suspendisse vehicula tortor eu magna.</p> </body> </html> Le script jQuery va permettre au clic dunpremierboutondagrandirlatailledescaractres.Unsecondboutonest prvupourdiminuercelleci.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

100

<script type="text/javascript"> $(document).ready(function(){ $(input).click(function(){ var texte = $(p); var taille = texte.css(fontSize); var nombre = parseFloat(taille, 10); var unite = taille.slice(-2); if(this.id == plus) { nombre *= 1.2; } else if (this.id == moins){ nombre /=1.2; } texte.css(fontSize, nombre + unite); }); }); </script> Ledtaildeceluici: $(document).ready(function(){ AuchargementduDOM. $(input).click(function(){ Auclicsurundesboutons. var texte = $(p); var taille = texte.css(fontSize);

- 2-

ENI Editions - All rigths reserved - Jonifar lina

101

Latailledecaractres(fontSize)dutexteeststockedansunevariable( taille). var nombre = parseFloat(taille, 10); LafonctionJavaScriptparseFloat()convertitcettechanedecaractressousformedenombre(base10). var unite = taille.slice(-2); Avec la fonction slice() de jQuery, nous obtenons lunit utilise pour la taille de caractres (pxou em). La valeur ngativepermetdecommencerpartirdelafindelaslection. if(this.id == plus) {nombre *= 1.2; } Silebouton"plus"estcliqu,latailledescaractresestaugmentede20 %. else if (this.id == moins) {nombre /=1.2; } Silebouton"moins"estactiv,latailledecaractresestdiminuedanslammeproportion. texte.css(fontSize, nombre + unite); Lanouvellevaleurdelatailledecaractresestattribue. }); }); Findescript. Notrefichierdevientalors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $(input).click(function(){ var texte = $(p); var taille = texte.css(fontSize); var nombre = parseFloat(taille, 10); var unite = taille.slice(-2); if(this.id == plus) { nombre *= 1.2; } else if (this.id == moins){ nombre /=1.2; } texte.css(fontSize, nombre + unite); }); }); </script> <style type="text/css"> p { font-size: 1em;} </style> </head> <body> <input type="button" value="Plus grand" id="plus" /> <input type="button" value="Plus petit" id="moins" />

ENI Editions - All rigths reserved - Jonifar lina

- 3-

102

<p>Lorem ipsum dolor sit amet, magna adipiscing elit. Quisque at cursus est. Phasellus id ligula massa. Quisque id lacus mauris. Suspendisse vehicula tortor eu magna.</p> </body> </html>

2.Zoomsurimageavecunelgende
Soitunepagequiprsentedesimagesminiatures.Ausurvoldelasouris,limageestaffichedanssataillerelle.Le scriptoffrelapossibilitdejoindreunelgendecelleci. Lesimagesdecetteapplicationsontdisponiblesdanslespacedetlchargementconsacrcetouvrage.

LefichierXhtmldedpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title>
- 4 ENI Editions - All rigths reserved - Jonifar lina

103

<style type="text/css"> body { margin: 0px; padding: 10px; font:80% Arial, sans-serif;} h2 { clear:both; font-size:160%; font-weight:normal; margin: 0px; padding-top: 10px; padding-bottom: 15px;} a { text-decoration:none; color:black;} img { border: 1px solid black;} ul,li { margin: 0px; padding: 0px;} li { list-style: none; float: left; display: inline; margin-right: 10px;} #zoom { position: absolute; border: 1px solid #333; background: #333; padding: 3px; display: none; color: #fff;} /style> </head> <body> <h2>Effet de Zoom avec lgende</h2> <ul> <li><a href="ours1.jpg" class="zoom" title="Ours polaire en danger"><img src="pt_ours1.jpg" alt="" /></a></li> <li><a href="ours2.jpg" class="zoom" title="Ours polaire en danger"><img src="pt_ours2.jpg" alt="" /></a></li> <li><a href="ours3.jpg" class="zoom" title="Ours polaire en danger"><img src="pt_ours3.jpg" alt="" /></a></li> </ul> </body> </html> Commentaires: Lalgendequiapparatdanslimageagrandieestreprisedanslattributtitledulien. Grceaulienverslimagedanssadimensioninitiale,lapageresteaccessibleauxutilisateursquiauraientdsactiv leJavaScript. LescriptjQuery: <script type="text/javascript"> //<![CDATA[ this.zoom_image = function(){ xOffset = 10; yOffset = 30; $("a.zoom").hover(function(e){ this.texte = this.title; this.title = ""; var legende = (this.texte != "") ? "<br/>" + this.texte : ""; $("body").append("<p id=zoom><img src="+ this.href +" alt=Visualisation image />"+ legende +"</p>"); $("#zoom") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("slow"); }, function(){ this.title = this.texte; $("#zoom").remove(); }); $("a.zoom").mousemove(function(e){

ENI Editions - All rigths reserved - Jonifar lina

- 5-

104

$("#zoom") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; $(document).ready(function(){ zoom_image(); }); //]]> </script> Cescriptrclamebienentendudesexplications. this.zoom_image = function(){ xOffset = 10; yOffset = 30; AvantdelancerlejQueryetleffetquilapportera,ilfautdabordmettreenplacelafonctionzoom_image.Commenons parcrerdeuxvariables(xOffsetetyOffset)quidfinissentledporthorizontaletverticaldupopupdelimagepar rapportaucurseur.Cesvaleurspeuventtreajustesparleconcepteurdelapage. $("a.zoom").hover(function(e){ Lescriptappliquelamthodehover()auxliensdotsdelaclassezoom.Lvnementassociaucurseuresttransmis enparamtrelafonction(function(e)). this.texte = this.title; this.title = ""; Ausurvoldelaminiature,letextedelattributtitleestreprisdanslavariabletexte. var legende = (this.texte != "") ? "<br/>" + this.texte : ""; Silattributtitleestnonvide,lalgendedelimage(variablelegende)estconstruitepartirdutextedeceluici. $("body").append("<p id=zoom><img src="+ this.href +" alt=Visualisation image />"+ legende +"</p>"); Lescriptinsre(append())alorsdanslebody,unparagrapheaveclidentifiant zoomcontenantlimagedontladresse estfournieparlelien(img src="+ this.href)ainsiquelalgende. $("#zoom") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("slow"); Ceparagraphe( id=zoom)estalorsaffichselonlespropritsdestyletopet leftenajoutantledportdfiniplus haut,lapositionducurseur.UneffetdefadeIn()atajout. }, Findelapremirefonctiondelamthodehover(). function(){ this.title = this.texte; $("#zoom").remove(); Lorsquelecurseurquittelaminiature($("#zoom")),lepopupdelimagedisparat. }); Findelasecondefonctiondelamthodehover(). $("a.zoom").mousemove(function(e){ Ilfautencoreprvoirquelutilisateur,toutensurvolantlaminiature($("a.zoom")),estsusceptibledefairebougerle
- 6 ENI Editions - All rigths reserved - Jonifar lina

105

curseurdelasouris(mousemove()).Lvnementassociaucurseuresttransmisenparamtrelafonction( function (e)). $("#zoom") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); Lepopupcontenantlimagesuitlesmouvementsducurseur. }; Finduhover(). $(document).ready(function(){ zoom_image(); }); Touteslesfonctionstantprsentdfinies,jQuerypeutmettreen uvrelafonctionzoom_image()auchargement duDOM. LefichierHtmlfinalestalors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ this.zoom_image = function(){ xOffset = 10; yOffset = 30; $("a.zoom").hover(function(e){ this.texte = this.title; this.title = ""; var legende = (this.texte != "") ? "<br/>" + this.texte : ""; $("body").append("<p id=zoom><img src="+ this.href +" alt=Visualisation image />"+ legende +"</p>"); $("#zoom") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("slow"); }, function(){ this.title = this.texte; $("#zoom").remove(); }); $("a.zoom").mousemove(function(e){ $("#zoom") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; $(document).ready(function(){ zoom_image(); }); //]]> </script> <style type="text/css"> body { margin: 0px; padding: 10px; font:80% Arial, sans-serif;} h2 { clear:both;

ENI Editions - All rigths reserved - Jonifar lina

- 7-

106

font-size:160%; font-weight:normal; margin: 0px; padding-top: 10px; padding-bottom: 15px;} a { text-decoration:none; color:black;} img { border: 1px solid black;} ul,li { margin: 0px; padding: 0px;} li { list-style: none; float: left; display: inline; margin-right: 10px;} #zoom { position: absolute; border: 1px solid #333; background: #333; padding: 3px; display: none; color: #fff;} </style> </head> <body> <h2>Effet de Zoom avec lgende</h2> <ul> <li><a href="ours1.jpg" class="zoom" title="Ours polaire en danger"><img src="pt_ours1.jpg" alt="" /></a></li> <li><a href="ours2.jpg" class="zoom" title="Ours polaire en danger"><img src="pt_ours2.jpg" alt="" /></a></li> <li><a href="ours3.jpg" class="zoom" title="Ours polaire en danger"><img src="pt_ours3.jpg" alt="" /></a></li> </ul> </body> </html>

3.UneinfobulleavecjQuery

- 8-

ENI Editions - All rigths reserved - Jonifar lina

107

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> body { margin: 0; padding-left: 10px; padding-right: 10px; font: 90% Arial, sans-serif;} a { text-decoration: none; border-bottom: 1px dashed black; color: black;} #infobulle { position: absolute; border: 1px solid black; background: #9cf; padding:2px 5px; display: none;} </style> </head> <body> <p>jQuery est un framework <a href="#" class="infobulle" title="Langage de scripts utilis dans les pages web interactives">JavaScript</a> libre qui porte sur linteraction entre le Html et le JavaScript (comprenant le <a href="#" class="infobulle" title="Document Object Model">DOM</a> et l<a href="#" class="infobulle" title="Asynchronous JavaScript and XML">AJAX </a>).</p> <p><img border="0" src="jquery-logo.gif" /></p> <p>Source : <a href="#" class="infobulle" title="Encyclopdie universelle disponible sur le Web">Wikipedia</a></p> </body> </html> Remarquonsquelattributtitleduliencontientletextedelinfobulle. Lescript: <script type="text/javascript"> //<![CDATA[ this.popup = function(){ xOffset = 10;

ENI Editions - All rigths reserved - Jonifar lina

- 9-

108

yOffset = 20; $("a.infobulle").hover(function(e){ this.texte = this.title; this.title = ""; $("body").append("<p id=infobulle>"+ this.texte +"</p>"); $("#infobulle") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.texte; $("#infobulle").remove(); }); $("a.infobulle").mousemove(function(e){ $("#infobulle") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; $(document).ready(function(){ popup(); }); //]]> </script> Dtaillonscescriptquiestassezprochedelapplicationprcdente. this.popup = function(){ xOffset = 10; yOffset = 20; Miseenplacedelafonctionpopupquidfinitledporthorizontaletvertical. $("a.infobulle").hover(function(e){ Ausurvoldunlienavecuneclasseinfobulle($("a.infobulle")),unemthodejQueryhover()estapplique. this.texte = this.title; this.title = ""; $("body").append("<p id=infobulle>"+ this.texte +"</p>"); $("#infobulle") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, Lorsquelecurseurestpositionnsurlelien,lecontenudelattributtitledulienestreprisdanslavariabletexte.Le script ajoute (append()) au corps (body) du document, un paragraphe dont lidentifiant est infobulle contenant la variable texte.Celuici est ensuite affich dans la page avec les coordonnes top et left. Cet affichage seffectue avecuneffet(fadeIn("fast")). function(){ this.title = this.texte; $("#infobulle").remove(); }); Lorsquelecurseurquittelelien,linfobulleestenleve(remove()). $("a.infobulle").mousemove(function(e){ $("#infobulle") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; Prvoyonslecasolutilisateurbougelgrementlecurseur(mousemove())alorsquilestpositionnsurlelien.Ceci

- 10 -

ENI Editions - All rigths reserved - Jonifar lina

109

permetauscriptdaccompagnercesmouvements. $(document).ready(function(){ popup(); }); Touteslesfonctionstantdfinies,lescriptjQuerypeutactiverlafonctionpopup(). Ledocumentfinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ this.popup = function(){ xOffset = 10; yOffset = 20; $("a.infobulle").hover(function(e){ this.texte = this.title; this.title = ""; $("body").append("<p id=infobulle>"+ this.texte +"</p>"); $("#infobulle") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.texte; $("#infobulle").remove(); }); $("a.infobulle").mousemove(function(e){ $("#infobulle") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; $(document).ready(function(){ popup(); }); //]]> </script> <style type="text/css"> body { margin: 0; padding-left: 10px; padding-right: 10px; font: 90% Arial, sans-serif;} a { text-decoration: none; border-bottom: 1px dashed black; color: black;} #infobulle { position: absolute; border: 1px solid black; background: #9cf; padding:2px 5px; display: none;} </style> </head> <body> <p>jQuery est un framework <a href="#" class="infobulle" title="Langage de scripts utilis dans les pages web interactives">JavaScript</a> libre qui porte sur linteraction entre le Html et le JavaScript (comprenant le <a href="#" class="infobulle" title="Document Object Model">DOM</a> et l<a

ENI Editions - All rigths reserved - Jonifar lina

- 11 -

110

href="#" class="infobulle" title="Asynchronous JavaScript and XML">AJAX </a>).</p> <p><img border="0" src="jquery-logo.gif" alt="" /></p> <p>Source : <a href="#" class="infobulle" title="Encyclopdie universelle disponible sur le Web">Wikipedia</a></p> </body> </html>

- 12 -

ENI Editions - All rigths reserved - Jonifar lina

111

Introduction
LesvnementssontlesdclencheursdelinteractivitapporteparleJavaScript.Ceuxcipermettentdassocierdes actionsdelutilisateur,desfonctionsetdesmthodes.AveclalibrairiejQuery,leprinciperestelemmemaiscertains gestionnairesdvnementssontadaptsetdesmthodesnouvellesintroduites.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

112

Lesgestionnairesdvnements
LalibrairiejQuerymetdispositiondesgestionnairesdvnementsassezsimilairesceuxduJavaScripttraditionnel. AinsiauonmouseoverdeJavaScriptcorrespondmouseoverenjQuery.Leprfixe"on"asimplementdisparu.

1.Auclicdelasouris
click() Associeunefonctionlvnementclicdeslmentsdelaslection. $("p").click(); Exemple Auclicdunparagraphe,celuicidisparat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () {

ENI Editions - All rigths reserved - Jonifar lina

- 1-

113

$(this).slideUp(); }); }); </script> <style type="text/css"> p { cursor: pointer;} </style> </head> <body> <p>Paragraphe</p> <p>Paragraphe</p> <p>Paragraphe</p> </body> </html> VoyonslescriptjQuery: $(document).ready(function(){ $("p").click(function () { Auclicsurlesparagraphes,lafonctionsuivanteestexcute. $(this).slideUp(); Llmentcliqu(this)disparatenglissantverslehaut. }); }); Findescript.

2.Audoubleclic
dblclick() Associeunefonctionlvnementdoubleclicdeslmentsdelaslection. $("div").dblclick(); LeWebtantleroyaumedeclicsimple,ledoubleclicnestfinalementquepeurpandusurlatoile. Exemple Auclicduntitre,celuiciestentourdunebordure.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

114

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("h1, h2").dblclick(function () { $(this).toggleClass(bordure); }); }); </script> <style type="text/css"> body { font: arial, sans-serif; font-size: 0.8em; } .bordure { border: 1px solid black;} h1,h2 { cursor: pointer;} </style> </head> <body> <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> </body> </html> Uncoupd ilauscript: $(document).ready(function(){ $("h1, h2").dblclick(function () { Audoubleclicduntitredeniveau1et2. $(this).toggleClass(bordure); Laclassebordureesttanttactive,tanttdsactive( toggleClass()). }); }); Finduscript.

3.Lefocus

ENI Editions - All rigths reserved - Jonifar lina

- 3-

115

focus() Associeunefonctionlvnementaufocusdeslmentsspcifis. $("p").focus(); Exemple Aufocusdunelignedetexte,ajoutonslavaleurMention obligatoire.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#mail").focus(function () { $(this).val("Mention obligatoire"); }); }); </script> </head> <body> <p>Mail : <input id="mail" type="text" value="" /></p> </body> </html> Quelquesexplicationsconcernantlescript: $(document).ready(function(){ $("#mail").focus(function () { Aufocusdelalignedetextemail.

- 4-

ENI Editions - All rigths reserved - Jonifar lina

116

$(this).val("Mention obligatoire"); Ajoutonscellecilavaleur(val("Mention obligatoire")). }); }); Findescript.

4.Lapertedufocus
blur() Dclenche lvnement qui se produit lorsque llment perd le focus. Cela a pour effet de dclencher toutes les fonctionsassociescetvnementpourleslmentsslectionns. $("input").blur(); Exemple Aprslencodage du champ relatif au nom etlapertedufocusdeceluici,larrireplan est colori et la mention "OK" est ajoute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />

ENI Editions - All rigths reserved - Jonifar lina

- 5-

117

<title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#nom").focus(); $("#nom").blur(function () { $(this).css({"background-color":"#9cf"}); $("p:first").append(" OK"); }); }); </script> </head> <body> <p>Nom : <input id="nom" type="text" value="" /></p> <p>Cliquez dans la ligne de texte suivante.</p> <p>Mail : <input id="mail" type="text" value="" /></p> </body> </html> Quelquesdtailsrelatifsauscript: $(document).ready(function(){ $("#nom").focus(); Lescriptdonnedabordlefocuslalignedetexterelativeaunom. $("#nom").blur(function () { $(this).css({"background-color":"#9cf"}); $("p:first").append(" OK"); lapertedufocusdecelleci,larrireplandelalignedetexteestcolorietlamention"OK"estajoute. }); }); Findescript.

5.Labarrededfilement
scroll() Associeunefonctionlutilisationdelabarrededfilementdunlment. $(window).scroll(); Exemple Untexteapparatlorsquelutilisateurutiliselabarrededfilement.

- 6-

ENI Editions - All rigths reserved - Jonifar lina

118

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("textarea").scroll(function () { $("span").css({"display": "inline"}).fadeOut("slow"); }); }); </script> <style type="text/css"> span { display:none;} </style> </head> <body> <p>Faites dfiler le texte...</p> <textarea cols="28" rows="5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras

ENI Editions - All rigths reserved - Jonifar lina

- 7-

119

elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</textarea> <p><span>Vous utilisez la barre de dfilement !</span></p> </body> </html> Lescriptexpliqu: $(document).ready(function(){ $("textarea").scroll(function () { lutilisationdelabarrededfilementdelazonedetexte( <textarea>), $("span").css({"display": "inline"}).fadeOut("slow"); Letextedelabalise<span>estaffichavecuneffet. }); }); Findescript.

6.Leboutondelasouris
mousedown() Associeunefonctionpourleslmentsslectionnslorsquelutilisateurpresseunetouchedelasouris. $("p").mousedown(); mouseup() Associeunefonctionpourleslmentsdelaslectionlorsquelutilisateurrelcheleboutondelasouris. $("p").mouseup(); Lvnementclicestactivlorsquunmousedownetunmouseupestdtect. Exemple Auclicdansunedivision,dtaillonslesvnementsmousedown,mouseupetclick.

- 8-

ENI Editions - All rigths reserved - Jonifar lina

120

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $("input").mousedown(function(){ $("#sortie").append("mousedown<br>"); }); $("input").mouseup(function(){ $("#sortie").append("mouseup<br>"); }); $("input").click(function(){ $("#sortie").append("click<br>"); }); }); //]]> </script> <style type="text/css"> div { width: 150px; height: 70px; overflow: auto; border: solid 1px black; padding-left: 10px;} </style> </head> <body> <p><input type="button" value="Cliquez ici" /></p> <div id="sortie"></div> </body> </html> ExploronslescriptjQuery: $(document).ready(function() { $("input").mousedown(function(){ $("#sortie").append("mousedown<br>"); }); la pression du bouton de la souris ( mousedown()), le mot "mousedown" est insr dans la division identifie par sortie. $("input").mouseup(function(){ $("#sortie").append("mouseup<br>");

ENI Editions - All rigths reserved - Jonifar lina

- 9-

121

}); Aurelchementduboutondelasouris(mouseup()),lemot"mouseup"estinsrdansladivision. $("input").click(function(){ $("#sortie").append("click<br>"); }); Lorsquelvnementclickestdtect,cestlemot"clic"quiestajout. }); Findescript.

7.Ledplacementducurseur
Dtecterlemoindremouvementducurseurestunvnementintressantmaisilfauttreconscientquecelaentrane une forte consommation des ressources du systme. En effet, les actions associes au mouvement de la souris se dclenchentdsquelecurseurbougedunpixel.Ceprocessuspeutdiminuerlusabilitdunsite,enparticulierpour lesordinateursdanciennegnration. mousemove() Associeunefonctionlorsquelutilisateurbougelecurseurdelasouris. $("div").mousemove(); Exemple Retrouvonslescoordonnesducurseurdelasourischacundesesmouvements.

- 10 -

ENI Editions - All rigths reserved - Jonifar lina

122

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mousemove(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; $("span:first").text("Position du curseur : " + pageCoords); }); $("div").mouseout(function(e){ $("span:first").text(""); }); }); </script> <style type="text/css"> div { width:240px; height:100px; margin-left:10px; border:1px solid black; } p { margin-left:10px; } span { display:block; } </style> </head> <body> <p>Survolez la division avec la souris. <span> </span> </p> <div></div> </body> </html> Lescript: $(document).ready(function(){ $("div").mousemove(function(e){ Aumouvementducurseurdansladivision. var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; LapositionhorizontaleetverticaleducurseureststockedanslavariablepageCoords.

ENI Editions - All rigths reserved - Jonifar lina

- 11 -

123

$("span:first").text("Position du curseur : " + pageCoords); }); Lapositionestaffichecommedutextedanslapremirebalise<span>. $("div").mouseout(function(e){ $("span:first").text(""); }); Lorsquelecurseurquitteladivision(mouseout()),plusriennestaffich(text("")). }); Findescript.

8.Lentreetlasortieducurseur
LeshabitusduJavaScriptretrouventlesdeux"compres"onmouseoveretonmouseout. mouseover() Associeunefonctionlorsquelutilisateurpositionnelecurseurdelasourisaudessusdunlment. $("div").mouseover(); mouseout() Associeuneactionlvnementlorsquelecurseurdelasourisquitteunlment. $("div").mouseout(); Defaon(apriori)assezsimilaire,jQueryajoutelesvnementsmouseenteretmouseleave. mouseenter() Excuteunefonctionlorsquelepointeurentredansunlment. $("div").mouseenter(); mouseleave() Dclencheunefonctionlorsquelepointeurquitteunlment. $("div").mouseleave(); Cependant le fonctionnement de ces gestionnaires dvnements est assez diffrent. En effet, mouseover, hrit du JavaScript onmouseover,propagelvnementlahirarchiedesobjetsdelapage.Cephnomneestconnusousle terme propagation des vnements ou dbordement des vnements. Au contraire, mouseenter vite cette propagationdelvnement. Il en est de mme pour mouseout qui se dclenche chaque fois que le pointeur se dplace vers ou partir dun lmentenfant.linverse,mouseleavenesedclenchequunefois,soitlorsquelepointeurquittellmentencours. Dans certaines situations de programmation, cette propagation peut se rvler gnante et jQuery y apporte une solution. Illustronscettediffrence,asseztnue,entrelemouseoveretlemouseenterpardesexemples. Prenonstoutdabordlecasdemouseover. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title>

- 12 -

ENI Editions - All rigths reserved - Jonifar lina

124

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var i = 0; $("div.overout").mouseover(function(){ $("#afficher").text("mouse over"); $("#compteur").text(++i); }) .mouseout(function(){ $("#afficher").text("mouse out"); }); }); </script> <style type="text/css"> div.out { width: 220px; height: 125px; margin-left: 15px; background-color: #9cf;} div.in { width: 70%; height: 55%; background-color: white; margin: 15px auto;} p { line-height:0.9em; padding:0;} #afficher { margin-top: 10px; margin-left: 15px; font-size: 1.2em;} #compteur { margin-left: 15px; font-size: 1.2em;} </style> </head> <body> <div class="out overout"><p>&nbsp;</p> <div class="in overout"></div> </div> <div id="afficher"></div> <div id="compteur"></div> </body> </html> Lorsquelecurseurdelasourissurvole(mouseover)ladivisioncolorie,lecompteurimplmentdanslescript,indique toutnaturellementlechiffre1.

Parcontre,lorsquelecurseurdelasourissurvoleensuiteladivisionblanche(lmentenfantdeladivisioncolorie),le compteurmarquenonpas2maislechiffre3.Lvnementdusurvoldellmentenfantsestpropaglvnement dusurvoldellmentparent.Ondnombreainsi3vnementsdesurvol.

ENI Editions - All rigths reserved - Jonifar lina

- 13 -

125

Reprenonslemmecode,maiscettefoisciavecmouseenteretmouseleave. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var i = 0; $("div.overout").mouseenter(function(){ $("#afficher").text("mouse enter"); $("#compteur").text(++i); }) .mouseleave(function(){ $("#afficher").text("mouse leave"); }); }); </script> <style type="text/css"> div.out { width: 220px; height: 125px; margin-left: 15px; background-color: #9cf;} div.in { width: 70%; height: 55%; background-color: white; margin: 15px auto;} p { line-height:0.9em; padding:0;} #afficher { margin-top: 10px; margin-left: 15px; font-size: 1.2em;} #compteur { margin-left: 15px; font-size: 1.2em;} </style> </head> <body> <div class="out overout"><p>&nbsp;</p> <div class="in overout"></div> </div> <div id="afficher"></div> <div id="compteur"></div>

- 14 -

ENI Editions - All rigths reserved - Jonifar lina

126

</body> </html> Lorsque le curseur de la souris entre ( mouseenter) dans la division colorie, le compteur implment dans le script, indiquetoutnaturellementlechiffre1.

Et lorsque le curseur de la souris entre ensuite dans la division blanche (lment enfant de la division colorie), le compteurmarquelechiffre2.Lvnementmouseenternecrepasdepropagationdvnement.

Ce dbordement dvnement induit des effets indsirables lorsquil y a des lments parents avec des enfants et quun mouseover ou mouseout est appliqu llment parent. Le mouvement de la souris sur les lments enfants peut dclencher un vnement mouseout sur leurs lments parent. Lvnementcommenceparllment enfant et remontedeparentenparent.Lapropagationestascendante. Pourensavoirplus,consultezGoogleaveclesmotscls"propagationdvnement","dbordementdvnement"ou "eventbubling". RevenonsnosvnementsjQueryparunexempledemouseenteretmouseleave. Ausurvoldeladivision,unarrireplandecouleurestappliqu.Lorsquelecurseurquittecelleci,lasituationinitiale estrtablie.

ENI Editions - All rigths reserved - Jonifar lina

- 15 -

127

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mouseenter(function(){ $(this).css({"background-color":"#9cf"}); }) .mouseleave(function(){ $(this).css({"background-color":"white"}); }); }); </script> <style type="text/css"> div { width: 200px; height: 90px; margin: 10px; border: 1px solid black;} </style> </head> <body> <div></div> </body> </html> Explicationsduscript. $(document).ready(function(){ $("div").mouseenter(function(){
- 16 ENI Editions - All rigths reserved - Jonifar lina

128

$(this).css({"background-color":"#9cf"}); }) Ausurvoldeladivision<div>parlasouris(mouseenter()),lapropritCSSdarrireplandecelleciestmodifie(css ({"background-color":"#9cf"})) .mouseleave(function(){ $(this).css({"background-color":"white"}); }); Lorsque le curseur quitte la division (mouseleave()), la couleur darrireplan est remise sur le blanc (css ({"background-color":"white"})). }); Findescript. Commentaire Commedanscetexemple,ladivisionnapasdlmentenfant,lutilisationdemouseoveretmouseoutauraiteulemme rsultat.

9.Soumettreunerequte
submit() Dclenchelvnementdenvoiduformulaire. $("form").submit(); Exemple Unformulairerclameunmotdepasse(loginenloccurrence)pouraccderausite.lasoumission,silemotdepasseest correct,lutilisateurestdirigversladressesouhaite.Sinon,unmessagederreurestaffich.

ENI Editions - All rigths reserved - Jonifar lina

- 17 -

129

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("form").submit(function() { if ($("input:first").val() == "login") { return true; } $("span").html("<b>Mot de passe non valide.</b><br>Recommencez !").show(); return false; }); }); //]]> </script> <style type="text/css"> div,p,span { margin: 5px 0 0 5px;} span { display: block;} </style> </head> <body> <p>Encodez "login" pour accder au site.</p> <form action="javascript:window.location.href=http://www.google.fr;"> <div> <input type="password" size="10" /> <input type="submit" /> </div> </form> <span></span> </body> </html> Passonslescriptenrevue. $(document).ready(function(){ $("form").submit(function() { lasoumissionduformulaire. if ($("input:first").val() == "login") { return true; } Silemotdepasseintroduitestconforme,lactiondfiniedanslecodeesteffectue.
- 18 ENI Editions - All rigths reserved - Jonifar lina

130

$("span").html("<b>Mot de passe non valide.</b><br>Recommencez !").show(); return false; Silemotdepassenestpasconforme,unmessagederreurestinsrcommeduHtmldanslabalise <span>etcelleci estaffiche. }); }); Finduscript.

10.Lesautresvnements
Ilexisteencoredautresvnementsmaisdunemploiplusrare.Parcouronsceuxciplusrapidement.
G

change() :dclencheunvnementlorsquuncontrledeformulaireestmodifi,parexemplelorsquunecase cocherdeformulaireestactive. error() :cetvnementestdclenchlorsquuneerreursurvientdanslescript. keydown(), keyup() et keypress() : dclenchent un vnement lorsquune touche du clavier est presse (verslebas),lorsquunetoucheduclavierestrelche(verslehaut)etlorsquuncaractreestencod. load()etunload() :seproduitlorsquelapageencoursestchargeouquitte. resize() : associe un vnement lorsque la taille dun lment, gnralement la fentre du navigateur, est modifie. select() :seproduitlorsquelutilisateurslectionneuntexte(ouunepartiedeceluici).Parfoisappliquaux champsdeformulairedutypelignedetexteouzonedetexte(textarea).

EtnoublionspaslvnementlabasedetoutscriptjQuery,soitready()quiassocieunefonctionlorsqueleDOMest prttretraversetmanipul.

ENI Editions - All rigths reserved - Jonifar lina

- 19 -

131

Mthodesougestionnairesdvnementsavancs
Vous pouvez programmer en jQuery pendant de longues annes en utilisant simplement les gestionnaires dvnements passs en revue dans la section Les gestionnaires dvnements de ce chapitre. Cependant, si vous dsireztirerlemaximumdespossibilitsdejQueryetvouslancerdansdesscriptspluscomplexes,ilvousfaudraalors assimilerlesmthodesetgestionnairesdvnementsavancsdejQuery.

1.Lierunvnementunobjet
Lamthode bind()estplusflexibleetpluspuissantequelesvnementsspcifiquescommeclick()oumouseover() parcourusciavant.LamthodepermetnonseulementdaffecterunouplusieursvnementsunobjetjQuerysur lequelseraexcuteunefonctionpasseenparamtremaisgalementdetransmettredesdonnescettefonction. Ainsi un clic sur un lien ou le survol dune image peut attribuer des informations diffrentes au gestionnaire dvnement. La fonction lie lvnement pourra alors sexcuter diffremment selon le contexte fourni par les donnes. bind(vnement,[donnes],fonction) Affectelvnementunlmentdonn.
G

vnement (chane de caractres) : lvnement associ. Si plusieurs vnements sont spcifis, ils seront simplementsparsparunespace. donnes(optionnel):lesdonnesventuellementfournieslafonction. fonction:lecodeexcuteraudclenchementdelvnement.

$("a#lien3").bind("mouseover mouseout", function(e){ $(this).text( "-- " + $(this).text() + " --" ); }); CettemthoderetourneunobjetjQuery. Lamthodeunbind()supprimelesactionsassociesunvnementparlamthodebind(). Exemple Relionslesvnements mouseenteret mouseleavelabalisedeparagraphe.Cettenouvelleassociationacommeactionde mettreounonunarrireplandecouleur.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

132

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").bind("mouseenter mouseleave", function(e){ $(this).toggleClass("over"); }); }); </script> <style type="text/css"> p { cursor:pointer; padding-left:20px;} p.over { background: #9cf;} </style> </head> <body> <h3>Paragraphe</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p> </body> </html> $(document).ready(function(){ AuchargementduDOMetlinitialisationdejQuery. $("p").bind("mouseenter mouseleave", function(e){ Lesvnementsmouseenteretmouseleavesontlis(bind())auxparagraphes<p>. $(this).toggleClass("over"); }); Lactionassocieestdebasculer( toggleClass())laclasseover. }); Finduready.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

133

2.Excuterunefonctionuneseulefois
one(vnement,[donnes],fonction) Associe une fonction un vnement donn. La diffrence avec la fonction bind() est que la fonction associe lvnementneseraexcuteaumaximumquuneseulefoispourchaquelmentdelaslection.
G

vnement(chanedecaractres):typedvnementconcern. donnes[optionnel]:donnessupplmentairespasseraugestionnairedvnements. fonction:fonctionassocierlvnement.

$("p").one("click", function(){ alert( $(this).text() ); }); CettemthoderetourneunobjetjQuery. Cettefonctionpeutservlertrsutiledanscertainsscripts. Exemple Soitunboutonquelonnepeutcliquerquunefois.Aupremierclic,unmessageestaffich.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />

ENI Editions - All rigths reserved - Jonifar lina

- 3-

134

<title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("button").one("click", function(){ $("div").html("<b>Inutile de cliquer encore !</b>"); }); }); //]]> </script> <style type="text/css"> div { width: 180px; height: 30px; margin-top:10px; padding-left: 5px; border: 1px solid black;} </style> </head> <body> 1 seul clic est permis<br /> <button>Test</button> <div></div> </body> </html>

$(document).ready(function(){ $("button").one("click", function(){ Auclicsurlebouton,lafonctionsuivanteestexcute. $("div").html("<b>Inutile de cliquer encore !</b>"); }); La phrase "Inutile de cliquer encore" est affiche comme du Html dans la division. Comme la mthode one() a t utilise,laphrasenesaffichequuneseulefoisettoutclicsupplmentairesurleboutonnentraneplusaucuneaction. }); Finduscript.

3.Dclencherunvnementparticulier
trigger(vnement) Dclencheunvnementparticulierpourleslmentsdelaslection.Celavaaussidclencherlactionpardfautdu navigateur pour ce type dvnement (si elle existe). Par exemple, utiliser le type dvnement submit dans la fonctionvaaussidclencherlenvoiduformulaireparlenavigateur.Cetteactionpardfautpeuttreempcheen retournant" false"dansunedesfonctionsassocieslvnementpourundeslmentsdelaslection. Vouspouvezgalementutiliserlafonctionbind(). $("p").trigger("click"); CettemthoderetourneunobjetjQuery. Exemple Auclicdulien,lacasecocherCheckboxseraslectionne.

- 4-

ENI Editions - All rigths reserved - Jonifar lina

135

Auclicdulien,lescriptcochelacaseCheckbox,cequidclencheunmessagedalerte.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $(input).bind(click, function() { alert(Checkbox coch); }); $(a).bind(click, function() { $(input).trigger(click); return false; }); }); </script> <style type="text/css"> a { color: black;} </style> </head> <body> <p><input type="checkbox" /> Checkbox</p> <p><a href="#">Dclenche le clic sur le checkbox</a></p> </body> </html>

4.Dlguerunvnement

ENI Editions - All rigths reserved - Jonifar lina

- 5-

136

Soitunvnement clicksurunlmentdeliste<li>quignreunnouvellmentdeliste.Lvnementclickdoit continuer fonctionner pour tous ces lments de liste nouvellement crs. Ce qui nest pas le cas de la mthode bind()quidoittreredfiniesurcesnouveauxlments.Lamthodelive()remdieceproblme. live(vnement,fonction) Attacheunefonctionunvnementdonnpourtousleslments existantsetfuturstrouvs. $("p").live("click", function(){ alert( $(this).text() ); }); Afficheunebotedalerteauclicdechaqueparagraphedetexte. CettemthoderetourneunobjetjQuery. Il faut bien comprendre que jQuery fonctionne sur les lments existant au chargement du DOM. Si un vnementgnreunnouvellment,votrefonctionnagirapassurceluici. La mthode live() permet de contournerleproblmeetrappellelafonctiondfinieaprssonexcution.Cequiapourconsquencedepouvoir agirsurlesnouveauxlmentsdunepage. Lamthodedie(vnement, fonction)annulelive()enarrtantlafonctiondfinieenparamtre. Exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("p").live("click", function(){ $(this).after("<p>Un autre paragraphe</p>"); }); }); //]]> </script> <style type="text/css"> p { background: #9cf; cursor: pointer; padding-left: 5px; margin : 7px 0 7px 0;} </style> </head> <body> <p>Cliquez moi !</p> </body> </html>

- 6-

ENI Editions - All rigths reserved - Jonifar lina

137

Leclicgnreunnouveauparagraphe.

En cliquant sur le paragraphe initial ou sur le paragraphe nouvellement cr, la fonction ajoute nouveau un paragraphe.Etainsidesuite...

ENI Editions - All rigths reserved - Jonifar lina

- 7-

138

MthodespropresjQuery
1.Aupassagedelasouris
Cette fonction propre jQuery reprend les vnements onmouseover et onmouseout du JavaScript ou mouseover et mouseoutdejQuery,soitlorsquelecurseursurvoleunlmentetquitteceluici. hover(fonction1,fonction2) La mthode hover() de jquery lie deux vnements frquemment utiliss llment slectionn lun lorsque le pointeursurvoleetlautrelorsquillequitte. Cette mthode seffectue donc en deux temps. Quand le curseur se situe audessus dun lment dtermin, la premire fonction passe en paramtre est excute. Lorsque le curseur sort du cadre de llment, la seconde fonctionestexcute. $("p").hover(function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); }); Ausurvoldesparagraphes,laclassehoverestajoute.Lorsquelecurseurquittelazone,laclasseestretire.Cette mthoderetourneunobjetjQuery. Exemple Leclassique,uneimagequichangeausurvoldelasouris.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

139

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> .image { position: absolute; top: 10px; left: 10px;} </style> </head> <body> <div class="image"> <img src="pollution1.jpg" /> </div> </body> </html> LescriptjQueryscrit: <script type="text/javascript"> $(document).ready(function () { $(img).hover(function () { this.src = pollution2.jpg; }, function () { this.src = pollution1.jpg; }); }); </script> Dtaillonsceluici. $(document).ready(function () { $(img).hover(function () { Unemthodehover()estappliqueauximages. this.src = pollution2.jpg; }, Dans un premier temps, au survol du curseur, limage "pollution2.jpg" est charge en modifiant lattribut src de la balise<img>.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

140

function () { this.src = pollution1.jpg; }); Dansunsecondtemps,lorsquelecurseurquittelimage,lescriptrevientlasituationdedpart. }); Findescript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $(img).hover(function () { this.src = pollution2.jpg; }, function () { this.src = pollution1.jpg; }); }); </script> <style type="text/css"> .image { position: absolute; top: 10px; left: 10px;} </style> </head> <body> <div class="image"> <img src="pollution1.jpg" alt="" /> </div> </body> </html>

2.Basculerdunesituationlautre
Nousretrouvonsicilafonctiontoggle()djabordeparailleurs. toggle(fonction1,fonction2,etc.) Permetdebasculerdunefonctionlautrechaqueclicsurleslmentsdelaslection. Dsquelvnement clicestralis,lapremirefonctionestexcute.Auclicsuivant,lasecondeseraexcute.Et ainsidesuite. $("p").toggle(function(){ $(this).addClass("selected"); }, function(){ $(this).removeClass("selected"); }); Auclicsurlesparagraphes,laclasse selectedestajoute.Auclicsuivant,lammeclasseestenleve.Etainside suite. CettemthoderetourneunobjetjQuery. Exemple
ENI Editions - All rigths reserved - Jonifar lina - 3-

141

Auclicsurunedivision,larrireplandecelleciestcolori.Auclicsuivant,cellecireprendsacouleurblanche.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> #div { width: 150px; height: 60px; cursor: pointer; border: 1px solid black; padding-left: 10px; padding-right: 10px;} </style> </head> <body> <div id="div">jQuery</div> </body> </html> LescriptjQuery. <script type="text/javascript"> $(document).ready(function(){ $("#div").toggle( function () { $(this).css({"background-color": "#9cf","text-align": "right"}); }, function () { $(this).css({"background-color": "white", "text-align": "left"}); } );

- 4-

ENI Editions - All rigths reserved - Jonifar lina

142

}); </script> Explicationsduscript. $(document).ready(function(){ $("#div").toggle( function () { $(this).css({"background-color": "#9cf","text-align": "right"}); }, Aupremierclicsurladivision<div>,cellecisevoitdotedunarrireplandecouleur(background-color": "#9cf")et dunalignementdetextedroite(text-align": "right). function () { $(this).css({"background-color": "white", "text-align": "left"}); } ); Ausecondclic,larrireplanetlalignementsontrtablis. }); Findescript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#div").toggle( function () { $(this).css({"background-color": "#9cf","text-align": "right"}); }, function () { $(this).css({"background-color": "white", "text-align": "left"}); } ); }); </script> <style type="text/css"> #div { width: 150px; height: 60px; cursor: pointer; border: 1px solid black; padding-left: 10px; padding-right: 10px;} </style> </head> <body> <div id="div">jQuery</div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

143

Applications
1.Unmenudcal
Ausurvoldunitemdumenudenavigation,celuicisedplaceversladroite.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> #nav ul { list-style: none; padding: 0px; margin: 0px;} #nav li a { display: block; height: 25px; line-height: 25px; width: 120px; background: #99ccff; border: 1px solid navy; color: black; text-decoration: none;

ENI Editions - All rigths reserved - Jonifar lina

- 1-

144

text-align: center;} </style> </head> <body> <div id="nav"> <ul id="menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> <li><a href="#">Menu Item 4</a></li> <li><a href="#">Menu Item 5</a></li> </ul> </div> </body> </html> LescriptjQueryseprsenteainsi: <script type="text/javascript"> $(document).ready(function() { $(ul#menu li a).hover(function() { $(this).stop().animate( { paddingLeft:"50px" }, 400 ); }, function() { $(this).stop().animate( { paddingLeft:"0" }, 200 ) }) }); </script> Dvelopponsceluici. $(document).ready(function() { $(ul#menu li a).hover(function() { Lamthodehover()estassocieauxlmentsdelalisteconstituantlemenudenavigation. $(this).stop().animate( { paddingLeft:"50px" }, 400 ); }, Au survol de chaque item, le script arrte dabord toute animation en cours (stop()). Puis, met en uvre une animation(animate())quiconsisteaugmenterleretraitparrapportaubordgauche(paddingLeft:"50px"). $(this).stop().animate( { paddingLeft:"0" }, 200 ) }) Lorsquelecurseurquittelitem,lesecondvoletdelamthodehover(),faitrevenirlitemsapositioninitiale. }); Findureadyetduscript. Ledocumentfinaldevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(ul#menu li a).hover(function() { $(this).stop().animate( { paddingLeft:"50px" }, 400 ); }, function() {

- 2-

ENI Editions - All rigths reserved - Jonifar lina

145

$(this).stop().animate( { paddingLeft:"0" }, 200 ) }) }); </script> <style type="text/css"> #nav ul { list-style: none; padding: 0px; margin: 0px;} #nav li a { display: block; height: 25px; line-height: 25px; width: 120px; background: #99ccff; border: 1px solid navy; color: black; text-decoration: none; text-align: center;} </style> </head> <body> <div id="nav"> <ul id="menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> <li><a href="#">Menu Item 4</a></li> <li><a href="#">Menu Item 5</a></li> </ul> </div> </body> </html>

2.Zoomsurvignette
Concevonsunscriptquipermetdafficheruneimageentaillerelleausurvoldunevignettedecelleci. Cet exemple est une version simplifie du superbe script de SohTanaka disponible ladresse : www.sohtanaka.com/webdesign/examples/imagezoom/ Latranscriptionpapiernerendpaslectdynamiqueduscript.Reportezvouslespacedetlchargementpouren profiterpleinement.

ENI Editions - All rigths reserved - Jonifar lina

- 3-

146

LefichierXhtmlinitial: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Zoom</title> <style type="text/css"> body { padding: 3px; margin: 0px;} .container { position: absolute; top: 50px; left : 10px;} ul.thumb { padding: 0px; list-style-type: none; margin: 0px; width: 260px; float: left;} ul.thumb li { position: relative; padding: 0px; margin: 0px; width: 100px; height: 100px; float: left;} ul.thumb li img { position: absolute; padding : 0px; width: 90px; height: 60px; left: 0px; border: none;} </style> </head> <body> <p> Survolez la vignette pour agrandir limage.</p> <div class="container"> <ul class="thumb"> <li><img alt="" src="iceberg1.jpg" /></li> <li><img alt="" src="iceberg2.jpg" /></li> </ul> </div> </body> </html> Lescript:

- 4-

ENI Editions - All rigths reserved - Jonifar lina

147

<script type="text/javascript"> $(document).ready(function(){ $("ul.thumb li").hover(function() { $(this).css({z-index : 10}); $(this).find(img).addClass("hover").stop() .animate({ marginTop: -90px, marginLeft: -50px, top: 50%, left: 50%, width: 225px, height: 150px, }, 200); } , function() { $(this).css({z-index : 0}); $(this).find(img).removeClass("hover").stop() .animate({ marginTop: 0, marginLeft: 0, top: 0, left: 0, width: 90px, height: 60px, }, 400); }); }); </script> Celuicincessitequelquesclaircissements: $(document).ready(function(){ $("ul.thumb li").hover(function() { Applicationdunhover()surlavignette. $(this).css({z-index : 10}); .animate({ marginTop: -90px, marginLeft: -50px, top: 50%, left: 50%, width: 225px, height: 150px, }, 200); } , Au survol de la vignette, la proprit de style z-index est modifie (css({z-index : 10})) pour faire passer limageaupremierplan.Ensuiteuneanimation(animate())modifieunesriedeparamtres. function() { $(this).css({z-index : 0}); $(this).find(img).removeClass("hover").stop() .animate({ marginTop: 0, marginLeft: 0, top: 0, left: 0, width: 90px, height: 60px, }, 400); }); Lorsque le curseur quitte limage, la proprit de style z-index est rtablie son tat initial. Ce queffectue galementuneanimation(animate())surunesriedeparamtres. }); Finduscript. Lefichierfinal:

ENI Editions - All rigths reserved - Jonifar lina

- 5-

148

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Zoom</title> <style type="text/css"> body { padding: 3px; margin: 0px;} .container { position: absolute; top: 50px; left : 10px;} ul.thumb { padding: 0px; list-style-type: none; margin: 0px; width: 260px; float: left;} ul.thumb li { position: relative; padding: 0px; margin: 0px; width: 100px; height: 100px; float: left;} ul.thumb li img { position: absolute; padding : 0px; width: 90px; height: 60px; left: 0px; border: none;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.thumb li").hover(function() { $(this).css({z-index : 10}); $(this).find(img).addClass("hover").stop() .animate({ marginTop: -90px, marginLeft: -50px, top: 50%, left: 50%, width: 225px, height: 150px, }, 200); } , function() { $(this).css({z-index : 0}); $(this).find(img).removeClass("hover").stop() .animate({ marginTop: 0, marginLeft: 0, top: 0, left: 0, width: 90px, height: 60px, }, 400); }); }); </script> </head> <body> <p> Survolez la vignette pour agrandir limage.</p> <div class="container"> <ul class="thumb"> <li><img alt="" src="iceberg1.jpg" /></li> <li><img alt="" src="iceberg2.jpg" /></li> </ul> </div> </body>
- 6 ENI Editions - All rigths reserved - Jonifar lina

149

</html>

ENI Editions - All rigths reserved - Jonifar lina

- 7-

150

Introduction
LesanimationsvisuellesfontpartieprenanteduJavaScript.Utilisesbonescientetavecmodration,ellespeuvent donnerplusdeforceunlmentducontenu.LeWeb2.0lesadailleurslargementadoptes. Il faut admettre que raliser une animation graphiquement volue en pur JavaScript, tourne rapidement en un cauchemar de programmation pour tenir compte des spcifications propres chaque type de navigateur, voire chaque version de celuici. Le framework jQuery propose une srie deffets visuels faciles encoder et parfaitement compatibles.Enoutre,jQueryoffreaussilapossibilitdecrervospropresanimations. Ce chapitre est trs visuel avec ses effets et autres animations. Il est vivement conseill de consulter les exemples fournisdanslespacedetlchargementpourencomprendrelefonctionnementrel.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

151

Afficheretcacher
Lesmthodesshow()ethide()dejQuerypermettentdefaireapparatreetdisparatredeslments. show(vitesse,fonctionderappel) Afficheunlmentslectionn(pourautantqueceluicisoitcach). Lanimationmodifiedynamiquementlahauteur,lalargeuretlopacitdellment.DepuislaspcificationjQuery1.3, lesmargesexternesetinternessontgalementmodifiespourobteniruneffetplusfluide.
G

vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. $(p).show(slow);

fonctionderappel(callback)(optionnel):fonctionexcuterlafindeleffet. $(p).show(slow, function(){alert("Fin");});

CettemthoderenvoieunobjetjQuery. hide(vitesse,fonctionderappel) Cacheunlmentslectionn(pourautantqueceluicisoitvisible). Lanimationmodifiedynamiquementlahauteur,lalargeuretlopacitdellment.DepuislaspcificationjQuery1.3, lesmargesexternesetinternessontgalementmodifiespourobteniruneffetplusfluide.


G

vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. $(p).hide(fast);

fonctionderappel(callback)(optionnel):fonctionexcuterlafindeleffet. $(p).hide(normal, function(){alert("Fin");});

CettemthoderenvoieunobjetjQuery.

1.Afficheretcacherdutexte
Lexemplesuivantproposeaulecteurdafficherlasuitedunarticle,aprsavoircliqusurlelien.

ENI Editions - All rigths reserved - Jonifar lina - 1-

152

LefichierHtmldedpartseprsentecommesuit: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black; text-decoration: none;} </style> </head> <body> <h2>Regiones factae lingua Amano</h2> <p> Prodesse sonu primos quidem decere prodesse placeret adlocutus addensque docens primos conperto quod consulens protectoribus. </p> <p> Est quale Quod amantur ita congruamus utilitatis sensus quae probitatis esset est potius ab in amant cogitatione bestiis quae natura videamur quale quasi ita virtutis quam et et indigentia Quod. </p> <div> <a href="#" class="suite">&gt; Lire la suite...</a> </div> </body> </html> LescriptjQuery:

<script type="text/javascript"> $(document).ready(function() { var $paragraphe2 = $(p:eq(1)); $paragraphe2.hide(); $(a.suite).click(function() { if ($paragraphe2.is(:hidden)) {

- 2-

ENI Editions - All rigths reserved - Jonifar lina

153

$paragraphe2.show(slow); $(this).text(> Lire moins); } else { $paragraphe2.hide(slow); $(this).text(> Lire la suite...); return false; } }); }); </script> Dtaillonsceluici: $(document).ready(function() { var $paragraphe2 = $(p:eq(1)); AuchargementduDOM,lesecondparagrapheestchargdanslavariable$paragraphe2.Rappelonsquelamthode eq()dbute0,commesouventenJavaScript. LesprogrammeursutilisentsouventlaconventiondefairedbuterlesvariablesdansunscriptjQueryparlesigne$. $paragraphe2.hide(); Lesecondparagrapheestcachauchargementdelapage. $(a.suite).click(function() { if ($paragraphe2.is(:hidden)) { $paragraphe2.show(slow); $(this).text(> Lire moins); Auclicsurlelien>Lirelasuite...,silesecondparagrapheestbiencach( hidden),ilestalorsaffichunevitesse lenteprdfinieetletextedulienestmodifien>Liremoins. } else { $paragraphe2.hide(slow); $(this).text(> Lire la suite...); return false; } Sinon,lesecondparagrapheestcachetletextedulienmodifien">Lirelasuite...". }); }); Findescript. Lefichiercompletdevientalors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var $paragraphe2 = $(p:eq(1)); $paragraphe2.hide(); $(a.suite).click(function() { if ($paragraphe2.is(:hidden)) { $paragraphe2.show(slow); $(this).text(> Lire moins); } else { $paragraphe2.hide(slow); $(this).text(> Lire la suite...);

ENI Editions - All rigths reserved - Jonifar lina

- 3-

154

return false; } }); }); </script> <style type="text/css"> a { color: black; text-decoration: none;} </style> </head> <body> <h2>Regiones factae lingua Amano</h2> <p> Prodesse sonu primos quidem decere prodesse placeret adlocutus addensque docens primos conperto quod consulens protectoribus. </p> <p> Est quale Quod amantur ita congruamus utilitatis sensus quae probitatis esset est potius ab in amant cogitatione bestiis quae natura videamur quale quasi ita virtutis quam et et indigentia Quod. </p> <div> <a href="#" class="suite">&gt; Lire la suite...</a> </div> </body> </html>

2.Droulerdeslistesimbriques
Nousallonspermettrededroulerdeslistesimbriquesparunclicsuruneimage.

Lesimagesplus.gif etmoins.gif sontdisponiblesdanslespacedetlchargementrservcetouvrage.

LefichierHtmldedpartseprsentecommesuit: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script src="jquery.js" type="text/javascript"></script> <style type="text/css"> body{ font-family: Arial,sans-serif; font-size: 0.9em; margin-left: 0px;} </style>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

155

</head> <body> <ul> <li>Chapitre 1</li> <li>Chapitre 2</li> <li>Chapitre 3 <ul> <li>Point 3.1</li> <li>Point 3.2 <ul> <li>Item 3.2.1</li> <li>Item 3.2.2</li> <li>Item 3.2.3 <ul> <li>Sous-item 3.2.3.1</li> <li>Sous-item 3.2.3.2</li> <li>Sous-item 3.2.3.3</li> <li>Sous-item 3.2.3.4</li> <li>Sous-item 3.2.3.5</li> </ul> </li> </ul> </li> <li>Point 3.3</li> <li>Point 3.4 <ul> <li>Item 3.4.1</li> <li>Item 3.4.2</li> <li>Item 3.4.3</li> </ul> </li> </ul> </li> <li>Chapitre 4 <ul> <li>Point 4.1</li> <li>Point 4.2 <ul> <li>Item 4.2.1</li> <li>Item 4.2.2</li> </ul> </li> </ul> </li> <li>Chapitre 5</li> </ul> </body> </html> LescriptjQuery:

ENI Editions - All rigths reserved - Jonifar lina

- 5-

156

<script type="text/javascript"> $(document).ready(function() { $(li:has(ul)) .click(function(){ if ($(this).children().is(:hidden)) { $(this).css(list-style-image,url(minus.gif)) .children().show(); } else { $(this).css(list-style-image,url(plus.gif)) .children().hide(); } return false; }) .css(cursor,pointer) .click(); $(li:not(:has(ul))).css({cursor: default, list-style-image:none }); }); </script> Dtaillonsceluici. $(document).ready(function() { $(li:has(ul)) Au chargement du DOM, le script slectionne tous les lments de liste (<li>) qui possdent une liste imbrique (<ul>). .click(function(){ Auclicsurceslments. if ($(this).children().is(:hidden)) {

- 6-

ENI Editions - All rigths reserved - Jonifar lina

157

$(this).css(list-style-image,url(minus.gif)) .children().show(); } Si les listes imbriques de cet lment (soit les descendants) sont caches, limage est change en minus.gif et cellescisontdployes. else { $(this).css(list-style-image,url(plus.gif)) .children().hide(); } return false; }) Sinon,limageplus.gifestafficheetleslistesimbriquessontcaches. .css(cursor,pointer) .click(); Il nous reste nous occuper de la forme du curseur de la souris. Pour les lments slectionns par les lignes de codeprcdentes( li:has(ul)),lecurseurprendlaformedunemain(pointer). $(li:not(:has(ul))).css({cursor: default, list-style-image:none }); Pourleslmentsquinepossdentpasdelisteimbrique( li:not(:has(ul))),laformeducurseurpardfautest retenueetilnyapasdepetiteicneaffiche. }); Finduscript. Lefichiercompletdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> body{ font-family: Arial,sans-serif; font-size: 0.9em; margin-left: 0px;} </style> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(li:has(ul)) .click(function(){ if ($(this).children().is(:hidden)) { $(this).css(list-style-image,url(minus.gif)) .children().show(); } else { $(this).css(list-style-image,url(plus.gif)) .children().hide(); } return false; }) .css(cursor,pointer) .click(); $(li:not(:has(ul))).css({cursor: default, list-style-image:none });

ENI Editions - All rigths reserved - Jonifar lina

- 7-

158

}); </script> </head> <body> <ul> <li>Chapitre 1</li> <li>Chapitre 2</li> <li>Chapitre 3 <ul> <li>Point 3.1</li> <li>Point 3.2 <ul> <li>Item 3.2.1</li> <li>Item 3.2.2</li> <li>Item 3.2.3 <ul> <li>Sous-item 3.2.3.1</li> <li>Sous-item 3.2.3.2</li> <li>Sous-item 3.2.3.3</li> <li>Sous-item 3.2.3.4</li> <li>Sous-item 3.2.3.5</li> </ul> </li> </ul> </li> <li>Point 3.3</li> <li>Point 3.4 <ul> <li>Item 3.4.1</li> <li>Item 3.4.2</li> <li>Item 3.4.3</li> </ul> </li> </ul> </li> <li>Chapitre 4 <ul> <li>Point 4.1</li> <li>Point 4.2 <ul> <li>Item 4.2.1</li> <li>Item 4.2.2</li> </ul> </li> </ul> </li><li>Chapitre 5</li> </ul> </body> </html>

- 8-

ENI Editions - All rigths reserved - Jonifar lina

159

Glisserverticalement
Les fonctions slideDown() et slideUp() permettent de jouer dynamiquement sur la hauteur dun lment, gnralementunedivision<div> ... </div>. slideDown(vitesse,fonctionderappel) Faitglisserverslebas(down)unlmentslectionn. Lanimationmodifieseulementlahauteur.DepuislaspcificationjQuery1.3,lesmargesverticales,externesetinternes sontgalementmodifiespourobteniruneffetplusfluide.
G

vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. $(div).slideDown(fast);

fonctionderappel(callback)(optionnel):fonctionexcuterlafindeleffet. $(div).slideDown(fast, function(){alert("Fin");});

CettemthoderenvoieunobjetjQuery. slideUp(vitesse,fonctionderappel) Faitglisserverslehaut(up)unlmentslectionn. Lanimationmodifieseulementlahauteur.DepuislaspcificationjQuery1.3,lesmargesverticales,externesetinternes sontgalementmodifiespourobteniruneffetplusfluide.


G

vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. $(div).slideUp(fast);

fonctionderappel(callback)(optionnel):fonctionexcuterlafindeleffet. $(div).slideUp(fast, function(){alert("Fin");});

CettemthoderenvoieunobjetjQuery.

1.Faireglisserunedivision
Auclicsurlebouton,nousallonsdroulerunedivision.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

160

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"/> <title>jQuery</title> <style type="text/css"> div { width:94px; height:150px; background:#9cf; border: 1px solid black; display:none; } </style> </head> <body> <p> <button>Cliquez-moi</button> </p> <div></div>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

161

</body> </html> LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { if ($("div").is(":hidden")) { $("div").slideDown("slow"); } else {$("div").slideUp("slow"); } }); }); </script> Explications: $(document).ready(function(){ $("button").click(function () { AprslechargementduDOM,auclicdelasourissurlabalise<button>. if ($("div").is(":hidden")) { $("div").slideDown("slow"); } Siladivision(<div>)estcache,celleciglisseverslebas. else {$("div").slideUp("slow"); } Sinon,ladivisionglisseverslehaut. }); }); Finduscript. Lapagecomplte: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"/> <title>jQuery</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { if ($("div").is(":hidden")) { $("div").slideDown("slow"); } else {$("div").slideUp("slow"); } }); }); </script> <style type="text/css"> div { width:94px; height:150px;

ENI Editions - All rigths reserved - Jonifar lina

- 3-

162

background:#9cf; border: 1px solid black; display:none; } </style> </head> <body> <p> <button>Cliquez-moi</button> </p> <div></div> </body> </html>

2.Unmenudroulantvertical
laboronsunmenudroulantverticalassezsimplesinonsimpliste.

LefichierHtmlinitial: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- 4 ENI Editions - All rigths reserved - Jonifar lina

163

8859-1" /> <title>jQuery</title> <style type="text/css"> a { text-decoration: none; color: black;} .chapitre { width: 100px; background: #9cf; border-bottom: 1px solid black; cursor: pointer; text-align: center; border: 1px solid black;} .items { width: 100px; text-align: center; border: 1px solid black; display: none;} </style> </head> <body> <div class="chapitre">Chapitre 1</div> <div class="items"> <a href="">Point 1</a><br /> <a href="">Point 2</a><br /> <a href="">Point 3</a> </div> <div class="chapitre">Chapitre 2</div> <div class="items"> <a href="">Point 1</a><br /> <a href="">Point 2</a> </div> <div class="chapitre">Chapitre 3</div> <div class="items"> <a href="">Point 1</a><br /> <a href="">Point 2</a><br /> <a href="">Point 3</a><br /> <a href="">Point 4</a> </div> <div class="chapitre">Chapitre 4</div> <div class="items"> <a href="">Point 1</a><br /> <a href="">Point 2</a><br /> <a href="">Point 3</a> </div> </body> </html> LescriptJQuery: <script type="text/javascript"> $(document).ready(function() { $(div.chapitre).click(function() { $(div.items).slideUp(normal); $(this).next().slideDown(normal); }); $("div.items").hide(); }); </script>

$(document).ready(function() { $(div.chapitre).click(function() { AuchargementduDOM,auclicsurladivisiondontlaclasseestchapitre. $(div.items).slideUp(normal); Lesdivisionsitemssereferment(glissentverslehaut). $(this).next().slideDown(normal); });

ENI Editions - All rigths reserved - Jonifar lina

- 5-

164

Lescriptdemandedatteindreleslmentssuivants( next) de llmentslectionn(this)parleclicsurladivision chapitre. $("div.items").hide(); Lesdivisionsitemssontcachesafinquelemenuseprsentedefaonrefermelouverturedelapage. }); Findescript. Lefichiercomplet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(div.chapitre).click(function() { $(div.items).slideUp(normal); $(this).next().slideDown(normal); }); $("div.items").hide(); }); </script> <style type="text/css"> a { text-decoration: none; color: black;} .chapitre { width: 100px; background: #9cf; border-bottom: 1px solid black; cursor: pointer; text-align: center; border: 1px solid black;} .items { width: 100px; text-align: center; border: 1px solid black; display: none;} </style> </head> <body> <div class="chapitre">Chapitre 1</div> <div class="items"> <a href="">Point 1</a><br /> <a href="">Point 2</a><br /> <a href="">Point 3</a> </div> <div class="chapitre">Chapitre 2</div> <div class="items"> <a href="">Point 1</a><br /> <a href="">Point 2</a> </div> <div class="chapitre">Chapitre 3</div> <div class="items"> <a href="">Point 1</a><br /> <a href="">Point 2</a><br /> <a href="">Point 3</a><br /> <a href="">Point 4</a> </div> <div class="chapitre">Chapitre 4</div> <div class="items"> <a href="">Point 1</a><br /> <a href="">Point 2</a><br />
- 6 ENI Editions - All rigths reserved - Jonifar lina

165

<a href="">Point 3</a> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 7-

166

Raliseruneffetdefondu
Cet effet dapparition ou de disparition dunlmentenmodifiantprogressivementsonopacitestpeuttre la plus belleralisationdejQuerydanscechapitreconsacrauxeffets. fadeIn(vitesse,fonctionderappel) Faitapparatrellmentslectionnselonuneffetdefondu. Cetteanimationestobtenueenajustantuniquementlopacit.Llmentslectionndoitainsidjavoirunelargeur etunehauteurspcifie.
G

vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. $(p:first).fadeIn(4000);

fonctionderappel(callback)(optionnel):fonctionexcuterlafindeleffet. $(p:first).fadeIn(4000, function(){alert("Fin");});

CettemthoderenvoieunobjetjQuery. fadeOut(vitesse,fonctionderappel) Faitdisparatrellmentslectionnselonuneffetdefondu. Cetteanimationestobtenueenajustantuniquementlopacit.Llmentslectionndoitainsidjavoirunelargeur etunehauteurspcifie.


G

vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. $(p:first).fadeIn(4000);

fonctionderappel(callback)(optionnel):fonctionexcuterlafindeleffet. $(p:first).fadeIn(4000, function(){alert("Fin");});

CettemthoderenvoieunobjetjQuery. fadeTo(vitesse,opacit,fonctionderappel) Modifielopacitdellmentslectionnjusquunevaleurfourniedanslescript.


G

vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. $( p:first).fadeTo(slow, 0.33);

opacity(nombre):dterminelavaleurdelopacitatteindre(nombrecomprisentre0et1). fonctionderappel(callback)(optionnel):fonctionexcuterlafindeleffet. $(p:first).fadeTo(slow, 0.33, function(){alert("Fin");});

CettemthoderenvoieunobjetjQuery.

1.Uneapparitionetdisparitionprogressive
Mettonsen uvrecesmthodesjQuerysuruneimage. Lesimagesdecetexemplesontprsentesdanslespacedetlchargement.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

167

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Modle jQuery</title> <style type="text/css"> #bloc { width: 210px; height: 117px; border: 1px solid black; margin-top: 15px;} #image { margin: 5px;} </style> </head> <body> <div> <input type="button" id="boutonFadeOut" value="Fade Out" /> <input type="button" id="boutonFadeIn" value="Fade In" /> </div> <div id="bloc"> <img src="eole3.jpg" alt="" width="200" height="107" id="image" /> </div> </body> </html> Lapartiescript:

- 2-

ENI Editions - All rigths reserved - Jonifar lina

168

<script type="text/javascript"> $(document).ready(function(){ $("#boutonFadeOut").click(function () { $("#image").fadeOut(); }); $("#boutonFadeIn").click(function () { $("#image").fadeIn(); }); });</script> Dtaillonsceluici. $(document).ready(function(){ $("#boutonFadeOut").click(function () { $("#image").fadeOut(); }); AprschargementduDOM,leclicsurleboutonFadeOut,faitdisparatrelimageavecuneffetdefondu. $("#boutonFadeIn").click(function () { $("#image").fadeIn(); }); LeclicsurleboutonFadeInfaitapparatrelimageavecuneffetdefondu.

ENI Editions - All rigths reserved - Jonifar lina

- 3-

169

}); Findescript. Lefichierfinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Modle jQuery</title> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#boutonFadeOut").click(function () { $("#image").fadeOut(); }); $("#boutonFadeIn").click(function () { $("#image").fadeIn(); }); }); </script> <style type="text/css"> #bloc { width: 210px; height: 117px; border: 1px solid black; margin-top: 15px;} #image { margin: 5px;} </style> </head> <body> <div> <input type="button" id="boutonFadeOut" value="Fade Out" /> <input type="button" id="boutonFadeIn" value="Fade In" /> </div> <div id="bloc"> <img src="eole3.jpg" alt="" width="200" height="107" id="image" /> </div> </body> </html>

2.Jouersurlopacit
Faisonsapparatreenclair,uneimageprsenteengrisauchargementdelapage. Lesimagesdecetexemplesontprsentesdanslespacedetlchargement.

- 4-

ENI Editions - All rigths reserved - Jonifar lina

170

LefichierHtmlinitial: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> p { font-family:Arial, Helvetica, sans-serif; margin-left: 12px; font-size: 12px;} .image { border: 1px solid black; margin-left: 8px;} </style> </head> <body> <p>Survolez limage avec le curseur de la souris</p>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

171

<div> <img src="eole1.jpg" alt="" width="120" height="180" class="image" /> <img src="eole2.jpg" alt="" width="120" height="180" class="image" /> </div> </body> </html> LescriptjQuery <script type="text/javascript"> $(document).ready(function(){ $(".image").fadeTo("slow", 0.5); $(".image").hover(function(){ $(this).fadeTo("slow", 1.0); },function(){ $(this).fadeTo("fast", 0.5); }); }); </script> Explicitonslescript. $(document).ready(function(){ $(".image").fadeTo("slow", 0.5); AuchargementduDOM,lesimagessontaffichesengrisavecuneopacitde0,5. $(".image").hover(function(){ $(this).fadeTo("slow", 1.0); Ausurvoldelimageparlecurseurdelasouris,limageenquestionestaffichenormalement(opacit1).Leffetde fonduestlent. },function(){ $(this).fadeTo("fast", 0.5); Lorsquelecurseurquittelimage,cellecirevientsontatinitial(opacit0,5). }); }); Findescript. Lefichiercompletestalors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".image").fadeTo("slow", 0.5); $(".image").hover(function(){ $(this).fadeTo("slow", 1.0); },function(){ $(this).fadeTo("fast", 0.5); }); }); </script> <style type="text/css"> p { font-family:Arial, Helvetica, sans-serif; margin-left: 12px; font-size: 12px;} .image { border: 1px solid black;

- 6-

ENI Editions - All rigths reserved - Jonifar lina

172

margin-left: 8px;} </style> </head> <body> <p>Survolez limage avec le curseur de la souris</p> <div> <img src="eole1.jpg" alt="" width="120" height="180" class="image" /> <img src="eole2.jpg" alt="" width="120" height="180" class="image" /> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 7-

173

Basculerduneffetlautre
CebasculementduntatlautreoudunefonctionlautreestunclassiquedejQueryetadjtaborddansle chapitreconsacrauxvnements. toggle() Permet de basculer ltat daffichage de llment slectionn. Si llment est affich, la fonction le fait disparatre (aveclafonctionhidden())etinversement(aveclafonctionshow()). $("p").toggle(); CettemthoderenvoieunobjetjQuery. toggle(fonction1,fonction2) Permetdebasculer(switch)entredeuxfonctionschaqueclicsurllmentslectionn.Lorsduclicinitial,lapremire fonctionestexcute.Lorsduclicsuivant,lasecondeestalorsexcute.Lorsdunautreclic,nouveaulapremire fonctionetainsidesuite. $("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); }); CettemthoderenvoieunobjetjQuery. Ceteffetdebasculementestaussiappliqulafonctiondeglissement(voirlasectionGlisserverticalementduprsent chapitre). slideToggle(vitesse,fonctionderappel) Cettefonctionfaitglisserverslebasunlmentquiestentat"Up"etfaitglisserverslehautunlmentquiesten tat"Down". Lanimationmodifieseulementlahauteur.DepuislaspcificationjQuery1.3,lesmargesverticales,externesetinternes sontgalementmodifiespourobteniruneffetplusfluide.
G

vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. $(div).slideToggle(fast);

fonctionderappel(callback)(optionnel):fonctionexcuterlafindeleffet. $(div).slideToggle(fast, function(){alert("Fin");});

CettemthoderenvoieunobjetjQuery.

1.Illustrationdubasculement
Unscriptsimplepourdcrirecettefonctiontoggle().

ENI Editions - All rigths reserved - Jonifar lina

- 1-

174

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css" media="screen"> #div_toggle { background-color: #9cf; width: 150px; height: 150px; border: 1px solid black;} p { cursor: pointer; margin-bottom: 25px;} </style> </head> <body> <p id="start"> Cliquer ici
- 2 ENI Editions - All rigths reserved - Jonifar lina

175

</p> <div id="div_toggle"></div> </body> </html> LescriptjQuery: <script type="text/javascript"> $(document).ready(function() { $("#start").click(function () { $("#div_toggle").toggle("slow"); }); }); </script> Dtailsduscript: $(document).ready(function() { $("#start").click(function () { Auclicsurleparagrapheidentifiparid="start". $("#div_toggle").toggle("slow"); Lafonctiondebasculement(toggle)estappliqueladivision. }); }); Findescript. Ledocumentfinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { $("#start").click(function () { $("#div_toggle").toggle("slow"); }); }); </script> <style type="text/css" media="screen"> #div_toggle { background-color:#9cf; width:150px; height:150px; border: 1px solid black;} p { cursor: pointer; margin-bottom: 25px;} </style> </head> <body> <p id="start"> Cliquer ici </p> <div id="div_toggle"></div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

176

2.Unmenuaccordon
Prsentonsunmenuverticalquisedrouleetsertracteauclicdelasouris. Limagearrow.gifdecemenuestdisponibledanslespacedetlchargement.

Lefichierdedpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- 4 ENI Editions - All rigths reserved - Jonifar lina

177

8859-1" /> <title>jQuery</title> <style type="text/css"> .accordeon { width: 250px; border-bottom: solid 1px black;} .accordeon h3 { margin: 0; background: #9cf url(arrow.gif) no-repeat right -51px; padding: 7px 15px; font: bold 0.9em Arial, sans-serif; border: solid 1px black; border-bottom: none; cursor: pointer;} .accordeon h3:hover { background-color: #ccecff;} .accordeon h3.active { background-position: right 5px;} .accordeon p { margin: 0; font: 0.9em Arial, sans-serif; padding: 10px 15px 10px; border-left: solid 1px black; border-right: solid 1px black;} </style> </head> <body> <br /> <div class="accordeon"> <h3>Formation Word</h3> <p>- Word 2000<br />- Word 2003<br />- Word 2007</p> <h3>Formation Excel</h3> <p>- Excel 2000<br />- Excel 2003<br />- Excel 2007</p> <h3>Formation PowerPoint</h3> <p>- PowerPoint 2000<br />- PowerPoint 2003<br />- PowerPoint 2007</p> <h3>Formation Outlook</h3> <p>- Outlook 2000<br />- Outlook 2003<br />- Outlook 2007</p> <h3>Formation Access</h3> <p>- Access 2000<br />- Access 2003<br />- Access 2007</p> </div> </body> </html> Ilfautremarquerlutilisationduneseuleimagepouraffichertanttlaflcheverslehautettanttlaflcheversle bas.Laflcheverslebasestobtenueavecunepositiondanslarrireplande51pixelstandisquelaflcheversle haut(laclasseactive)aunepositionde5pixels.

LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $(".accordeon p").hide(); $(".accordeon h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); }); </script> Dtaillonsceluici.

ENI Editions - All rigths reserved - Jonifar lina

- 5-

178

$(document).ready(function(){ $(".accordeon p").hide(); Auchargementdelapage(duDOMpourtreprcis),touslessousmenussontcachsparlamthodehide(). $(".accordeon h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); Auclicdelasourissurunlmentdumenu(.accordeon h3),lescriptappellellmentsuivant(soitunebalise<p>)et droule le paragraphe qui contient les sousmenus. Les lments frres de la balise <p> qui sont visibles soit les autressousmenus,sontglisssverslehautpourainsidisparatre. $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); Cesdeuxlignesdecodeveillentlaffichagedelapetiteflcheverslehautouverslebasdeslmentsdumenu.En suiteducliceffectuprcdemment,laflchepointeverslehautcommedfiniparlaclasseactive.Pourlesautres lmentsdemenu,laflchepointeraverslebasparlasuppressiondecetteclasseactive. }); }); Finduscript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".accordeon p").hide(); $(".accordeon h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); }); </script> <style type="text/css"> .accordeon { width: 250px; border-bottom: solid 1px black;} .accordeon h3 { margin: 0; background: #9cf url(arrow.gif) no-repeat right -51px; padding: 7px 15px; font: bold 0.9em Arial, sans-serif; border: solid 1px black; border-bottom: none; cursor: pointer;} .accordeon h3:hover { background-color: #ccecff;} .accordeon h3.active { background-position: right 5px;} .accordeon p { margin: 0; font: 0.9em Arial, sans-serif; padding: 10px 15px 10px; border-left: solid 1px black; border-right: solid 1px black;} </style> </head> <body> <br /> <div class="accordeon">
- 6 ENI Editions - All rigths reserved - Jonifar lina

179

<h3>Formation Word</h3> <p>- Word 2000<br />- Word 2003<br />- Word 2007</p> <h3>Formation Excel</h3> <p>- Excel 2000<br />- Excel 2003<br />- Excel 2007</p> <h3>Formation PowerPoint</h3> <p>- PowerPoint 2000<br />- PowerPoint 2003<br />- PowerPoint 2007</p> <h3>Formation Outlook</h3> <p>- Outlook 2000<br />- Outlook 2003<br />- Outlook 2007</p> <h3>Formation Access</h3> <p>- Access 2000<br />- Access 2003<br />- Access 2007</p> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 7-

180

Creruneanimation
Lafonctionanimate()permetdecreretdeparamtrervospropresanimationsaugrdevotrecrativit. animate(paramtres,vitesse,easing,fonctionderappel) Laspectcldecettefonctionestlobjetcomposdespropritsdestylesurlesquellesserabaselanimation.Chaque paramtre de lobjetreprsenteunepropritsurlaquelleporteralanimation (exemple: height, top ou opacity).La valeurassocielaclindiquecommentlapropritseraanime.Silavaleurestunnombre,lestyledelaproprit passeradesavaleuractuellelavaleurspcifie.Silavaleur hide, showou toogleestspcifie,uneanimationpar dfautseraconstruitepourcetteproprit. noter que ces proprits devront tre spcifies selon la notation JavaScript (CamelCase) soit par exemple marginLeftaulieudelanotationCSSsoitmargin-left.
G

paramtres:conteneursdattributsdestylequevoussouhaitezanimeretquellevaleur. vitesse(optionnel):chanedecaractresreprsentantunedestroisvitessesprdfinies( slow, normalou fast)oulenombreenmillisecondescorrespondantladuredeleffet. animate( {fontSize:"24px", left:300, width: "200px", opacity: 0.5} , 1000 ) ou $("p").animate({ height: toggle, opacity: toggle }, "slow");

easing(optionnel):nomdeleffetcustomisquevoussouhaitezutiliser(pluginrequis). fonctionderappel(optionnel):fonctionexcuterlafindelanimation.

CettemthoderenvoieunobjetjQuery.

1.Uneanimationsurunedivision

ENI Editions - All rigths reserved - Jonifar lina

- 1-

181

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> #box { position: relative; width: 110px; height: 25px; background-color: #9cf; margin: 20px 0px; padding-left: 20px; padding-right: 20px; padding-top: 5px; font: 0.75em Arial, sans-serif; border: 1px solid #0000c0;} </style> </head> <body> <input type="button" id="start" value="Lancer lanimation" /> <input type="button" id="reset" value="Reset" /> <div id="box">Editions Eni</div> </body> </html> LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $(#start).click(function(){ $(#box).animate({left:150, width: "200px", opacity: 0.5 }, 1500) .animate( { fontSize:"24px" } , 1000 ) .animate( { borderLeftWidth:"15px" }, 1000) .animate( { opacity: 1 }, 1000); $("#reset").click(function(){ $("#box").css({width:"",left:"",fontSize:"",opacity:"",borderWidth:""}); }); }); }); </script> Dtaillonscetteanimation. $(document).ready(function(){ $(#start).click(function(){

- 2-

ENI Editions - All rigths reserved - Jonifar lina

182

AuclicsurleboutonLancerlanimation. $(#box).animate({left: 150, width: "200px", opacity: 0.5 }, 1500) Laboteboxestdplaceversladroitede150pixels( left: 150),salargeurestporte200pixelsetsonopacit diminuedemoiti.Lanimationdure1500millisecondes. .animate( { fontSize:"24px" } , 1000 ) Puis,latailledelapolicedecaractresestagrandie. .animate( { borderLeftWidth:"15px" }, 1000) Ensuite,lpaisseurdelaborduregaucheestporte15pixels. .animate( { opacity: 1 }, 1000); Etpourterminer,lopacitestrtablielavaleur1. $("#reset").click(function(){ $("#box").css({width:"",left:"",fontSize:"",opacity:"",borderWidth:""}); LeclicsurleboutonResetremetlabotedanssapositioninitialeenannulanttouteslesmodificationsralisessurla largeur,laposition,lopacitainsiquelalargeurdelaborduregauche. }); }); }); Finduscript. Lapagefinaleestalors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(#start).click(function(){ $(#box).animate({left:150, width: "200px", opacity: 0.5 }, 1500) .animate( { fontSize:"24px" } , 1000 ) .animate( { borderLeftWidth:"15px" }, 1000) .animate( { opacity: 1 }, 1000); $("#reset").click(function(){ $("#box").css({width:"",left:"",fontSize:"",opacity:"",borderWidth:""}); }); }); }); </script> <style type="text/css"> #box { position: relative; width: 110px; height: 25px; background-color: #9cf; margin: 20px 0px;

ENI Editions - All rigths reserved - Jonifar lina

- 3-

183

padding-left: 20px; padding-right: 20px; padding-top: 5px; font: 0.75em Arial, sans-serif; border: 1px solid #0000c0;} </style> </head> <body> <input type="button" id="start" value="Lancer lanimation" /> <input type="button" id="reset" value="Reset" /> <div id="box">Editions Eni</div> </body> </html>

2.Uneanimationvolue

- 4-

ENI Editions - All rigths reserved - Jonifar lina

184

Lefichierhtmdedpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black; font-weight: bold; font: Arial 10px;} #box { position: relative; width: 50px; height: 50px; background: #9cf; border: 1px solid black;} </style> </head> <body> <p> <a class="go" href="#">Go</a></p> <div id="box"></div> </body> </html> LescriptjQuery <script type="text/javascript"> $(document).ready(function(){ $(".go").click(function(){ $("#box").animate({left: "+=270", opacity: "0.4"}, 1200) .animate({top: "+=120", opacity: "0.7", height: "20", width: "20"}, "slow") .animate({left: "0", opacity: "1", height: "50", width: "50"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown() return false; }); }); </script> Explicationduscript: $(document).ready(function(){ $(".go").click(function(){ Auclicsurlelien. $("#box").animate({left: "+=270", opacity: "0.4"}, 1200) Labote(box)sedplaceversladroitede270pixels(left: "+=270)etvoitsonopacitdiminuelavaleurde0.4. Cetteanimationaunedurede1200millisecondes. .animate({top: "+=120", opacity: "0.7", height: "20", width: "20"}, "slow") Elledescendalorsde120pixels,sonopacitpasse0.7,salargeurserduit20pixelsainsiquesahauteur. .animate({left: "0", opacity: "1", height: "50", width: "50"}, "slow") Elle revient sa position horizontale de dpart et retrouve son aspect initial (opacit 1, hauteur et largeur de 50 pixels).

ENI Editions - All rigths reserved - Jonifar lina

- 5-

185

.animate({top: "0"}, "fast") Laboterevientsapositionverticalededpart. .slideUp() .slideDown() return false; Uneanimationfinalefaitglisserlaboteverslehautpourdescendreaussitt. }); }); Findescript. LapageHtmlfinaleestainsi: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".go").click(function(){ $("#box").animate({left: "+=270", opacity: "0.4"}, 1200) .animate({top: "+=120", opacity: "0.7", height: "20", width: "20"}, "slow") .animate({left: "0", opacity: "1", height: "50", width: "50"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown() return false; }); }); </script> <style type="text/css"> a { color: black; font-weight: bold; font: Arial 10px;} #box { position: relative; width: 50px; height: 50px; background: #9cf; border: 1px solid black;} </style> </head> <body> <p> <a class="go" href="#">Go</a></p> <div id="box"></div> </body> </html>

3.Uneffetoriginalausurvoldelasouris
Ausurvoldelimage,celleciglisseversladroitepourlaisserapparatrelalgende.

- 6-

ENI Editions - All rigths reserved - Jonifar lina

186

Audpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css" media="screen"> ul.hover_bloc li { position: relative; width: 184px; height: 136px; padding: 16px; list-style-type: none; font: 1.4em Arial, sans-serif; text-align: justify; color: black; overflow: hidden; border : 1px solid black;} ul.hover_bloc li img { position: absolute; top: 8px; left: 8px; border: 0px;} </style> </head> <body> <ul class="hover_bloc"> <li> <img alt="" src="parc_eole.jpg" /> Parc olien off-shore le plus important de la mer du Nord au Danemark </li> </ul> </body> </html> LescriptjQuery:

ENI Editions - All rigths reserved - Jonifar lina

- 7-

187

<script type="text/javascript"> $(document).ready(function(){ $(ul.hover_bloc li).hover(function(){ $(this).find(img).animate({left:300px},{duration:500}); }, function(){ $(this).find(img).animate({left:8px},{duration:500}); }); }); </script> Dtaillonsceluici. $(document).ready(function(){ $(ul.hover_bloc li).hover(function(){ Ausurvolparlasourisdelazone. $(this).find(img).animate({left:300px},{duration:500}); Lescripttrouvelimage(find(img))etlafaitglisserversladroitede300pixels(left:300px).Lanimationdure 500millisecondes.

- 8-

ENI Editions - All rigths reserved - Jonifar lina

188

}, function(){ $(this).find(img).animate({left:8px},{duration:500}); Lorsquelecurseurquittelazone,limagerevientsapositioninitiale. }); }); Finduscript. Ilfautadmireraupassage,laconcisionducodeengendrparjQuery. Lapagefinaleestalors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(ul.hover_bloc li).hover(function(){ $(this).find(img).animate({left:300px},{duration:500}); }, function(){ $(this).find(img).animate({left:8px},{duration:500}); }); }); </script> <style type="text/css" media="screen"> ul.hover_bloc li { position: relative; width: 184px; height: 136px; padding: 16px; list-style-type: none; font: 1.4em Arial, sans-serif; text-align: justify; color: black; overflow: hidden; border : 1px solid black;} ul.hover_bloc li img { position: absolute; top: 8px; left: 8px; border: 0px;} </style> </head> <body> <ul class="hover_bloc"> <li> <img alt="" src="parc_eole.jpg" /> Parc olien off-shore le plus important de la mer du Nord au Danemark </li> </ul> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 9-

189

Introduction
Enpermettantauconcepteurdaccderchacundeslmentsdelapage,leDOMarelancleJavaScript.Maisilfaut bienadmettrequeletraagedeparentsenfantsetautresfrresnestpastoujourstrsaismettreenplace.En outre, une simple modification entrane souvent une rcriture complte du code. La librairie jQuery remdie grandementcesinconvnientsparsesnombreuxslecteurs(chapitreLesslecteursenjQuery)etpardesmthodes spcifiquespourtraverseretmanipulerleslmentsduDOM. Pourcechapitre,nousutiliseronsunepagetype.Cellecicomporteunelistenonordonneavec5itemsetuntableau duneligneet5colonnes. Ilfautremarqueraussilesdivisionsexempleetcontenucarellesinterviennentplusloindansnotretude. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body> <div id="exemple"> <h3>Exemple</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

190

- 2-

ENI Editions - All rigths reserved - Jonifar lina

191

Trouverlesenfants
children() Rcupreungroupedlmentscontenantlesenfantsimmdiatsdechacundeslmentsconcernsparlaslection. $("div").children() CettemthoderenvoieunobjetjQuery. Exemple Ajoutons une bordure aux enfants de la division <div class="contenu"> et un arrireplan aux enfants de la cellule 3 du tableau. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".contenu").children().addClass("bordure"); $("#select_table").children().addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body> <div id="exemple"> <h3>Exemple children()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

192

$(".contenu").children().addClass("bordure"); La mthode children() applique la division dont la classe est contenu a entour dune bordure les enfants immdiatsdecelleci,soitleparagraphe<p>Liste</p>etlalistenonordonne<ul> ... </ul>. $("#select_table").children().addClass("arriereplan"); Lamthode children()appliquelacelluledontlidentifiantest select_tableaajoutunarrireplandecouleuraux enfantsimmdiatsdecelleci,soitsoncontenu(lechiffre3). Commentaire IlestpossibledefiltrerleslmentsretournsparjQueryenutilisantuneexpressionoptionnelle.Lamthodechildren ()prendalorslaformede children(expression) qui permet de ne retenir que les lments enfants qui rpondent lexpressionintroduite. Exemple: Soitlextraitdecodesuivant: <ul> <li class="selected">Item de liste 1</li> <li>Item de liste 2</li> <li class="selected">Item de liste 3</li> <li>Item de liste 4</li> <li class="selected">Item de liste 5</li> </ul> Ilestpossibledeneretenirparmilesenfantsdellment<ul>queleslmentsdontlaclasseestselected. LecodejQueryestalors: $("ul").children(.selected);

- 2-

ENI Editions - All rigths reserved - Jonifar lina

193

jQuery
Le framework JavaScript du Web 2.0

LucVANLANCKER

Rsum
Ce livre sur jQuery sadresse des experts ou des candidats experts dans la cration de sites Web. La connaissance, sinon la matrise du JavaScript, des feuilles de style CSS, du DOM et de lAJAX sont des pr-requis indispensables la comprhension et la mise en pratique de cet ouvrage. Dans ce livre, lauteur a privilgi une approche structure et progressive. Chaque thme de jQuery est illustr par un exemple avant de passer une mise en pratique sur des applications plus pointues. Aprs une prsentation du framework, lauteur consacre un chapitre aux slecteurs, qui non seulement illustrent la diversit de jQuery pour atteindre aisment nimporte quel lment de la page mais qui sont aussi un concept essentiel dans lapprentissage de jQuery. Dans les chapitres suivants le lecteur dcouvre les lments dinteractivit apports par jQuery dabord par la manipulation des attributs (ajout, modification ou suppression la vole) puis par lapplication aux feuilles de style CSS. Suivent les vnements classiques du JavaScript mais surtout ceux apports par jQuery. Aprs la prsentation des effets visuels aussi nombreux quoriginaux, ltude du DOM et de lAJAX revisit par jQuery est longuement dtaille. Le chapitre final passe en revue quelques-uns des nombreux plug-ins dvelopps par la communaut jQuery qui permettent dapporter, en quelques lignes de code, des effets pour le moins spectaculaires. Sa lecture termine, le lecteur sera mme de dvelopper des applications web plus interactives, plus riches et plus innovantes, le tout avec une facilit dcriture du JavaScript insouponne. Les exemples du livre ainsi que les illustrations utilises, la librairie jQuery et les fichiers relatifs aux plugins tudis sont disponibles en tlchargement sur cette page. Les chapitres du livre : Dmarrer avec jQuery - Les slecteurs en jQuery - Manipuler les attributs - Manipulation des feuilles de style CSS - Les vnements - Les effets Traverser le DOM - Manipuler le DOM - Filtrer le DOM - AJAX - Quelques mthodes utilitaires - Les formulaires - Les plug-ins jQuery

L'auteur
Ds les dbuts d'Internet, Luc Van Lancker, enthousiasm par l'ide de communication universelle que vhiculait ce concept, s'est compltement investi dans ce domaine. C'est un formateur passionn, trs au fait des nouvelles technologies lies au web et grand pdagogue. Luc Van Lancker est auteur aux Editions ENI de livres sur HTML, XHTML, AJAX, des CSS au DHTML dans diffrentes collections.

Ce livre numrique a t conu et est diffus dans le respect des droits dauteur. Toutes les marques cites ont t dposes par leur diteur respectif. La loi du 11 Mars 1957 nautorisant aux termes des alinas 2 et 3 de larticle 41, dune part, que les copies ou reproductions strictement rserves lusage priv du copiste et non destines une utilisation collective, et, dautre part, que les analyses et les courtes citations dans un but dexemple et dillustration, toute reprsentation ou reproduction intgrale, ou partielle, faite sans le consentement de lauteur ou de ses ayants droit ou ayant cause, est illicite (alina 1er de larticle 40). Cette reprsentation ou reproduction, par quelque procd que ce soit, constituerait donc une contrefaon sanctionne par les articles 425 et suivants du Code Pnal. Copyright Editions ENI

ENI Editions - All rigths reserved - Jonifar lina

- 1-

194

Trouverlesparentsdirects
parent() Rcupreungroupedlmentscontenantlesparentsimmdiatsdechacundeslmentsconcernsparlaslection. $("span").parent() CettemthoderenvoieunobjetjQuery. Exemple Entouronsdunebordurelesparentsimmdiatsdutroisimelmentdelalisteetajoutonsunarrireplandecouleuraux parentsimmdiatsdelatroisimecelluledutableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").parent().addClass("bordure"); $("#select_table").parent().addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body>
ENI Editions - All rigths reserved - Jonifar lina - 1-

195

<div id="exemple"> <h3>Exemple parent()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#select_li").parent().addClass("bordure"); La mthode parent() applique au troisime item de la liste (id="select_li") a entour dune bordure les parents directsdeceluici,soitlabalises<ul>etuniquementcelleci. $("#select_table").parent().addClass("arriereplan"); Lamthode parent()appliquelatroisimecelluledutableau(select_table) a ajout un arrireplan aux parents directsdecelleci,soitlabalisedetableau<table>etuniquementcelleci. Commentaire Avec parent(expression),leslmentsretournspeuventtrefiltrsdesortequeseulsleslmentsquirpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

196

Trouvertouslesparents
parents() Rcupreungroupedlmentscontenanttouslesparentsdechacundeslmentsconcernsparlaslection. $("li").parents() CettemthoderenvoieunobjetjQuery. La mthode parents() renvoie tous les ascendants alors que children() ne prend en compte que les lmentsenfantsimmdiats.

Exemple Entouronsdunebordurelesparentsdutroisimelmentdelaliste.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").parents().addClass("bordure"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;}

ENI Editions - All rigths reserved - Jonifar lina

- 1-

197

.contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body> <div id="exemple"> <h3>Exemple parents()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> </table> </div> <br /> </div> </body> </html> $("#select_li").parents().addClass("bordure"); La mthode parents() applique au troisime item de la liste (id="select_li") a entour dune bordure tous les parentsdeceluici,soitlabalises<ul>,ladivisioncontenuetlabalise<body>. Commentaire Avec parents(expression),leslmentsretournspeuventtrefiltrsdesortequeseulsleslmentsquirpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

198

Trouverlesfrres
siblings() Retournelalistedesfrresimmdiatsdechaquelmentdelaslection. $("div").siblings() CettemthoderenvoieunobjetjQuery. Exemple Entouronsdune bordure les frres du troisime lment de la liste et ajoutons un arrireplan de couleur aux frres de la troisimecelluledutableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").siblings().addClass("bordure"); $("#select_table").siblings().addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body>
ENI Editions - All rigths reserved - Jonifar lina - 1-

199

<div id="exemple"> <h3>Exemple siblings()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#select_li").siblings().addClass("bordure"); La mthode siblings() applique au troisime item de la liste (id="select_li") a entour dune bordure les frres immdiatsdeceluici,soitlesautresbalises<li>. $("#select_table").siblings().addClass("arriereplan"); Lamthode siblings()appliquelatroisimecelluledutableau(select_table)aajoutunarrireplan aux frres immdiatsdecelleci,soitlesautresbalises<td>. Commentaire Avec siblings(expression),leslmentsretournspeuventtrefiltrsdesortequeseulsleslmentsquirpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

200

Trouverlefrreprcdent
prev() Retournelefrreimmdiatprcdentdechaquelmentdelaslection. $("td").prev() CettemthoderenvoieunobjetjQuery. Exemple Entouronsdune bordure le frre prcdent du troisime lment de la liste et ajoutons un arrireplandecouleuraufrre prcdentdelatroisimecelluledutableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").prev().addClass("bordure"); $("#select_table").prev().addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body>
ENI Editions - All rigths reserved - Jonifar lina - 1-

201

<div id="exemple"> <h3>Exemple prev()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#select_li").prev().addClass("bordure"); La mthode prev() applique au troisime item de la liste (id="select_li") a entour dune bordure le frre immdiatementprcdentdeceluici,soitlabalise<li>Item de liste 2</li>. $("#select_table").prev().addClass("arriereplan"); La mthode prev() applique la troisime cellule du tableau (select_table) a ajout un arrireplan au frre immdiatementprcdentdecelleci,soitlabalise<td>2</td>. Commentaire Avec prev(expression), les lments retourns peuvent tre filtrs de sorte que seuls les lments qui rpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

202

Trouverlesfrresprcdents
prevAll() Retournelesfrresimmdiatsprcdentsdechaquelmentdelaslection. $("td").prevAll() CettemthoderenvoieunobjetjQuery. Exemple Entouronsdune bordure le frre prcdent du troisime lment de la liste et ajoutons un arrireplandecouleuraufrre prcdentdelatroisimecelluledutableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").prevAll().addClass("bordure"); $("#select_table").prevAll().addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body>
ENI Editions - All rigths reserved - Jonifar lina - 1-

203

<div id="exemple"> <h3>Exemple prevAll()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#select_li").prevAll().addClass("bordure"); La mthode prevAll() applique au troisime item de la liste (id="select_li") a entour dune bordure les frres prcdentsdeceluici,soitlesbalises<li>Item de liste 1</li>et<li>Item de liste 2</li>. $("#select_table").prevAll().addClass("arriereplan"); Lamthode prevAll()appliquelatroisimecelluledutableau(select_table)aajoutdunarrireplan les frres prcdentsdecelleci,soitlesbalises<td>1</td>et<td>2</td>. Commentaire AvecprevAll(expression),leslmentsretournspeuventtrefiltrsdesortequeseulsleslmentsquirpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

204

Trouverlefrresuivant
next() Retournelefrreimmdiatsuivantdechaquelmentdelaslection. $("td").prev() CettemthoderenvoieunobjetjQuery. Exemple Entourons dune bordure le frre suivant du troisime lment de la liste et ajoutons un arrireplan de couleur au frre suivantdelatroisimecelluledutableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").next().addClass("bordure"); $("#select_table").next().addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body>
ENI Editions - All rigths reserved - Jonifar lina - 1-

205

<div id="exemple"> <h3>Exemple next()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#select_li").next().addClass("bordure"); La mthode next() applique au troisime item de la liste (id="select_li") a entour dune bordure le frre immdiatementsuivantdeceluici,soitlabalise<li>Item de liste 4</li>. $("#select_table").next().addClass("arriereplan"); La mthode next() applique la troisime cellule du tableau (select_table) a ajout un arrireplan au frre immdiatementsuivantdecelleci,soitlabalise<td>4</td>. Commentaire Avec next(expression), les lments retourns peuvent tre filtrs de sorte que seuls les lments qui rpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

206

Trouverlesfrressuivants
nextAll() Retournelesfrresimmdiatssuivantsdechaquelmentdelaslection. $("td").nextAll() CettemthoderenvoieunobjetjQuery. Exemple Entouronsdunebordurelesfrresimmdiatementsuivantsdutroisimelmentdelalisteetajoutonsunarrireplande couleurauxfrresimmdiatementsuivantsdelatroisimecelluledutableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").nextAll().addClass("bordure"); $("#select_table").nextAll().addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body>
ENI Editions - All rigths reserved - Jonifar lina - 1-

207

<div id="exemple"> <h3>Exemple nextAll()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#select_li").nextAll().addClass("bordure"); La mthode nextAll() applique au troisime item de la liste (id="select_li") a entour dune bordure, les frres suivantsdeceluici,soitlesbalises<li>Item de liste 4</li>et<li>Item de liste 5</li>. $("#select_table").nextAll().addClass("arriereplan"); La mthode nextAll() applique la troisime cellule du tableau (select_table) a ajout un arrireplan aux frres suivantsdecelleci,soitlesbalises<td>4</td>et<td>5</td>. Commentaire AvecnextAll(expression),leslmentsretournspeuventtrefiltrsdesortequeseulsleslmentsquirpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

208

Trouverlecontenu
contents() Trouvetouslesn udsenfantssitusdansleslmentsdelaslection(incluantlesn udstexte). Sillmentspcifiestunebalise<iframe>,contents()trouvelecontenududocument. $("p").contents() CettemthoderenvoieunobjetjQuery. Exemple Entouronsdunebordure,lecontenudutroisimelmentdelalisteetajoutonsunarrireplandecouleuraucontenudela troisimecelluledutableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").contents().addClass("bordure"); $("#select_table").contents().addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

209

</head> <body> <div id="exemple"> <h3>Exemple contents()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#select_li").contents().addClass("bordure"); Lamthodecontents()appliqueautroisimeitemdelaliste(id="select_li")aentourdunebordure,len udtexte enfantdeceluici,soitlesmots"Item de liste 3". $("#select_table").contents().addClass("arriereplan"); La mthode contents() applique la troisime cellule du tableau (select_table) a ajout un arrireplan au n ud texteenfant,soitlechiffre3. Commentaire Avec contents(expression),leslmentsretournspeuventtrefiltrsdesortequeseulsleslmentsquirpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

210

Trouvercertainsparents
closest(slecteur) Retourne lensemble dlments contenant le parent le plus proche de llment slectionn rpondant au slecteur, llmentdedpartinclus. Lamthodeclosest()vrifiedabordsillmentcourantrpondlexpressionspcifie.Danslaffirmative,ilretourne simplementllmentspcifi.Sinon,ilcontinuealorsdetraverserledocumentverslehaut,parentparparent,jusqu ce quil trouve un lment rpondant la condition de lexpression. Si aucun lment nest trouv, la mthode ne retournerien. $("div").closest("p") CettemthoderenvoieunobjetjQuery. Exemple Retrouvonslesparentsdutroisimelmentdelalistejusquladivisiondontlaclasseestcontenuetajoutonsunarrire plandecouleur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#select_li").closest(".contenu").addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;}
ENI Editions - All rigths reserved - Jonifar lina - 1-

211

.arriereplan { background-color: #9cf;} </style> </head> <body> <div id="exemple"> <h3>Exemple closest()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#select_li").closest(".contenu").addClass("arriereplan"); Aveclamthodeclosest(),nousallonsremonterleDOMjusquladivisiondontlaclasseestcontenu. Dautresmanipulationssontpossibles: $("#select_li").closest("#exemple").addClass("arriereplan"); ou $("#select_li").closest("ul").addClass("arriereplan"); Commentaire Avecclosest(expression),leslmentsretournspeuventtrefiltrsdesortequeseulsleslmentsquirpondent lexpressionsoientretenus.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

212

Trouvercertainsdescendants
find(expressionouslecteur) Rechercheleslmentsdescendantsrpondantauxconditionsduslecteurspcifi. $("div").find("p") CettemthoderenvoieunobjetjQuery.

Cettemthodefind()necherchepasllmentspcifimaisbienlesdescendantsdeceluici.

Exemple Trouvezlabalisenonordonne<ul>quiestundescendantdeladivisionidentifieparexemple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#exemple").find("ul").addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;} .contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

213

</head> <body> <div id="exemple"> <h3>Exemple find()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li id="select_li"><i>Item de liste 3</i></li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> $("#exemple").find("ul").addClass("arriereplan"); Enpartantdeladivisionid="exemple",trouvezparmilesdescendants,unelistenonordonne( <ul>).Celleciestalors dotedunarrireplandecouleur. Dautresmanipulationssontpossibles: $("#exemple").find("p").addClass("arriereplan"); ou $("ul").find("#select_li").addClass("arriereplan");

- 2-

ENI Editions - All rigths reserved - Jonifar lina

214

Ajouterdeslmentslaslection
add(slecteuroulment(s)ouHtml) Ajoutedeslments,fournisenargument,lensembledeslmentsslectionnsdanslarecherche. Lesparamtrespeuventtre:
G

unslecteurjQuery:$("p").add("span") unoudeslments:$("p").add(document.getElementById("a")) ducodeHtml:$("p").add("<span>Again</span>").

CettemthoderenvoieunobjetjQuery. Exemple Aprs avoir retenu les lments de la liste, ajoutons la slection, la cellule du tableau identifie par lidentifiant select_table.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul").children().add("#select_table").addClass("arriereplan"); }); </script> <style type="text/css"> table { border: 1px solid black; border-collapse:collapse;} td { border: 1px solid black; text-align: center;}

ENI Editions - All rigths reserved - Jonifar lina

- 1-

215

.contenu { width: 210px;} .bordure { border: 1px solid black;} .arriereplan { background-color: #9cf;} </style> </head> <body> <div id="exemple"> <h3>Exemple add()</h3> <div class="contenu"> <p>Liste</p> <ul> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> <table width="210"> <tr> <td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td> </tr> </table> </div> </div> </body> </html> LescriptjQuery: $(document).ready(function(){ $("ul").children().add("#select_table").addClass("arriereplan"); }); Par $("ul").children(), les lments de la liste sont slectionns. Le code y ajoute la cellule du tableau avec add ("#select_table").Tousceslmentssontmisenvaleurparunarrireplandecouleur(addClass("arriereplan")).

- 2-

ENI Editions - All rigths reserved - Jonifar lina

216

Uneloupepouragrandirlesvignettes
Faisonsapparatreaupassageducurseursurunevignette,uneloupepoursuggrerauvisiteurdagrandircelleci. Lesdiffrentesimagessontdisponiblesdanslespacedetlchargementrservcetouvrage. Lefichierdedpartest: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> #galerie { width: 100%; overflow: hidden;} #galerie a { position:relative; float:left; margin:5px;} #galerie a span { background-image:url(loupe.png); background-repeat:no-repeat; width:30px; height:30px; display:none; position:absolute; left:15px; top:15px;} #galerie img { border: solid 1px black; padding:5px;} </style> </head> <body> <div id="galerie"> <a href="tornade.jpg"> <img src="tornade_min.jpg" alt="" /> </a> <a href="tornade1.jpg"> <img src="tornade1_min.jpg" alt="" /> </a> </div> </body> </html>

LescriptjQueryfaitapparatreuneloupe,avecuneffetdaffichageprogressif,ausurvoldelavignette.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

217

Lastuce consiste ajouter par jQuery, une balise <span>quicontientlaloupeetdelafaireapparatreausurvoldu curseurdelasouris. <script type="text/javascript"> $(document).ready(function(){ $("#galerie a").append("<span></span>"); $("#galerie a").hover(function(){ $(this).children("span").fadeIn(600); }, function(){ $(this).children("span").fadeOut(200); }); }); </script> Soit, $(document).ready(function(){ DmarragedejQuery. $("#galerie a").append("<span></span>"); Unebalise<span>estajouteparlamthodeappend()labalise<a>deladivisiongalerie. $("#galerie a").hover(function(){ $(this).children("span").fadeIn(600); }, Au survol (hover) du lien <a>, le script slectionne parmi les enfants de celuici ceux qui sont une balise <span> (children("span"))etonyappliqueuneffetdapparitionprogressive(fadeIn(600)). function(){ $(this).children("span").fadeOut(200); }); Lorsquelecurseurquittelelien,cettebalise<span>disparat. }); FinduscriptjQuery. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"

- 2-

ENI Editions - All rigths reserved - Jonifar lina

218

lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#galerie a").append("<span></span>"); $("#galerie a").hover(function(){ $(this).children("span").fadeIn(600); }, function(){ $(this).children("span").fadeOut(200); }); }); </script> <style type="text/css"> #galerie { width: 100%; overflow: hidden;} #galerie a { position:relative; float:left; margin:5px;} #galerie a span { background-image:url(loupe.png); background-repeat:no-repeat; width:30px; height:30px; display:none; position:absolute; left:15px; top:15px;} #galerie img { border: solid 1px black; padding:5px;} </style> </head> <body> <div id="galerie"> <a href="tornade.jpg"> <img src="tornade_min.jpg" alt="" /> </a> <a href="tornade1.jpg"> <img src="tornade1_min.jpg" alt="" /> </a> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

219

Introduction
LintgrationduDOMaprofondmentmodifilcritureduJavaScriptparsontraagedeslments.Maissavritable rvolutionest,sansconteste,lapossibilitdemodifieretdajouterlavoledeslmentsdanslapageHtml.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

220

Modifierlecontenu
text() Rcuprelecontenutextedellmentconcern. CettemthodefonctionnepourlesdocumentsHtml,XhtmletXML. $("div").text():rcupreauformattextelecontenudelabalise<div>. Cettemthoderenvoieunechanedecaractres(String). text(valeur) Assigneunnouveaucontenutexte(voirlargumentvaleur)auxlmentsconcerns. $("div").text("les nouveaux lments de texte") : insre au format texte, le contenu "les nouveaux lments de texte"danslabalise<div>. CettemthoderenvoieunobjetjQuery. html() RcupreauformatHtml,lecontenudellmentconcern. CettemthodenefonctionnepaspourlesdocumentsXML(lexceptiondesdocumentsXhtml). $("div").html():rcupreauformatHtml,lecontenudelabalise<div>. Cettemthoderenvoieunechanedecaractres(String). LesbalisessontretournesenmajusculessousInternetExplorer8etenminusculessousFirefox3etSafari4. html(valeur) AssigneunnouveaucontenuHtml(voirlargumentvaleur)auxlmentsconcerns. CettepropritnestpasdisponiblepourlesdocumentsXMLmaisellelestbienpourlesdocumentsXhtml. $("div").html("<b>nouveau contenu</b>") : insre comme du Html, les lments fournis en argument dans la balise <div>. CettemthoderenvoieunobjetjQuery. Aveclesmthodestext(valeur)ethtml(valeur),lenouveaucontenucraselecontenuprcdent.

Les mthodes html() de JQuery utilisent la proprit JavaScript innerHTML. Pour rappel, cette proprit, loriginepropritaireInternetExplorer,adepuistadopteparlesautresnavigateursmaissoninterprtation poseparfoisdesproblmesdecompatibilit.

Exemple Soitunlmentbote.Auclicsurlebouton,unnouveaucontenuestinjectdansceluici.Cetteoprationralise,lenouveau contenuestaffichparlamthodetext().

ENI Editions - All rigths reserved - Jonifar lina

- 1-

221

Remarquezquelecontenuprcdentestdtruit. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> #box { border: 1px solid black; width: 200px; height: 70px; margin-top: 15px; padding: 5px;} p { background-color: #9cf; margin: 5px; padding: 5px;} </style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="box">Exemple</div><br /> Rsultat : <div id="resultat"></div>
- 2 ENI Editions - All rigths reserved - Jonifar lina

222

</body> </html> LescriptJQuery: <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("#box").html("<p><b>jQuery</b></p>") }); }); //]]> </script> Lesexplications: $(document).ready(function(){ ChargementduDOM. $("#bouton").click(function(){ $("#box").html("<p><b>jQuery</b></p>") Auclicsurlebouton,<p><b>jQuery</b></p>estinsrdanslaboteboxcommeduHtml. var contenu = $("#box").text(); $("#resultat").text(contenu); Le nouveau contenu de la bote box est rcupr par la mthode text() dans la variable contenu. Celuici est alors affichdanslaboteresultat. }); }); Findescript. Lefichierfinaldevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("#box").html("<p><b>jQuery</b></p>"); var contenu = $("#box").text(); $("#resultat").text(contenu); }); }); //]]> </script> <style type="text/css"> #box { border: 1px solid black; width: 200px; height: 70px; margin-top: 15px; padding: 5px;} p { background-color: #9cf; margin: 5px; padding: 5px;}

ENI Editions - All rigths reserved - Jonifar lina

- 3-

223

</style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="box">Exemple</div><br /> Rsultat : <div id="resultat"></div> </body> </html>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

224

Insrerlintrieur
1.Premiremthode
append(contenu) Ajouteducontenulafinmaislintrieurdellmentspcifi. Lecontenupeuttreunechanedecaractres,duHtmlouunobjetjQuery. $("p").append("<b>Hello</b>"):insrelafinduparagraphe,leslmentsfournisenarguments. CettemthoderenvoieunobjetjQuery. LesexpertsduJavaScriptetdelcritureduDOMaurontreconnulamthodeappendChild(). prepend(contenu) Ajouteducontenuaudbutmaislintrieurdellmentspcifi. Lecontenupeuttreunechanedecaractres,duHtmlouunobjetjQuery. $("p").prepend("<b>Hello</b>"):insreaudbutduparagraphe,leslmentsfournisenarguments. CettemthoderenvoieunobjetjQuery. Exemple Ajoutonsducontenuaudbutetlafindansllmentbotedupointprcdent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> #box { border: 1px solid black; width: 200px; height: 80px; margin-top: 15px; padding: 5px;} p { background-color: #9cf; margin: 5px; padding: 5px;}

ENI Editions - All rigths reserved - Jonifar lina

- 1-

225

</style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="box"> <p>JQuery</p> </div> </body> </html> PassonsauscriptjQuery:

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("#box").prepend("<div><b>Au dbut</b></div>"); $("#box").append("<div><b>A la suite</b></div>"); }); }); //]]> </script> Explications: $(document).ready(function(){ $("#bouton").click(function(){ AprslechargementduDOMetauclicsurlebouton. $("#box").prepend("<div><b>Au dbut</b></div>"); Lescriptajouteaveclamthodeprepend(),lecontenureprisenargumentaudbutdellmentbotebox. $("#box").append("<div><b>A la suite</b></div>"); Lescriptajouteaveclamthodeappend()ducontenureprisenargument,lafindellmentbotebox. }); }); Findescript. Ilfautconstaterqueselonlescapturesdcran,leslmentsinsrslesontbienlintrieurdellmentbote. CeciestconfirmparexempleenutilisantlextensionDOMInspectordeFirefoxquipermetdevisualiserlarbreDOM deslments.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

226

Lefichiercompletdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("#box").prepend("<div><b>Au dbut</b></div>"); $("#box").append("<div><b>A la suite</b></div>"); }); }); //]]> </script> <style type="text/css"> #box { border: 1px solid black; width: 200px; height: 80px; margin-top: 15px; padding: 5px;} p { background-color: #9cf; margin: 5px; padding: 5px;} </style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="box"> <p>JQuery</p> </div> </body> </html>

2.Secondemthode
LesmthodesappendTo()etprependTo()effectuentlesmmestchesqueappend()etprepend().Laseulediffrence provientduplacementdanslecode,ducontenuetdelacible.Avecappend()ouprepend(),leslecteurprcdantla mthodeestleconteneurdanslequelestinsrlecontenu.Avec appendTo()ouprependTo(),lecontenuprcdela mthodeetestalorsinsrdanslaconteneurcible.Lexemplequisuitillustrerautilementtoutceci. appendTo() AjoutedeslmentsspcifisparleslecteurAlafindautresspcifisparBselonlexpression$(A).appendTo(B). $("p").appendTo("#box"):ajoutelecontenudeslments <p>,ladivisionportantlidentifiant "box"etlafinde celleci. CettemthoderenvoieunobjetjQuery. prependTo() Ajoutedeslmentsspcifisparleslecteur Aaudbutdautres spcifis par B selon lexpression $(A).appendTo

ENI Editions - All rigths reserved - Jonifar lina

- 3-

227

(B). $("p").prependTo("#box"):ajoutelecontenudeslments <p>,ladivisionportantlidentifiant "box"etaudbut decelleci. CettemthoderenvoieunobjetjQuery. Exemple ReprenonslesmmesoprationsdelasectionInsrerlintrieur Premiremthode. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> input { margin-bottom: 10px;} #box { border: 1px solid black; width: 200px; height: 80px; margin-top: 10px; padding: 5px;} p { background-color: #9cf; margin: 5px; padding: 5px;} </style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="debut">Dbut</div> <div id="fin">Fin</div> <div id="box"> <p>JQuery</p> </div> </body> </html>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

228

Lescriptdevient: <script type="text/javascript"> $(document).ready(function(){ $("#bouton").click(function(){ $("#debut").prependTo("#box"); $("#fin").appendTo("#box"); }); }); </script> Dtaillonsceluici. $(document).ready(function(){ $("#bouton").click(function(){ AuchargementduDOMetauclicdubouton. $("#debut").prependTo("#box"); Ajoute les lments spcifis par le slecteur #debut au dbut des lments spcifis par le slecteur #box. Soit exprimautrement,ajouteladivision<div id="debut">Dbut</div>audbutdeslmentsdellmentbotebox. $("#fin").appendTo("#box"); Ajouteleslmentsspcifisparleslecteur#finlafindeslmentsspcifispar#box.Soitajouteladivision<div id="debut">Fin</div>lafindeslmentsdellmentbotebox. }); }); Findescript. LeHtmlcomplet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bouton").click(function(){ $("#debut").prependTo("#box");

ENI Editions - All rigths reserved - Jonifar lina

- 5-

229

$("#fin").appendTo("#box"); }); }); </script> <style type="text/css"> input { margin-bottom: 10px;} #box { border: 1px solid black; width: 200px; height: 80px; margin-top: 10px; padding: 5px;} p { background-color: #9cf; margin: 5px; padding: 5px;} </style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="debut">Dbut</div> <div id="fin">Fin</div> <div id="box"> <p>JQuery</p> </div> </body> </html>

- 6-

ENI Editions - All rigths reserved - Jonifar lina

230

Insrerlextrieur
after(contenu) Ajouteducontenuspcifienargumentaprsllmentdelaslection. Lecontenupeuttreunechanedecaractres,duHtmlouunobjetjQuery. $("p").after("<b>Hello</b>"):ajouteaprslabalisedeparagraphe,lecontenufournienargument. CettemthoderenvoieunobjetjQuery. before(contenu) Ajouteducontenuspcifienargumentavantchaquelmentdelaslection. Lecontenupeuttreunechanedecaractres,duHtmlouunobjetjQuery. $("p").before("<b>Hello</b>"):ajouteavantlabalisedeparagraphe,lecontenufournienargument. CettemthoderenvoieunobjetjQuery. LesexpertsduJavaScriptclassiqueetdelanotationduDOMaurontreconnulamthodeinsertBefore(). Exemple Ajoutonsducontenuavantetaprsllmentbotedupointprcdent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> input{margin-bottom: 10px;} div {border: 1px solid black;width: 200px;padding: 5px;} #box { border: 1px solid black; width: 200px; height: 40px; margin-top: 10px; margin-bottom: 10px; padding: 5px;} p { background-color: #9cf; margin: 5px; padding: 5px;} </style> </head> <body> <input id="bouton" type="button" value="Go" />

ENI Editions - All rigths reserved - Jonifar lina

- 1-

231

<div id="box"> <p>JQuery</p> </div> </body> </html> LescriptjQuery:

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("#box").before("<div><b>Avant</b></div>"); $("#box").after("<div><b>Aprs</b></div>"); }); }); //]]> </script>

$(document).ready(function(){ $("#bouton").click(function(){ AprslechargementduDOMetauclicsurlebouton. $("#box").before("<div><b>Avant</b></div>"); Lescriptajouteaveclamthodebefore(),unenouvelledivisionavantllmentbotebox. $("#box").after("<div><b>Aprs</b></div>"); Lescriptajouteaveclamthodeafter(),unenouvelledivisionaprsllmentbotebox. }); }); Findescript. Ilfautconstaterqueselonlescapturesdcran,leslmentsinsrslesontbienlextrieurdellmentboteinitial (box). Lefichiercompletdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

- 2-

ENI Editions - All rigths reserved - Jonifar lina

232

<head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("#box").before("<div><b>Avant</b></div>"); $("#box").after("<div><b>Aprs</b></div>"); }); }); //]]> </script> <style type="text/css"> input{margin-bottom: 10px;} div {border: 1px solid black;width: 200px;padding: 5px;} #box { border: 1px solid black; width: 200px; height: 40px; margin-top: 10px; margin-bottom: 10px; padding: 5px;} p { background-color: #9cf; margin: 5px; padding: 5px;} </style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="box"> <p>JQuery</p> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

233

Entourerunlment
wrap(htmloulment) Entoure chaque lment slectionn avec llment fourni en argument. Cette procdure est trs utile pour injecter unestructuredecodeadditionnelledansundocumentsansmodifierlasmantiqueoriginelledudocument. $("p").wrap("<div class=wrap></div>"); CettemthoderenvoieunobjetjQuery. wrapAll(htmloulment) Entoure tous les lments de la slection par un seul lment. Diffrent de la fonction wrap() qui entoure chaque lmentdelaslectionparunnouvellment(voirexemplesciaprs). $("p").wrapAll("<div></div>"); CettemthoderenvoieunobjetjQuery. wrapInner(htmloulment) Entourelesenfantsdunlment(lesn udstextesinclus)parunautrelment. $("p").wrapInner("<b></b>"); CettemthoderenvoieunobjetjQuery. Exemple Appliquonscesmthodesunexemplesimilaireauxprcdents.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> input{margin-bottom: 10px;} .wrap { border: 2px dashed black; margin: 3px; background-color: #9cf; } #box { width: 200px;

ENI Editions - All rigths reserved - Jonifar lina

- 1-

234

background-color: white; border: 1px solid black;} p { padding-left: 3px;} </style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="box"> <p>JQuery</p> <p>JQuery</p> <p>JQuery</p> </div> </body> </html> LescriptjQueryavecwrap(): <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("p").wrap("<div class=wrap></div>"); }); }); //]]> </script>

$(document).ready(function(){ $("#bouton").click(function(){ AuchargementduDOMetauclicsurlebouton. $("p").wrap("<div></div>"); Lamthodewrap()entourechaqueoccurrencedeparagraphe<p>avecladivisionqualifieparlaclasse wrapsoitavec unarrireplandecouleuretunebordureenpointills.

ParcontreaveclamthodewrapAll(),lescriptdevient: <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){

- 2-

ENI Editions - All rigths reserved - Jonifar lina

235

$("p").wrapAll("<div class=wrap></div>"); }); }); //]]> </script> Lamthode wrapAll()entouretouteslesoccurrencesdeparagraphe <p>avecladivisionqualifieparlaclasse wrap soitavecunarrireplandecouleuretunebordureenpointills.

EnfinaveclamthodewrapInner(),lescriptserait: <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("p").wrapInner("<div class=wrap></div>"); }); }); //]]> </script> LamthodewrapInner()entouretouslesenfantsdesparagraphes<p>(soiticilen udtexte)avecladivisionqualifie parlaclassewrapsoitavecunarrireplandecouleuretunebordureenpointills.

Lefichiercompletavecwrap()est:

ENI Editions - All rigths reserved - Jonifar lina

- 3-

236

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ $("p").wrap("<div class=wrap></div>"); }); }); //]]> </script> <style type="text/css"> input{margin-bottom: 10px;} .wrap { border: 2px dashed black; margin: 3px; background-color: #9cf; } #box { width: 200px; background-color: white; border: 1px solid black;} p { padding-left: 3px;} </style> </head> <body> <input id="bouton" type="button" value="Go" /> <div id="box"> <p>JQuery</p> <p>JQuery</p> <p>JQuery</p> </div> </body> </html>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

237

Remplacerunlment
replaceWith() Remplace llment courant par le contenu spcifi, sous forme de code Html ou dobjet DOM. La fonction retourne llmentJQueryquivientdtreremplacetsupprimduDOM. $("#div1").replaceWith("<div>Nouvelle division</div>"); CettemthoderenvoieunobjetjQuery. Commentaires Lamthodehtml()remplacelecontenudellmenttandisquereplaceWith()remplacellmentluimme. Exemple Modifions un bouton de soumission de formulaire aprs un clic sur celuici. Les images de lexemple sont disponibles dans lespacedetlchargementrservcetouvrage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> button { cursor: pointer;} img { float: left; width: 30px; height: 30px;} span { float: left;
ENI Editions - All rigths reserved - Jonifar lina - 1-

238

margin-top: 7px; font: 1.2em arial,sans-serif} p { margin-left: 35px;} </style> </head> <body> mail : <input type="text" size="30" /><br /> <p><button id="yes"><img src="yes.gif" alt="" /> <span>Soumettre</span> </button></p> </body> </html> LescriptjQuery: <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("button").click(function(){ $("img").replaceWith("<img src=no.gif alt= />"); $("span").css("text-decoration","line-through"); }); }); //]]> </script> Dtailsduscript: $(document).ready(function(){ $("button").click(function(){ AuchargementduDOMetauclicdubouton. $("img").replaceWith("<img src=no.gif alt= />"); RemplacelimageinitialeparcellefournieenargumentdelamthodereplaceWith(). $("span").css("text-decoration","line-through"); Modifielestyledelabalise<span>enbarrantletexte. }); }); Findescript. Ledocumentcompletseprsenteainsi: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("button").click(function(){ $("img").replaceWith("<img src=no.gif alt= />"); $("span").css("text-decoration","line-through"); }); }); //]]> </script> <style type="text/css"> button { cursor: pointer;} img { float: left;
- 2 ENI Editions - All rigths reserved - Jonifar lina

239

width: 30px; height: 30px;} span { float: left; margin-top: 7px; font: 1.2em arial,sans-serif} p { margin-left: 35px;} </style> </head> <body> mail : <input type="text" size="30" /><br /> <p><button id="yes"><img src="yes.gif" alt="" /> <span>Soumettre</span> </button></p> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

240

Enleverunlment
1.Supprimerunlment
remove() Supprime de larbre du DOM, tous les lments rpondant aux critres de slection. Cependant cette mthode ne supprimepasleslmentsdelobjetjQuery,cequipermetuneutilisationultrieuredeceslmentsmmesiceuxci nefigurentplusdansledocument. $("p").remove():supprimeleparagraphe. CettemthoderenvoieunobjetjQuery. Exemple Prenonsunboutondetypecasecocher(checkbox).Lorsqueceluiciestslectionn,unformulairedelignedetexteest affich.Lorsqueceluiciestdslectionn,lalignedetextedisparat. AffichonslexempledansOpera.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> #plus { border: 1px solid black; background-color: #9cf; margin-left: 15px;} </style> </head>
ENI Editions - All rigths reserved - Jonifar lina - 1-

241

<body> <p id="mail"><input id="clic" type="checkbox" /> Adresse mail</p> </body> </html> LescriptjQuery. <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#clic").click(function(){ if ($(this).is(":checked")){ $("#mail").append("<input id=plus type=text />"); } else { $("#plus").remove(); } }); }); //]]> </script> Dtaillonsleslmentsduscript. $(document).ready(function(){ $("#clic").click(function(){ AuchargementduDOMetlaslectiondelacasecocher. if ($(this).is(":checked")){ Silacaseestcoche. $("#mail").append("<input id=plus type=text />"); } Lalignedetexteestajoutedansleparagraphe. else { Silacaseestdcoche. $("#plus").remove(); Lalignedetexteestenleve. }); }); Finduscript. Commentaire: Lemmeeffetpeuttreobtenuaveclesmthodesshow()ethide()(voirlechapitreLeseffetsAfficheretcacher) <script type="text/javascript"> $(document).ready(function(){ $("#plus").css("display","none"); $("#clic").click(function(){ if ($(this).is(":checked")){ $("#plus").show("fast"); } else { $("#plus").hide("fast"); } }); }); </script>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

242

Lefichiercomplet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#clic").click(function(){ if ($(this).is(":checked")){ $("#mail").append("<input id=plus type=text />"); } else { $("#plus").remove(); } }); }); //]]> </script> <style type="text/css"> #plus { border: 1px solid black; background-color: #9cf; margin-left: 15px;} </style> </head> <body> <p id="mail"><input id="clic" type="checkbox" /> Adresse mail</p> </body> </html>

2.Viderunlment
empty() Supprimetouslesn udsenfantsdellmentslectionn. $("p").empty():supprimelecontenuduparagraphe. CettemthoderenvoieunobjetjQuery. Exemple Illustronsparunexemple,ladiffrenceentrelesmthodesempty()etremove().

ENI Editions - All rigths reserved - Jonifar lina

- 3-

243

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> #bouton1 { margin-left: 25px; display: block; float: left;} #bouton2 { margin-left: 206px; display: block;} #div1 { border: 1px solid black; margin-top: 15px; width: 100px; height: 80px; text-align: center; float: left;} #div2 { border: 1px solid black; margin-top: 15px; margin-left: 15px; width: 100px; height: 80px; text-align: center; float: left;} </style> </head> <body> <div><button id="bouton1">Vider</button> <button id="bouton2">Supprimer</button></div> <div id="div1"> Texte<br />Texte<br />Texte<br />Texte </div> <div id="div2"> Texte<br />Texte<br />Texte<br />Texte </div> </body> </html> PassonsauscriptjQuery.

- 4-

ENI Editions - All rigths reserved - Jonifar lina

244

Auclicsurlebouton Vider,parlamthodeempty(),lecontenu(soitlesn udsenfants)estsupprimmaisladivision, illustreparlabordure,esttoujoursenplace. AuclicsurleboutonSupprimer,parlamthoderemove(),cesttouteladivisionquidisparat. LescriptjQuerydevient: <script type="text/javascript"> $(document).ready(function(){ $("#bouton1").click(function () { $("#div1").empty(); }); $("#bouton2").click(function () { $("#div2").remove(); }); }); </script> Dtaillonsceluici. $(document).ready(function(){ ChargementduDOM. $("#bouton1").click(function () { $("#div1").empty(); }); Auclicdubouton1,lecontenudeladivision1estvid. $("#bouton2").click(function () {

ENI Editions - All rigths reserved - Jonifar lina

- 5-

245

$("#div2").remove(); }); Auclicdubouton2,ladivision2estsupprime. }); Finduready. LefichierHtmlcompletdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bouton1").click(function () { $("#div1").empty(); }); $("#bouton2").click(function () { $("#div2").remove(); }); }); </script> <style type="text/css"> #bouton1 { margin-left: 25px; display: block; float: left;} #bouton2 { margin-left: 206px; display: block;} #div1 { border: 1px solid black; margin-top: 15px; width: 100px; height: 80px; text-align: center; float: left;} #div2 { border: 1px solid black; width: 100px; height: 80px; margin-top: 15px; margin-left: 15px; text-align: center; float: left;} </style> </head> <body> <div><button id="bouton1">Vider</button> <button id="bouton2">Supprimer</button></div> <div id="div1"> Texte<br />Texte<br />Texte<br />Texte </div> <div id="div2"> Texte<br />Texte<br />Texte<br />Texte </div> </body> </html>

- 6-

ENI Editions - All rigths reserved - Jonifar lina

246

Copierunlment
clone() Copie(clone)leslmentsDOMtrouvsetlesslectionne.Cettefonctionestutilepourcrerdescopiesdlmentset lesdplacerversunautreendroitspcifiduDOM. $("p").clone():copieleparagraphe. Paramtres(optionnel):indiqueztruesivoussouhaitezclonerlesgestionnairesdvnementsassocislaslection. CettemthoderenvoieunobjetjQuery. Exemple Clononsunedivisionetsoncontenu(<div id="div1">pourlesdplacerunautreendroitdelapage(<div id="div2">).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> button {margin-bottom : 15px;} #div1 { border: 1px solid black; width: 110px; font: 0.9em arial, sans-serif; float: left; text-align: center;} #div2 { margin-left: 20px; float: left;} </style> </head> <body> <button id="bouton">Cloner</button><br /> <div id="div1"> Le recyclage<br /> <img src="recyclage.gif" alt="" /><br /> Pour la plante </div> <div id="div2"></div> </body> </html> Lersultat:

ENI Editions - All rigths reserved - Jonifar lina

- 1-

247

LecodejQuery: <script type="text/javascript"> $(document).ready(function(){ $("#div2").hide(); $("button").click(function () { $("#div1").clone().prependTo("#div2"); $("#div2").show(); }); }); </script> $(document).ready(function(){$("#div2").hide(); Auchargementduscript,ladivision2estcache. $("button").click(function () { Auclicdubouton. $("#div1").clone().prependTo("#div2"); Ladivision1estrecopie(clone())etinsre(prependTo())danslasecondedivision. $("#div2").show(); Ladivision2estaffiche. }); }); Finduscript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#div2").hide(); $("button").click(function () {

- 2-

ENI Editions - All rigths reserved - Jonifar lina

248

$("#div1").clone().prependTo("#div2"); $("#div2").show(); }); }); </script> <style type="text/css"> button { margin-bottom : 15px;} #div1 { border: 1px solid black; width: 110px; font: 0.9em arial, sans-serif; float: left; text-align: center;} #div2 { margin-left: 20px; float: left;} </style> </head> <body> <button id="bouton">Cloner</button><br /> <div id="div1"> Le recyclage<br /> <img src="recyclage.gif" alt="" /><br /> Pour la plante </div> <div id="div2"></div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

249

Quelquesapplications
1.Ajouterunpieddepageetdesliensderetour
NousallonsajouteravecquelqueslignesdejQuery,unpieddepageetdesliensderetourverslehautdelapage. SoitlefichierHtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black;} #foot { border-top: 1px solid black; margin-top: 15px;} </style> </head> <body> <h2>Titre de la page</h2> <div id="contenu"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, nisi eget aliquet interdum, urna risus sodales urna, at auctor nisl tellus rutrum nibh. Pellentesque lorem diam, tincidunt eget tincidunt non, rutrum non felis. In hac habitasse platea dictumst. Ut nibh leo, placerat a tristique consequat, vestibulum at tortor. In nec tristique turpis.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, nisi eget aliquet interdum, urna risus sodales urna, at auctor nisl tellus rutrum nibh. Pellentesque lorem diam, tincidunt eget tincidunt non, rutrum non felis. In hac habitasse platea dictumst. Ut nibh leo, placerat a tristique consequat, vestibulum at tortor. In nec tristique turpis.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, nisi eget aliquet interdum, urna risus sodales urna, at auctor nisl tellus rutrum nibh. Pellentesque lorem diam, tincidunt eget tincidunt non, rutrum non felis. In hac habitasse platea dictumst. Ut nibh leo, placerat a tristique consequat, vestibulum at tortor. In nec tristique turpis.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, nisi eget aliquet interdum, urna risus sodales urna, at auctor nisl tellus rutrum nibh. Pellentesque lorem diam, tincidunt eget tincidunt non, rutrum non felis. In hac habitasse platea dictumst. Ut nibh leo, placerat a tristique consequat, vestibulum at tortor. In nec tristique turpis.</p> </div> </body> </html> cestade,lespiedsdepagesetlesliensderetournapparaissentpasdanslefichierXhtml.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

250

AjoutonslecodejQuery. <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $(<a id="top" name="top"></a>).prependTo(body); $("p").after("<a href=#top>Haut de page</a>"); $("#contenu").after("<div id=foot><i>Notes de pied de page</i></div>"); }); //]]> </script> Expliquonscescript. $(document).ready(function(){ InitialisationduDOMdansjQuery. $(<a id="top" name="top"></a>).prependTo(body); Plaonsdabordlancre(<a id="top" name="top"></a>))audbutdelapage.Lamthode prepend()appliquela balise<body>permetdeplacerlancrejusteaprscelleci. $("p").after("<a href=#top>Haut de page</a>"); Cette ligne de code placera le lien de retour vers le haut de la page ( <a href=#top>Haut de page</a>) aprs chaqueoccurrencedelabalise<p> ... </p>. $("#contenu").after("<div id=foot><i>Notes de pied de page</i></div>"); Pourlepieddepage( <div id=foot><i>Notes de pied de page</i></div>),ilserainsraprsladivisioncontenu quicontientlesdiffrentsparagraphes.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

251

}); Finduscript. Cetexempleillustrebien,notreavis,laconcisionducodejQuerymmepourraliserdesoprationscomplexes.

LefichiercompletaveclescriptjQuery: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $(<a id="top" name="top"></a>).prependTo(body); $("p").after("<a href=#top>Haut de page</a>"); $("#contenu").after("<div id=foot><i>Notes de pied de page</i></div>"); }); //]]> </script> <style type="text/css"> a { color: black;} #foot { border-top: 1px solid black; margin-top: 15px;} </style> </head> <body>
ENI Editions - All rigths reserved - Jonifar lina - 3-

252

<h2>Titre de la page</h2> <div id="contenu"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, nisi eget aliquet interdum, urna risus sodales urna, at auctor nisl tellus rutrum nibh. Pellentesque lorem diam, tincidunt eget tincidunt non, rutrum non felis. In hac habitasse platea dictumst. Ut nibh leo, placerat a tristique consequat, vestibulum at tortor. In nec tristique turpis.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, nisi eget aliquet interdum, urna risus sodales urna, at auctor nisl tellus rutrum nibh. Pellentesque lorem diam, tincidunt eget tincidunt non, rutrum non felis. In hac habitasse platea dictumst. Ut nibh leo, placerat a tristique consequat, vestibulum at tortor. In nec tristique turpis.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, nisi eget aliquet interdum, urna risus sodales urna, at auctor nisl tellus rutrum nibh. Pellentesque lorem diam, tincidunt eget tincidunt non, rutrum non felis. In hac habitasse platea dictumst. Ut nibh leo, placerat a tristique consequat, vestibulum at tortor. In nec tristique turpis.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, nisi eget aliquet interdum, urna risus sodales urna, at auctor nisl tellus rutrum nibh. Pellentesque lorem diam, tincidunt eget tincidunt non, rutrum non felis. In hac habitasse platea dictumst. Ut nibh leo, placerat a tristique consequat, vestibulum at tortor. In nec tristique turpis.</p> </div> </body> </html>

2.Ajouteretenleverdeslmentsduneliste
Soitunelistenonordonne.Auclicsurunlien,ajoutonsunlmentdeliste.Auclicsurunautrelien,supprimonsun lmentdeliste.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> ul { list-style-type: square;}

- 4-

ENI Editions - All rigths reserved - Jonifar lina

253

a { color: black;} </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <a href="#" id="add">Ajouter un item</a><br /> <a href="#" id="remove">Enlever un item</a> </body> </html> LecodejQuery: <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ var i = $(li).size() + 1; $(a#add).click(function() { $(<li>Item + i + </li>).appendTo(ul); i++; }); $(a#remove).click(function() { $(li:last).remove(); i--; }); }); //]]> </script> Explications: Lescriptsarticuleautourdesdeuxoprationssuivantes. $(a#add).click(function() { $(<li>Item + i + </li>).appendTo(ul); Au clic sur le lien Ajouter un item, on ajoute comme dernier lment, un lment <li> ... </li> la liste non ordonne. $(a#remove).click(function() { $(li:last).remove(); AuclicsurlelienAjouter,onsupprimeledernierlment<li> ... </li> (li:last). Ilfautcependantajouteruncompteurpourincrmenteroudcrmenterlenumroassocilitem. var i = $(li).size() + 1; $(a#add).click(function() { $(<li>Item + i + </li>).appendTo(ul); i++; }); Onajouteainsiuncompteur(var i).Celuicidmarreaunombredlmentsdeliste(size()).Onveilleraajouter uneunitcar,commesouvent,JavaScriptdmarresescomptages0.Unefoisllmentdelisteajout,lavariablei estincrmenteduneunit(i++). $(a#remove).click(function() { $(li:last).remove(); i--; }); Defaonsimilaire,chaquefoisquunlmentdelisteestsupprim,lecompteuriestdcrmentduneunit.

ENI Editions - All rigths reserved - Jonifar lina

- 5-

254

}); Findescript.

Lefichierfinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //<![CDATA[ var i = $(li).size() + 1; $(a#add).click(function() { $(<li>Item + i + </li>).appendTo(ul); i++; }); $(a#remove).click(function() { $(li:last).remove(); i--; }); }); //]]> </script> <style type="text/css"> ul {list-style-type: square;} a {color: black;} </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <a href="#" id="add">Ajouter un item</a><br /> <a href="#" id="remove">Enlever un item</a> </body> </html>
- 6 ENI Editions - All rigths reserved - Jonifar lina

255

3.Ajouteruneicneauxliensexternes
La petite icne qui suit les liens externes est trs la mode sur les sites Web 2.0. En ce qui nous concerne, jQuerypermetdajouterfacilementcespetitesimages.

Licne estdisponibledanslespacedetlchargement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $("a").filter(function() { return this.hostname !== location.hostname; }) .after(<img src="external.png" class="external">); }); //]]> </script> <style type="text/css"> a { color: black; text-decoration: none;} .external { border: none; margin-left: 10px;} </style> </head> <body> <a href="http://www.editions-eni.fr/" title="Lien externe" >Editions Eni</a><br /> <a href="#">Lien interne</a><br /> <a href="#">Lien interne</a><br /> </body> </html> Pour identifier les liens externes, nous testons le nom de domaine de la page ( location.hostname) par rapport au nomdedomaine(this.hostname)desliens.Nousnousassuronsquelesdeuxnecorrespondentpas( this.hostname && location.hostname !== this.hostname). .after(<img src="external.png" class="external">); Ce filtre appliqu, le script insre aprs le lien (after) licne de lien externe (<img class="external">). src="external.png"

ENI Editions - All rigths reserved - Jonifar lina

- 7-

256

4.Ajouterdesbordsarrondis
Mispartleslmentsajoutsparlesimages,ledesigndespagesHtmlestessentiellementlinaireavecdeslignes verticalesethorizontales.Cestlecas,parexemple,destableaux,desdivisionsetjadisdescadres.Laprsencede lignescourbesoudecoinsarrondisestunetendancequiapportenonseulementunecertaineoriginalitmaisaussi unetouchede"douceur".

Avantdesepenchersurlecode,nousavonsbesoindesimagespourlarrondidesbords.ceteffet,nousutilisons ungnrateurdebordsarrondisoitparexemple,celuiproposparlesitewww.roundedcorner.com. Nous obtenons alors les images rounded_tl.png (tl pour top left), rounded_tr.png (tr pour top right), rounded_bl.png(blpourbottomleft)et rounded_br(brpourbottomright). Cesimagessontdisponiblesdanslespacedetlchargementconsacrcetouvrage. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA] $(document).ready(function(){ $(div.rounded).wrap(<div class="cadre"></div>); $(div.cadre).prepend(<div class="cadre_tl"></div>); $(div.cadre).prepend(<div class="cadre_tr"></div>); $(div.cadre).append(<div class="cadre_bl"></div>); $(div.cadre).append(<div class="cadre_br"></div>); }); //]]> </script> <style type="text/css"> #contenu { background-color: #9cf; padding: 0 8px;} p { margin: 0; } .cadre { background-color: #9cf; width: 275px;} .cadre_tl, .cadre_tr, .cadre_bl, .cadre_br{ width: 100%; height: 11px; font-size: 1px; } .cadre_tl{ background: url(rounded_tl.png) no-repeat top left; }

- 8-

ENI Editions - All rigths reserved - Jonifar lina

257

.cadre_tr{ background: url(rounded_tr.png) no-repeat top right; float: right; } .cadre_bl{ background: url(rounded_bl.png) no-repeat bottom left; float: right; } .cadre_br{ background: url(rounded_br.png) no-repeat bottom right; } </style> </head> <body> <br /> <div id="contenu" class="rounded"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis pellentesque bibendum. Proin posuere felis tellus. Phasellus eu felis. Nullam lacus ante.</p> </div> </body> </html> PenchonsnoussurlecodejQuery. $("div.contenu").wrap("<div class="cadre"></div>"); Commenons par ajouter audessus et endessous (mthode wrap()) de la division dont la classe est contenu, la divisiondontlaclasseestcadre.

$("div.cadre").prepend("<div class=cadre_tl></div>"); lintrieurdeladivision cadre,ajoutonsenpremierlment(mthodeprepend()),limagerounded_tl.pngcontenue enarrireplandansladivisioncadre_tl.

$("div.cadre").prepend("<div class=cadre_tr></div>"); Procdons de mme (mthode prepend()) pour limage rounded_tr.png contenue en arrireplan dans la division cadre_tr.

$("div.cadre").append("<div class=cadre_bl></div>"); Ajoutonsmaintenant,toujourslintrieurdeladivisioncadremaisendernireposition(mthode append()),limage

ENI Editions - All rigths reserved - Jonifar lina

- 9-

258

rounded_bl.pngcontenueenarrireplandansladivisioncadre_bl.

$("div.cadre").append("<div class=cadre_br></div>"); Enfin, procdons de mme (mthode append()), pour limage rounded_br.png contenue en arrireplan dans la divisioncadre_br.

Il est possible dcrire le code de faon plus concise. Ainsi, les lignes avec prepend() et append() deviendraient:

$("div.cadre").prepend("<div class=cadre_hd></div><div class=cadre_hg></div>"); $("div.cadre").append("<div class=cadre_bd></div><div class=cadre_bg></div>");

- 10 -

ENI Editions - All rigths reserved - Jonifar lina

259

Introduction
TraverserleDOMetlemanipulersontdesnotionsquelonretrouvaitdjdansleJavaScripttraditionnel.Lalibrairie jQuery rend ces dmarches plus aises mais surtout moins fastidieuses. En introduisant la notion de filtrage des lments,jQuerytoujoursdanssonsoucidatteindreplusrapidementleslments,apporteunconceptinnovantqui permetderduirelesrsultatsdelarechercheselonlescritresretenusparledveloppeur.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

260

Trouverunlmentdtermin
Lamthodeeq()(eqpourequal)permetdepointerlarecherchedirectementsurunlmentspcifique. eq(index) Rduitlersultatdelarechercheunlmentdontlapositionestfournieenargument(index).
G

index(entier):dterminelapositiondellment.Lintervalledespositionscommence0etseterminela tailledelindex1.

$("p").eq(1):slectionnelesecondparagraphe. LamthoderenvoieunobjetjQuery. Exemple Soituntableaude4lignesettroiscolonnes.Auclicsurlelien,mettreunarrireplandecouleurlacellule8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black;} .bleu { background-color: #9cf;} table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <p><a href="#">Trouver la cellule 8</a></p> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> <tr><td>10</td><td>11</td><td>12</td></tr> </table> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

261

LescriptjQuery.

<script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("td").eq(7).addClass("bleu"); }); }); </script> Procdonsauxexplications. $(document).ready(function(){ $("a").click(function(){ AuchargementduDOMetauclicdulien. $("td").eq(7).addClass("bleu"); LescellulesdutableausontchargesdansunobjetjQuery( $("td")).Parmicellesci,lacelluledontlapositiondindex estgale7estretenue( eq(7)).Laclassebleuluiestalorsapplique(addClass("bleu")). Lespositionsdindexcommenant0(commecestlecasavecleJavaScriptclassique),laposition7correspondbien lacellule8. }); }); Findescript. Lefichierfinaldevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("td").eq(7).addClass("bleu"); }); }); </script>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

262

<style type="text/css"> a { color: black;} .bleu { background-color: #9cf;} table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <p><a href="#">Trouver la cellule 8</a></p> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> <tr><td>10</td><td>11</td><td>12</td></tr> </table> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

263

Trouverunesquencedlments
slice(positiondedpart[,positiondefin]) Extraitunesquenceparmileslmentsdelarecherche.
G

Positiondedpart(entier):indiquelapositiondupremierlmentdelasquence.Cetentierpeuttrengatif. Danscecas,laslectiondbutepartirdelafindelaslectioninitiale. Positiondefin(entier)(facultatif):indiquelaposition(noncomprise,strictementinfrieur)dudernierlment delasquence.

Lindexdespositionscommence0. $("div").slice(4, 6).css("background", "yellow"); LamthoderenvoieunobjetjQuery. Exemple Reprenonsletableaude4ligneset3colonnes.Remplissonsdunarrireplandecouleurlescellulesde49(soitlatroisime etquatrimeligne).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black;} .bleu { background-color: #9cf;} table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <p><a href="#">Trouver les cellules de 4 9</a></p> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

264

<tr><td>7</td><td>8</td><td>9</td></tr> <tr><td>10</td><td>11</td><td>12</td></tr> </table> </body> </html> LescriptjQuery. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("td").slice(3,9).addClass("bleu"); }); }); </script>

Explicationspaspas: $(document).ready(function(){ $("a").click(function(){ Auchargementetauclicsurlelien. $("td").slice(3,9).addClass("bleu"); Lescriptslectionnelesdiffrentescellules($("td")).Ilextraitensuitelasquenceallantdelaposition3(soitlacellule 4)jusqulaposition9noncomprise(soitjusqulacellule10noncomprise,donclacellule9). }); }); Findescript. Lefichierfinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $("td").slice(3,9).addClass("bleu");

- 2-

ENI Editions - All rigths reserved - Jonifar lina

265

}); }); </script> <style type="text/css"> a { color: black;} .bleu { background-color: #9cf;} table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} </style> </head> <body> <p><a href="#">Trouver les cellules de 4 9</a></p> <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> <tr><td>10</td><td>11</td><td>12</td></tr> </table> </body> </html> Commentaires $("td").slice(3).addClass("bleu"); Si la position de fin nest pas indique, la squence retenue commence la position de dpart jusqu la fin de la slection.

$("td").slice(3,4).addClass("bleu"); Cetteformulationnereprendquunlmentdelasquence.

$("td").slice(-2).addClass("bleu"); Unevaleurngativeindiquequelaslectiondbutelafindelasquence.Lavaleur2signifiequellereprenddeux lmentsenpartantdelafin.

$("td").slice(2,-1).addClass("bleu"); Lecodeslice(-2,1)reprendunesquenceallantdutroisimelavantdernierlment.

ENI Editions - All rigths reserved - Jonifar lina

- 3-

266

$("td").slice(0).addClass("bleu"); Tousleslmentssontainsireprisdanslasquence.

- 4-

ENI Editions - All rigths reserved - Jonifar lina

267

Trouverunlmentselonuncritre
is(expression) Indiquesilaslectionrponduncritredterminparlexpression.Renvoietrueoufalse.
G

expression(chanedecaractres):expressioncorrespondantaucritrevrifier.

$(":checkbox").parent().is("form") Lamthoderenvoieunboolen. Exemple Soitunelistede5lments.Auclicsurunlmentdelaliste,celuiciseraorndunarrireplandecouleur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> .highlight { background-color: #9cf;} a { color: black;} li { width: 120px; cursor: pointer;} </style> </head> <body> <p>Dmonstration de is()</p> <ul id="exemple"> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> </body> </html> LescriptjQuery.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

268

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul").click(function(event){ if ($(event.target).is("li")) { $(event.target).addClass(highlight); } }); }); </script> Dtaillonsceluici. $(document).ready(function(){ $("ul").click(function(event){ AuchargementduDOMetauclicsurunlmentdelalistenonordonne. if ($(event.target).is("li")) { $(event.target).addClass(highlight); } Si le clic (event.target) porte sur un lment <li> de la liste, celuici sera mis en vidence par un arrireplan de couleur(addClass(highlight)). }); }); Findescript. Lefichiercomplet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul").click(function(event){ if ($(event.target).is("li")) { $(event.target).addClass(highlight); } });

- 2-

ENI Editions - All rigths reserved - Jonifar lina

269

}); </script> <style type="text/css"> .highlight { background-color: #9cf;} a { color: black;} li { width: 120px; cursor: pointer;} </style> </head> <body> <p>Dmonstration de is()</p> <ul id="exemple"> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

270

Supprimerunlment
Lafonctionnot()estutilisepoursupprimerunlmentdunobjetjQuery. not(slecteurouexpression) Supprimedelaslection,llmentquirpondlexpressionspcifie. $("p").not("#selected") CettemthoderenvoieunobjetjQuery. Exemple Soitunelistenonordonnede5lments.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> .highlight { background-color: #9cf;} a { color: black;} li { width: 120px;} </style> </head> <body> <p><a href="#">Dmonstration de not()</a></p> <ul id="exemple"> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> </body> </html> LescriptjQueryvaslectionnerleslignespairesensupprimantleslignesimpaires.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

271

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $(#exemple li).not(:even).addClass(highlight); }); }); </script> Dtaillonscescript. $(document).ready(function(){ $("a").click(function(){ Auchargementetauclicsurlelien. $(#exemple li).not(:even).addClass(highlight); Lescriptsupprimedelaslection,leslmentsdontlindexestunnombrepair(not(:even))delalistenonordonne ($(#exemple li)).Leslmentsrestantssontdotsdun arrireplandecouleur,soitleslmentsdontlindexest unnombreimpair.IlestutilepourlabonnecomprhensiondeserappelerquelindexenJavaScriptdbute0. }); }); Finduscript. Lefichierfinalseprsentecommesuit: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $(#exemple li).not(:even).addClass(highlight); }); }); </script> <style type="text/css"> .highlight { background-color: #9cf;} a { color: black;}
- 2 ENI Editions - All rigths reserved - Jonifar lina

272

li { width: 120px;} </style> </head> <body> <p><a href="#">Dmonstration de not()</a></p> <ul id="exemple"> <li>Item de liste 1</li> <li>Item de liste 2</li> <li>Item de liste 3</li> <li>Item de liste 4</li> <li>Item de liste 5</li> </ul> </body> </html> Commentaire Ilestpossibledecombinerlesexpressions.Parexemple: $(#exemple li).not(:odd,:first).addClass(highlight); Ainsi,aveclecodeprcdent,lescriptsupprimeleslmentsdontlindexestimpairetlepremierlment. Lersultatest:

ENI Editions - All rigths reserved - Jonifar lina

- 3-

273

Formeruntableau(Array)dlments
map(fonctionderappel) Renvoieuntableaudlments(Array)rsultantduneactionsurunensembledlments.Chaquelignedutableauest leretourdelafonctionappliqueunlment. fonctionderappel(callback):fonctionappliqueauxlmentscibls. map(function(){ return $(this).val();}) LamthoderetourneunobjetjQuery. Exemple FormonsuntableaudetypeArrayaveclesvaleursdesdiffrenteslignesdetextedunformulaire.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> p { font-weight: bold; border : 1px solid black; padding: 3px; } </style> </head> <body> <form action=""> Nom : <input type="text" name="nom" value="Igor" /><br /> Ville : <input type="text" name="ville" value="Lille" /><br /> Pays : <input type="text" name="pays" value="France" /><br /> Mail : <input type="text" name="mail" value="igor@gmail.com" /> </form> <p><b>Les valeurs sont : </b></p> </body> </html> Lescript: <script type="text/javascript">

ENI Editions - All rigths reserved - Jonifar lina

- 1-

274

$(document).ready(function(){ $("p").append($("input").map(function(){ return $(this).val(); }) .get().join(", ") ); }); </script> Dtaillonsceluici: $(document).ready(function(){ AuchargementduDOM. $("p").append($("input").map(function(){ return $(this).val(); }) .get().join(", ") ); Lescriptinsredansleparagraphe<p>($("p").append)lesvaleursretournesparlamthodemap()soitlavaleur(val ())desdiffrentesbalises<input>duformulaire. LamthodejQueryget()permetdaccdertousleslmentsduformulaires.Enfin,lamthodeJavaScriptclassique join()convertitletableauArrayenunechanedecaractrescomposedetousleslmentssparsparunevirgule. }); Finduscript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").append( $("input").map(function(){ return $(this).val(); }) .get().join(", ") ); }); </script> <style type="text/css"> p { font-weight: bold; border : 1px solid black; padding: 3px; } </style> </head> <body> <form action=""> Nom : <input type="text" name="nom" value="Igor" /><br /> Ville : <input type="text" name="ville" value="Lille" /><br /> Pays : <input type="text" name="pays" value="France" /><br /> Mail : <input type="text" name="mail" value="igor@gmail.com" /> </form> <p><b>Les valeurs sont : </b></p> </body> </html>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

275

Applications
1.Filtreruneliste
Soitunelistedevaritsdefruits.Auchoixdunlmentdeformulairedetype <select>,lescriptneretiendraque lesvaritsdunfruitspcifique(pomme,poire,raisinoufraise).

Lefichierdedpartapparatcommesuit. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> body { font-family: Arial; font-size: 0.9em; ul { list-style-type: none; width: 8em; border: 1px solid black;} li { pagdding : 5px;} </style> </head> <body> Slectionnez la catgorie : <select id="categorie"> <option selected="selected" value="toutes">Toutes</option> <option value="pomme">Pommes</option> <option value="poire">Poires</option> <option value="raisin">Raisins</option> <option value="fraise">Fraises</option> </select> <p><input id="bouton" type="button" value="Filtrer la liste" /></p> <ul> <li class="item pomme">Arine</li> <li class="item raisin">Perlette</li>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

276

<li class="item <li class="item <li class="item <li class="item <li class="item <li class="item <li class="item <li class="item <li class="item </ul> </body> </html> LescriptjQuery.

fraise">Marjolaine</li> poire">Alexandrine</li> fraise">Charlotte</li> pomme">Violette</li> pomme">Choupette</li> raisin">Cardinal</li> fraise">Mamie</li> poire">Prouille</li> raisin">Calmeria</li>

<script type="text/javascript"> $(document).ready(function(){ $("#bouton").click(function(){ var selection = $("#categorie").val(); if (selection == "all"){ $("li").filter(".item").show(); } else { $("li").filter(".item").hide(); $("li").filter("."+selection).show(); } }); }); </script> Dtaillonsceluici. $(document).ready(function(){ $("#bouton").click(function(){ AuchargementetauclicduboutonFiltrerlaliste. var selection = $("#categorie").val(); Le script charge dans la variable selection, la valeur retenue par lutilisateur des choix proposs dans la liste de slection. if (selection == "all"){ $("li").filter(".item").show(); } Silechoix Toutesatretenu,tousleslmentsdelalistenonordonnesontaffichsselonunfiltreportantsurla classeitem.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

277

else { $("li").filter(".item").hide(); $("li").filter("."+selection).show(); } Siuneautrevaleuratreprisedanslalistedeslection,lalistecompltedesitemsestcachedansunpremier temps.Ensuite,leslmentsdelalistenonordonnesontfiltrsselonlecritrestockdanslavariable selection. Ceuxcisontalorsaffichs. }); }); Findescript. Aufinal. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bouton").click(function(){ var selection = $("#categorie").val() if (selection == "all"){ $("li").filter(".item").show(); } else { $("li").filter(".item").hide(); $("li").filter("."+selection).show(); } }); }); </script> <style type="text/css"> body { font-family: Arial; font-size: 0.9em;} ul { list-style-type: none; width: 8em; border: 1px solid black;} li { pagdding : 5px;} </style> </head> <body> Slectionnez la catgorie : <select id="categorie"> <option selected="selected" value="toutes">Toutes</option> <option value="pomme">Pommes</option> <option value="poire">Poires</option> <option value="raisin">Raisins</option> <option value="fraise">Fraises</option> </select> <p><input id="bouton" type="button" value="Filtrer la liste" /></p> <ul> <li class="item pomme">Arine</li> <li class="item raisin">Perlette</li> <li class="item fraise">Marjolaine</li> <li class="item poire">Alexandrine</li> <li class="item fraise">Charlotte</li> <li class="item pomme">Violette</li> <li class="item pomme">Choupette</li> <li class="item raisin">Cardinal</li> <li class="item fraise">Mamie</li>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

278

<li class="item poire">Prouille</li> <li class="item raisin">Calmeria</li> </ul> </body> </html>

2.Filtrerunelisteselondeuxcritres
Applicationsemblablelaprcdentemaisaveccettefois,deuxcritresdeslection.Soitunelistedevoitures.Une slectionporterasurlanne(2007,2008,2009)etuneautresurletypedecarburant(essenceoudiesel).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> body { font-family: Arial sans-serif; font-size: 0.9em;} ul { list-style-type: none; width: 11em; border: 1px solid black;} li { pagdding : 5px;} </style> </head> <body> Slectionnez lanne : <select id="annee"> <option selected="selected" value="toutes">Toutes les annes</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option></select> <br /> Slectionnez le carburant : <select id="carburant"> <option selected="selected" value="tous" >Tous carburants</option> <option value="essence">Essence</option>
- 4 ENI Editions - All rigths reserved - Jonifar lina

279

<option value="diesel">Diesel</option> </select> <br /> <input id="bouton" type="button" value="Filtrer la liste" /> <ul> <li class="item 2009 essence">Renault Twingo</li> <li class="item 2008 essence">Renault Clio</li> <li class="item 2007 diesel">Renault Laguna</li> <li class="item 2008 diesel">Renault Scenic </li> <li class="item 2007 diesel">Peugeot 607</li> <li class="item 2009 essence">Peugeot 207</li> <li class="item 2008 diesel">Peugeot 307</li> <li class="item 2008 diesel">Peugeot 407</li> <li class="item 2007 essence">Citroen C2</li> <li class="item 2008 diesel">Citroen C3 Picasso</li> <li class="item 2007 diesel">Citroen C4</li> <li class="item 2009 diesel">Citroen C6 </li> </ul> </body> </html> LescriptjQuery.

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ var annee = $("#annee").val(); var carburant = $("#carburant").val(); var selecteur_annee = ; var selecteur_carburant = ; if (annee == "toutes" && carburant == "tous"){ $(".item").show(); } else { if (carburant != "tous"){ selecteur_carburant = . + carburant } if (annee != "toutes") { selecteur_annee = . + annee } $(".item").hide(); $("li"). filter(selecteur_carburant + selecteur_annee).show(); } }); }); //]]>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

280

</script> Commelescriptcomportelesigne&,cedernierrisquedtreinterprtcommeundbutdecaractrespcialparle Xhtml.IlestainsiprudentdefaireappelunesectionCDATApourviterquelenavigateurnanalyseceslignesde codecommeduXhtml. Dtaillonscescript. $(document).ready(function(){ $("#bouton").click(function(){ Auchargementetauclicdubouton. var var var var annee = $("#annee").val(); carburant = $("#carburant").val(); selecteur_annee = ; selecteur_carburant = ;

Nouscronsunesriedevariables.Lavariable anneereprendlechoixdelapremirelistedeslection.Lavariable carburantceluidelasecondelistedeslection.Lesvariables selecteur_anneeetselecteur_carburantcontiendront (commeleurnomlindique)lesslecteursdeclassedufiltrage. if (annee == "toutes" && carburant == "tous"){ $(".item").show(); } SilalistedeslectiondesannesestpositionnesurToutesetcelledescarburantssurTous,tousleslmentsdela listenonordonne( .item)sontaffichs. else { if (carburant != "tous"){ selecteur_carburant = . + carburant } Sinon, le script teste si la liste de slection relative au carburant nest plus positionne sur Tous. Dans ce cas la variableselecteur_carburantcontiendraunpoint(pourlaclasse)etletypedecarburantretenu. if (annee != "toutes"){ selecteur_annee = . + annee } De faon analogue, si la liste de slection relative aux annes nest plus positionne sur Toutes, la variable selecteur_anneecontiendralaclasseaveclanneretenue. $(".item").hide(); $(selecteur_carburant + selecteur_annee).show(); Lalistecompltedesitemsdelalistenonordonneestcache.Etlalistefiltreselonlecarburantetlanneretenus estaffiche. } Finduelse. }); }); FinduscriptjQuery. Lefichierfinal. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-

- 6-

ENI Editions - All rigths reserved - Jonifar lina

281

8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#bouton").click(function(){ var annee = $("#annee").val(); var carburant = $("#carburant").val(); var selecteur_annee = ; var selecteur_carburant = ; if (annee == "toutes" && carburant == "tous"){ $(".item").show(); } else { if (carburant != "tous"){ selecteur_carburant = . + carburant } if (annee != "toutes") { selecteur_annee = . + annee } $(".item").hide(); $("li"). filter(selecteur_carburant + selecteur_annee).show(); } }); }); //]]> </script> <style type="text/css"> body { font-family: Arial sans-serif; font-size: 0.9em;} ul { list-style-type: none; width: 11em; border: 1px solid black;} li { pagdding : 5px;} </style> </head> <body> Slectionnez lanne : <select id="annee"> <option selected="selected" value="toutes">Toutes les annes</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option></select> <br /> Slectionnez le carburant : <select id="carburant"> <option selected="selected" value="tous" >Tous carburants</option> <option value="essence">Essence</option> <option value="diesel">Diesel</option> </select> <br /> <input id="bouton" type="button" value="Filtrer la liste" /> <ul> <li class="item 2009 essence">Renault Twingo</li> <li class="item 2008 essence">Renault Clio</li> <li class="item 2007 diesel">Renault Laguna</li> <li class="item 2008 diesel">Renault Scenic </li> <li class="item 2007 diesel">Peugeot 607</li> <li class="item 2009 essence">Peugeot 207</li> <li class="item 2008 diesel">Peugeot 307</li> <li class="item 2008 diesel">Peugeot 407</li> <li class="item 2007 essence">Citroen C2</li> <li class="item 2008 diesel">Citroen C3 Picasso</li> <li class="item 2007 diesel">Citroen C4</li> <li class="item 2009 diesel">Citroen C6 </li> </ul> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 7-

282

3.Unenavigationparonglets
Cette application est frquemment rencontre dans le Web 2.0. Selon longletcliqu,uncontenudiffrentsaffiche danslapageouplusprcismentdansunedivisiondecelleci.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> body { padding: 0px; margin: 15px; font: 90% arial, sans-serif;} ul.navigation { padding: 0px; list-style-type: none; line-height: 40px; overflow: hidden;} ul.navigation li { display: inline;} ul.navigation li a { padding-top: 3px; padding-bottom: 3px; background-color: #ccc; padding-left: 5px; padding-right: 5px; color: #000; text-decoration: none; line-height: 27px; overflow: hidden;} ul.navigation li a.selected { background-color: #9cf; border: 2px solid black; color: #000; padding-top: 7px;} ul.navigation li a:hover { background-color: #9cf; color: #000; padding-top: 7px;
- 8 ENI Editions - All rigths reserved - Jonifar lina

283

border: 1px solid black;} div.menu > div { padding: 5px; margin-top: 3px;} #un { margin-top: 25px; text-align: justify; border: 1px solid black; padding-left: 7px; padding-right: 7px;} #deux { margin-top: 25px; text-align: justify; border: 1px solid black; padding-left: 7px; padding-right: 7px;} #trois { margin-top: 25px; text-align: justify; border: 1px solid black; padding-left: 7px; padding-right: 7px;} </style> </head> <body> <div class="menu"> <ul class="navigation"> <li><a href="tabs.htm#un">page 1</a></li> <li><a href="tabs.htm#deux">page 2</a></li> <li><a href="tabs.htm#trois">page 3</a></li></ul> <div id="un"> <h3>page 1</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="deux"> <h3>page 2</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="trois"> <h3>page 3</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </body> </html> LescriptjQuery. Auclicsurunonglet,lapagecorrespondanteestaffiche.

ENI Editions - All rigths reserved - Jonifar lina

- 9-

284

<script type="text/javascript"> $(document).ready(function(){ var boites_page = $(div.menu > div); boites_page.hide() .filter(:first).show(); $(div.menu ul.navigation a).click(function () { boites_page.hide(); boites_page.filter(this.hash).show(); $(div.menu ul.navigation a).removeClass(selected); $(this).addClass(selected); return false; }); }); </script> tudionscescriptendtail. $(document).ready(function(){ var boites_page = $(div.menu > div); Au chargement de la page, les lments <div>, enfants de <div boite_page. boites_page.hide() .filter(:first).show(); Lesdiffrentespagessont,dansunpremiertemps,cachespourrinitialiserleprocessus.Cependant,lapremire page( filter(:first))estaffichepardfaut. $(div.menu ul.navigation a).click(function () { boites_page.hide(); boites_page.filter(this.hash).show(); Au clic sur un onglet, le contenu prcdent est cach (hide()) et la mthode de filtrage (filter(this.hash)) est applique pour retrouver la page concerne. Celleci est alors affiche (show()). La proprit JavaScript (classique) window.location.hashquipermetdercuprerlancreduneURLestutiliseici. $(div.menu ul.navigation a).removeClass(selected); $(this).addClass(selected); id="menu"> sont chargs dans la variable

- 10 -

ENI Editions - All rigths reserved - Jonifar lina

285

return false; Laclasseselectedestappliquelongletslectionnparlutilisateur. }); }); Findescript. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> body { padding: 0px; margin: 15px; font: 90% arial, sans-serif;} ul.navigation { padding: 0px; list-style-type: none; line-height: 40px; overflow: hidden;} ul.navigation li { display: inline;} ul.navigation li a { padding-top: 3px; padding-bottom: 3px; background-color: #ccc; padding-left: 5px; padding-right: 5px; color: #000; text-decoration: none; line-height: 27px; overflow: hidden;} ul.navigation li a.selected { background-color: #9cf; border: 2px solid black; color: #000; padding-top: 7px;} ul.navigation li a:hover { background-color: #9cf; color: #000; padding-top: 7px; border: 1px solid black;}

div.menu > div { padding: 5px; margin-top: 3px;} #un { margin-top: 25px; text-align: justify; border: 1px solid black; padding-left: 7px; padding-right: 7px;} #deux { margin-top: 25px; text-align: justify; border: 1px solid black; padding-left: 7px; padding-right: 7px;} #trois { margin-top: 25px; text-align: justify; border: 1px solid black; padding-left: 7px; padding-right: 7px;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var boites_page = $(div.menu > div);

ENI Editions - All rigths reserved - Jonifar lina

- 11 -

286

boites_page.hide() .filter(:first).show(); $(div.menu ul.navigation a).click(function () { boites_page.hide(); boites_page.filter(this.hash).show(); $(div.menu ul.navigation a).removeClass(selected); $(this).addClass(selected); return false; }); }); </script> </head> <body> <div class="menu"> <ul class="navigation"> <li><a href="tabs.htm#un">page 1</a></li> <li><a href="tabs.htm#deux">page 2</a></li> <li><a href="tabs.htm#trois">page 3</a></li></ul> <div id="un"> <h3>page 1</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="deux"> <h3>page 2</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="trois"> <h3>page 3</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </body> </html>

- 12 -

ENI Editions - All rigths reserved - Jonifar lina

287

Introduction
Enquelquesannes,AJAX(AsynchronousJavaScriptandXML)sestfaituneplaceincontournabledanslaconceptiondes pages Web. Son apparition correspond au concept du Web 2.0 dont il a en quelque sorte t linstigateur par son approcheinnovanteetlestechniquesnouvellesquilaapportes. La librairie jQuery se devait de traiter lAJAX. Nous retiendrons en prliminaire ltude de ce chapitre, lextrme concisionducodeetlafacilitdemiseen uvredejQueryenlamatire. Toute notre tude sest droule jusqu maintenant ct client. Ce qui tait somme toute assez pratique car un diteur de texte et un navigateur taient les seuls outils ncessaires. Avec ce chapitre sur AJAX, linstallation dun serveurWeblocal,aussiappelserveurWebpersonnel,servleutile,voireindispensable,pourtesterlecode,sans passer par la procdure contraignante de tlchargement FTP. Comme serveur Web local, Microsoft IIS ou EasyPHP sontdessolutionsfiablesetaisesmettreenplace.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

288

LesrequtesAJAXraccourcies
1.Chargerunfichier
Lamthode load()permetdechargerdunefaonextrmementsimple,unfichierselonleprocdmisenplacepar Ajax. Nous dtaillerons plus loin, la mthode ajax() (voir la section La requte AJAX complte du prsent chapitre) qui permetderaliserlammeoprationdunefaonplussophistiqueetplusdtaille.Pourledveloppeurdbutant ou pour des applications simples, la mthode load() suffit amplement et fait, de par sa facilit, le bonheur des concepteurs. load(url[,donnes,][,fonction]) ChargelecodeHtml(ouXhtml)partirdunfichierdonnetplaceceluicidansllmentslectionn.
G

url:unechanedecaractrescontenantlURLdufichierHtmlcharger. donnes (optionnel) : liste de paires de la forme cl/valeur qui seront envoyes en tant que donnes au serveur. fonction (optionnel) : la fonction qui doit tre excute en cas de russite de la requte. Par dfaut, les donnessontchargesdansllmentslectionn.

$("div").load("test.htm"):chargelesdonnesdufichiertest.htmetplacecellescidansladivision<div>. CettemthoderenvoieunobjetjQuery. LamthodeGETestretenuepardfautsaufsidesdonnessontfourniesenargument.

Exemple Pardeuxboutons,chargerdansunemmedivisiondescontenusdiffrents.

LefichierHtmldedpartseprsenteainsi: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css">

ENI Editions - All rigths reserved - Jonifar lina

- 1-

289

button { margin-top: 10px;} div { width: 145px; height: 50px; border: 1px solid black; margin-top: 12px; padding: 5px; text-align: center;} </style> </head> <body> <button id="bouton1">Option 1</button> <button id="bouton2">Option 2</button> <div> </div> </body> </html> Enoutre,prvoyonsgalementsurleserveur,lefichieroption1.htmquicomportesimplementlecodeHtmlsuivant: <b><font size="5">Option 1</font></b> Etlefichieroption2.htm: <b><font size="5">Option 2</font></b> LescriptjQuerydoit,auclicdubouton1,chargerdansladivision <div>,lefichieroption1.htmetauclicdubouton2 chargerlefichieroption2.htm.

LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("#bouton1").click(function() {


- 2 ENI Editions - All rigths reserved - Jonifar lina

290

$("div").load("option1.htm"); }); $("#bouton2").click(function() { $("div").load("option2.htm"); }); }); </script> Dtaillonsceluici. $(document).ready(function(){ InitialisationdejQueryauchargementduDOM. $("#bouton1").click(function() { $("div").load("option1.htm"); }); Auclicdubouton1($("#bouton1").click()),lefichieroption1.htmestcharg(load("option1.htm"))dansladivision <div>. $("#bouton2").click(function() { $("div").load("option2.htm"); }); Auclicdubouton2($("#bouton2").click()),lefichieroption2.htmestcharg(load("option2.htm"))dansladivision <div>. }); Finduscript. Lefichierfinaldevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bouton1").click(function() { $("div").load("option1.htm"); }); $("#bouton2").click(function() { $("div").load("option2.htm"); }); }); </script> <style type="text/css"> button { margin-top: 10px;} div { width: 145px; height: 50px; border: 1px solid black; margin-top: 12px; padding: 5px; text-align: center;} </style> </head> <body> <button id="bouton1">Option 1</button> <button id="bouton2">Option 2</button> <div> </div>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

291

</body> </html>

2.Chargerquencasdemodification
La mthode loadIfModified(), quivalente la mthode load() tudie au point prcdent, ne charge le fichier demandseulementsilatmodifidepuisladernirerequte. loadIfModified(url[,donnes,][,fonction]) ChargelecodeHtmlpartirdunfichierdonnetplaceceluicidansllmentslectionnsilatmodifidepuisla dernirerequte.
G

url:unechanedecaractrescontenantlURLdufichierHtmlcharger. donnes (optionnel) : liste de paires de la forme cl/valeur qui seront envoyes en tant que donnes au serveur. fonction (optionnel) : la fonction qui doit tre excute en cas de russite de la requte. Par dfaut, les donnessontchargesdansllmentslectionn.

$("div").loadIfModified("test.htm"):chargelesdonnesdufichiertest.htmetneplacecellescidansladivision <div>quesilefichierasubideschangementsdepuisladernirerequte. CettemthoderenvoieunobjetjQuery.

3.ChargerselonlamthodeGETouPOST
AutresfaonsraccourciesoffertesparjQuerypoureffectuerdesrequtesAJAXsontlesmthodes $.get()et $.post (). $.get(url[,donnes][,fonction][,type]) ChargeunfichierduserveurselonunerequteHTTPGET.
G

url:unechanedecaractrescontenantlURLdufichiercharger. donnes (optionnel) : liste de paires de la forme cl/valeur qui seront envoyes en tant que donnes au serveur. fonction(optionnel):lafonctionquidoittreexcuteencasderussitedelarequte. type (optionnel) : chane de caractres qui spcifie le type de donnes transmises la fonction : "xml", "html","script","json","jsonp"ou"text".

$.get("test.html", function(data){ $("#resultat").html(data); }); CettemthoderenvoieunobjetXMLHttpRequest. $.post(url[,donnes][,fonction][,type]) ChargeunfichierduserveurselonunerequteHTTPPOST.


G

url:unechanedecaractrescontenantlURLdufichiercharger. donnes (optionnel) : liste de paires de la forme cl/valeur qui seront envoyes en tant que donnes au serveur. fonction(optionnel):lafonctionquidoittreexcuteencasderussitedelarequte.

- 4-

ENI Editions - All rigths reserved - Jonifar lina

292

type (optionnel) : chane de caractres qui spcifie le type de donnes transmises la fonction : "xml", "html","script","json","jsonp"ou"text".

$.post("test.html", function(data){ $("#resultat").html(data); }); CettemthoderenvoieunobjetXMLHttpRequest. Aucontrairedeload(),ilfautspcifiericiunefonctionpourtraiterlesdonnesretournesparleserveur.

Exemple Auclicdunbouton,afficherdansunedivision,lecontenudunarticle.Lamthode$.get()estutilise.

Lefichierdedpartpeutseprsentercommesuit. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> button { margin-top: 10px;} #gauche { width: 50px; float: left;} #droit { width: 215px; height: 65px; border: 1px solid black; margin-top: 10px; padding: 3px; font-size: 0.8em; float: left;} </style> </head> <body> <div id="gauche"> <button id="bouton">Lire</button> </div> <div id="droit"> </div> </body> </html> Lefichierchargerduserveur(lorem.htm)comportelecontenusuivant:

ENI Editions - All rigths reserved - Jonifar lina

- 5-

293

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id semper enim. Vestibulum metus felis, elementum sit amet tristique non, pulvinar vitae metus. LescriptjQueryutilise $.get()pourchargerlefichierdepuisleserveuretlaffichedansladivisiondroiteentoure dunebordure.

<script type="text/javascript"> $(document).ready(function(){ $("#bouton").click(function() { $.get("lorem.htm", function(contenu){ $("#droit").append(contenu); }); }); }); </script> Explicationduscript. $(document).ready(function(){ InitialisationduDOMetdejQuery. $("#bouton").click(function() { Auclicdubouton. $.get("lorem.htm", function(contenu){ $("#droit").append(contenu); }); Larequteestralisepar$.get()quidemandelefichierlorem.htm.Ensuite,unefonctionestlaborepourajouter (append())lecontenudufichierdansladivisionidentifiepardroit. }); }); Findescript. Aufinal,lecodedelapageest: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
- 6 ENI Editions - All rigths reserved - Jonifar lina

294

$(document).ready(function(){ $("#bouton").click(function() { $.get("lorem.htm", function(contenu){ $("#droit").append(contenu); }); }); }); </script> <style type="text/css"> button { margin-top: 10px;} #gauche { width: 50px; float: left;} #droit { width: 215px; height: 65px; border: 1px solid black; margin-top: 10px; padding: 3px; font-size: 0.8em; float: left;} </style> </head> <body> <div id="gauche"> <button id="bouton">Lire</button> </div> <div id="droit"> </div> </body> </html> Commentaire En parallle loadIfModified( url[, donnes,][, fonction]), la mthode $.getIfModified( url[, donnes][, fonction][, type])existegalement.Sonfonctionnementestidentique. Parcontre,loptionIfModifiednexistepasavec$.post()caravecPOST,lespagesnesontjamaismisesencache.

4.Chargerunscript
$.getScript(url[,fonction]) ChargeunscriptJavaScriptduserveurenutilisantlamthodeHTTPGETetexcuteceluici.
G

url:unechanedecaractresquiindiqueladresseduscriptcharger. fonction(optionnel):unefonctionexcutersilarequteestrussie.Cettefonctionnestgnralementpas ncessairecarlescriptsexcuteautomatiquement.

$.getScript("test.js"); CettemthoderenvoieunobjetXMLHttpRequest. Exemple DclencherunmessagedalerteJavaScriptchargpartirduserveur.

ENI Editions - All rigths reserved - Jonifar lina

- 7-

295

Lefichierdedparttoutsimple. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> button { margin-top: 10px;} </style> </head> <body> <button id="bouton">Script</button> </body> </html> Lemessagedalerteestinclusdanslefichieralerte.js. alert("Je viens du serveur"); LescriptjQueryva,auclicsurlebouton,rapatrierlefichieralerte.jsetlexcuter. <script type="text/javascript"> $(document).ready(function(){ $("#bouton").click(function() { $.getScript("alert.js"); }); }); </script> Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bouton").click(function() { $.getScript("alert.js"); }); });

- 8-

ENI Editions - All rigths reserved - Jonifar lina

296

</script> <style type="text/css"> button { margin-top: 10px;} </style> </head> <body> <button id="bouton">Script</button> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 9-

297

LarequteAJAXcomplte
Cette mthode permet deffectuer une requte AJAX en matrisant, grce aux nombreuses options disponibles, les diffrentsparamtresettapesdecelleci. ajax(options) RaliseunerequteHTTPasynchrone(AJAX). $.ajax({ url: "test.htm", success: function(data ) { $("#resultat").html(data); $().log("Termin"); }, }); LamthoderenvoieunobjetXMLHttpRequest. Passonsenrevuelesnombreusesoptionsdisponibles.
G

url(obligatoire):unechanedecaractrescontenantladressedelarequte. type (optionnel) : une chane de caractres qui dfinit la mthode HTTP utiliser pour la requte (GET ou POST). La valeur par dfaut est GET. Dautres mthodes denvoi HTTP peuvent tre utilises, comme PUT ou DELETE,maiscellescinesontpassupportespartouslesnavigateurs. dataType(optionnel):unechanedecaractresquispcifieleformatdesdonnesquiserontrenvoyesparle serveur(xml,html,jsonouscript).Siriennestspcifi,jQueryutiliseraletypeMIMEpourdterminerleformat adquatsoitresponseXMLouResponseText.Lestypesdisponiblessont :
G

"xml":retourneundocumentXMLquipourratretraitparjQuery. "html":retourneducodeHtmlauformattexte. "script":valuelarponseenJavaScriptetretournecettedernireauformattexte. "json":valuelarponseenJSONetretourneunobjetJavaScript.

ifModified(optionnel):unevaleurboolennequiindiquequeleserveurdoitvrifiersilesdonnesretournes sontdiffrentesdeladernirerequteavantderenvoyerlefichieravecsuccs.Pardfaut,cetteoptionvaut false. timeout(optionnel):nombredemillisecondesaprslequellarequteestconsidrecommenonrussie. global (optionnel) : une valeur boolenne qui permet le dclenchement du gestionnaire dvnementsglobal dAJAX. Par dfaut, la valeur est true. Avec une valeur false, les dclenchements dvnements de type ajaxStart()ouajaxStop()sontignors. beforeSend (optionnel) : une fonction qui doit tre excute avant lenvoi de la requte. Ceci permet de modifier lobjet XMLHttpRequest avant quil soit envoy pour spcifier, par exemple, des enttes HTTP personnalises. error(optionnel):unefonctionquidoittreappeleencasdchecdelarequte.Lafonctiondisposedetrois arguments :lobjet XMLHttpRequest,unechanedecaractresdcrivantletypederreurrencontretunobjet dexception,danslecasocedernieratgnr. success (optionnel) : fonction appeler si la requte sexcuteavecsuccs.Unseulargumentestpassen paramtresoitlesdonnesretournesparleserveur. complete (optionnel) : fonction excuter lorsque la requte se termine. La fonction dispose de deux

ENI Editions - All rigths reserved - Jonifar lina

- 1-

298

arguments :lobjetXMLHttpRequestetunechanedecaractresdcrivantletypedesuccsdelarequte.
G

data(optionnel):donnesenvoyerauserveur.Lobjetdoittreformdepairesdelaformecl/valeur.Les donnes sont converties en chane de caractres (si elles ne le sont pas dj). Voir loption processData ci aprspourempcherceprocessusautomatique. processData(optionnel):valeurboolennequiindiquesilesdonnesdeloptiondatadoiventtreconverties en chane de caractres. La valeur par dfaut est true. Pour empcher la conversion, passez cette option false. contentType (optionnel) : chane de caractres contenant le MIME des donnes lorsque des donnes sont envoyesauserveur.Pardfaut,leMIMEapplication/xwwwformurlencodedestretenu. async (optionnel) : une valeur boolenne qui indique si la requte doit seffectuer de faon asynchrone ou synchrone.LavaleurpardfautpourunerequteAJAXestbienentendutrue.

Dautresoptionssontencoredisponiblesmaisdunusagemoinsfrquent.numronssimplement:
G

cache(optionnel):unevaleurboolennequi,lorsquelleestmisesur false,empchelapagechargedtre misedanslecachedunavigateur. password(optionnel):danslecasolaccsHTTPdelarequtencessiteunmotdepasse. username(optionnel):danslecasolaccsHTTPdelarequtencessiteunnomdutilisateur(username). scriptCharset(optionnel):forcelesrequtesdutypescripttreinterprtesavecuncharsetparticulier. xhr(optionnel)permetdecrerlActiveXObject(InternetExplorer)ouleXMLHttpRequest(pourlesautres).

Commentaires Laformelaplussimpledecettefonction$.ajax()doitaumoinsspcifierlURLdesdonnescharger. $.ajax({ url: "test.htm", }); Nousallonsvoiraupointciaprsqueceseulparamtrepeut,sontour,deveniroptionnelaveclamthodeajaxSetup (). Il faut souligner que la mthode ajax() charge les contenus de lURL spcifie mais (au contraire de load() par exemple)nefaitrienavecceuxci.Pourquecescontenusapparaissentdanslapage,ilfautprciserlesoprations effectuerenutilisantlesfonctionsassociesauxoptionssuccessoucomplete. $.ajax({ url: "test.htm", success: function(data ) { $("div").html(data); }, }); Ainsi,lesdonneschargesparlarequteladressetest.htmsontencasdesuccs,affichescommeduHtmldans ladivision<div>. Pourdesoprationsaussisimplesquecelledelexemple,ilestbienplusaisdutiliserload()ou$.get(). Exemple Auclicdunlien,faisonsapparatreuncontenupartirduserveur. Lefichierdedpartseprsentecommesuit: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- 2-

ENI Editions - All rigths reserved - Jonifar lina

299

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> a { color: black;} li { list-style-type: none;} </style> </head> <body> <p>Les films culte du geek</p> <a href="#">Charger les films</a> <div id="contenu"> </div> </body> </html>

Lefichiercharger(films.htm)comportelalistesuivante: <ul> <li>Retour vers le futur</li> <li>Matrix</li> <li>Tron</li> <li>Star Wars</li> <li>Star Trek</li> <li>Le seigneur des anneaux</li> </ul> LescriptjQuerydoitlancerunerequteAJAXverslefichierfilms.htmetenafficherlecontenudansladivision contenu delapage.

ENI Editions - All rigths reserved - Jonifar lina

- 3-

300

<script type="text/javascript"> $(document).ready(function(){ $(a).click(function() { $(a).hide(); $("#contenu").empty(); $.ajax({ url: films.htm, async: true, type: GET, global: false, cache: false, success: function(html){ $("#contenu").append(html) } }); }); }); </script> Dtaillonscescript. $(document).ready(function(){ ChargementduDOM. $(a).click(function() { Auclicsurlelien<a>. $(a).hide(); Lelienetsoncontenusontcachs. $("#contenu").empty(); Lecontenudeladivisioncontenuestvid. $.ajax({ url: films.htm, async: true, type: GET, global: false, cache: false, success: function(html){ $("#contenu").append(html)

- 4-

ENI Editions - All rigths reserved - Jonifar lina

301

} }); La requte AJAX de jQuery charge le fichier situ lURL films.htm. Le processus est effectu sous un mode asynchrone. La mthode HTTP retenue est GET. Le gestionnaire dvnementsglobaldAJAX est dsactiv. Le fichier rapatri du serveur nest pas mis en cache. Enfin, si la requte sest droule avec succs, les donnes du fichier chargparcellecisontajoutesladivisioncontenu. }); }); Finduscript. Lefichierfinaldevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(a).click(function() { $(a).hide(); $("#contenu").empty(); $.ajax({ url: films.htm, async: true, type: GET, global: false, cache: false, success: function(html){ $("#contenu").append(html) } }); }); }); </script> <style type="text/css"> a { color: black;} li { list-style-type: none;} </style> </head> <body> <p>Les films culte du geek</p> <a href="#">Charger les films</a> <div id="contenu"> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

302

Dfinirunerequtepardfaut
Comme suggr au point prcdent, il est possible de dfinir lURL par dfaut des requtes AJAX de la page (pour autantquellesoitidentiquepourtouteslesrequtesAJAXdelapage). ajaxSetup(paramtres) DfinitlesparamtresglobauxpourtouteslesrequtesAJAXdelapage. $.ajaxSetup( { url: test.htm", global: false, type: "POST" }); Toutes les requtes AJAX de la page seront paramtres avec lURL indique, le gestionnaire dvnements AJAX dsactivetlesenvoisseronteffectusparlamthodePOSTaulieudeGET. Ainsi,lURLpardfautpeuttredfinieparlecode: $.ajaxSetup({ url: "test.htm", }); Chaquefoisquunerequtedoittreralise,lURLseraautomatiquementutilise.Ainsi,ilsuffitalorsdcrire: $.ajax({});

ENI Editions - All rigths reserved - Jonifar lina

- 1-

303

Lesvnementsassocislarequte
1.ajaxSend()
ajaxSend(fonction) AssigneunefonctionquiseraexcuteavantlenvoidelarequteAJAX. $("#loading").ajaxSend(function(){ $(this).show(); }); CettemthoderenvoieunobjetjQuery. Exemple Afficherunmessageavantquelarequtenedbute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

304

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#message").hide(); $("#resultat").hide(); $(#message).ajaxSend(function() { $(this).append(La requte AJAX va dbuter !<br>).show(); }); $(a).click(function() { $(#resultat).load(a.html); }); }); //]]> </script> <style type="text/css"> a { color: black;} #message { width: 200px; border: 1px solid black; margin-top: 15px; background-color: #9cf; padding-left: 5px;} </style> </head> <body> <h3>ajaxSend()</h3> <a href="#">Dmarrer AJAX</a> <div id="message"> </div> <div id="resultat"> </div> </body> </html> PassonsenrevuelesdiffrenteslignesducodejQuery. $(document).ready(function(){ ChargementdejQuery. $("#message").hide(); La division message qui contiendra le message associ lvnement ajaxSend() est cache au chargement de la page. $("#resultat").hide(); Ladivisionresultatquicontiendralecontenudufichierchargestcachecarcecontenunapasdimportancedans cetexemple. $(#message).ajaxSend(function() { $(this).append(La requte AJAX dbute !<br>).show(); }); LorsdelvnementajaxSend(),laphrase"La requte AJAX va dbuter !"estajouteladivisionmessageetcelle ciestalorsrenduevisible. $(a).click(function() { $(#resultat).load(a.html); }); Auclicdulien,lefichiera.htmlestchargetinsrdansladivisionresultat.Pourrappel,cettedivisionatcache endbutdescript. }); FindejQuery.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

305

2.ajaxStart()
ajaxStart(fonction) AssigneunefonctionexcuterlorsquunerequteAJAXdbute. $("#loading").ajaxStart(function(){ $(this).show(); }); CettemthoderenvoieunobjetjQuery. Exemple Appliqulexempleprcdent,lescriptavecajaxStart()devient:

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#message").hide(); $("#resultat").hide(); $(#message).ajaxStart(function() { $(this).append(La requte AJAX dbute !<br>).show(); }); $(a).click(function() { $(#resultat).load(a.html); }); }); //]]> </script>

3.ajaxStop()
ajaxStop(fonction) Assigneunefonctionquiseraexcutechaquefoisquunerequtesetermine. CettemthoderenvoieunobjetjQuery. Exemple Appliqulexempleprcdent,lescriptavecajaxStop()devient:

<script type="text/javascript"> //<![CDATA[

ENI Editions - All rigths reserved - Jonifar lina

- 3-

306

$(document).ready(function(){ $("#message").hide(); $("#resultat").hide(); $(#message).ajaxStop(function() { $(this).append(La requte AJAX se termine !<br>).show(); }); $(a).click(function() { $(#resultat).load(a.html); }); }); //]]> </script>

4.ajaxSuccess()
ajaxSuccess(fonction) AssigneunefonctionquiseraexcutechaquefoisquunerequteAJAXseseratermineavecsuccs. CettemthoderenvoieunobjetjQuery. Exemple Appliqulexempleprcdent,lescriptavecajaxSuccess()devient:

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#message").hide(); $("#resultat").hide(); $(#message).ajaxSuccess(function() { $(this).append(La requte AJAX est un succs !<br>).show(); }); $(a).click(function() { $(#resultat).load(a.html); }); }); //]]> </script>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

307

5.ajaxComplete()
ajaxComplete(fonction) AssigneunefonctionquiseraexcutelorsqueleprocessustotaldelarequteAJAXseratermin. CettemthoderenvoieunobjetjQuery. Exemple Appliqulexempleprcdent,lescriptavecajaxComplete()devient:

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#message").hide(); $("#resultat").hide(); $(#message).ajaxComplete(function() { $(this).append(La requte AJAX est termine !<br>).show(); }); $(a).click(function() { $(#resultat).load(a.html); }); }); //]]> </script>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

308

6.ajaxError()
ajaxError(fonction) AssigneunefonctionquiseraexcutesilarequteAJAXchoue. CettemthoderenvoieunobjetjQuery. Exemple Reprenonsnotrefichierexemplemais(volontairement)avecuneURLquinexistepassurleserveursoitx.html. CetteabsencedefichierempchequelarequteAJAXsoitmenebienetsonchecentrane,bienentendu,une erreur.

Lescript,appliqulexemple,avecajaxError()devient: <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#message").hide(); $("#resultat").hide(); $(#message).ajaxError(function() { $(this).append(Erreur de la requte !<br>).show(); }); $(a).click(function() { $(#resultat).load(x.html); }); }); //]]> </script>

- 6-

ENI Editions - All rigths reserved - Jonifar lina

309

Srialiserlesdonnes
Cettemthodetransformelesdonnesdeschampsdeformulaireenunechanedecaractresreprenantcellesci. CeprocdestfortutilepourenvoyercesdonnesauserveurparunerequteAJAXsousunformatcompatibleavec laplupartdeslangagesdeprogrammationctserveur. Pourlebonfonctionnementdelamthodeserialize(),leschampsdeformulairedoiventpossderunattributname. serialize() Transformelesdonnesdeschampsdeformulaireenunechanedecaractres. $("form").serialize(); Cettemthoderenvoieunechainedecaractres(String). Exemple Soitunformulairededpart.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> div { margin-bottom: 8px;} p { margin-top: 8px; font-size:14px; border: 1px solid black;} </style> </head> <body> <form>
ENI Editions - All rigths reserved - Jonifar lina - 1-

310

<div>Nom : <input type="text" name="nom" id="nom" /></div> <div>Prnom : <input type="text" name="prenom" id="prenom" /></div> <div>Mail : <input type="text" name="mail" id="mail" /></div> <div> <input type="radio" name="masc" /> Masculin<br /> <input type="radio" name="fem" /> Fminin<br /> </div> <div> Navigateur utilis :<br /> <input type="checkbox" name="ie" /> Internet Explorer<br /> <input type="checkbox" name="ff" /> Firefox<br /> <input type="checkbox" name="saf" /> Safari<br /> <input type="checkbox" name="autre_nav" /> Autre navigateur </div> </form> <button>Srialiser</button> <p id="resultat">&nbsp;</p> </body> </html> Auclicdubouton,lesdonnesencodesparlutilisateurserontsrialises.

Lescriptsuivantatutilis. <script type="text/javascript"> $(document).ready(function(){ $(button).click(function() { var str = $("form").serialize(); $("#resultat").text(str); }); }); </script> Soit, $(document).ready(function(){

- 2-

ENI Editions - All rigths reserved - Jonifar lina

311

InitialisationdejQuery. $(button).click(function() { Auclicdubouton. var str = $("form").serialize(); Leformulaire($("form"))estsrialis(serialize())etstockdanslavariablestr. $("#resultat").text(str); Lecontenudelavariablestrestajoutcommedutexte(text(str))dansleparagrapheidentifiparresultat. }); }); Finduscript. Lefichierfinaldevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(button).click(function() { var str = $("form").serialize(); $("#resultat").text(str); }); }); </script> <style type="text/css"> div { margin-bottom: 8px;} p { margin-top: 8px; font-size:14px; border: 1px solid black;} </style> </head> <body> <form action=""> <div>Nom : <input type="text" name="nom" id="nom" /></div> <div>Prnom : <input type="text" name="prenom" id="prenom" /></div> <div>Mail : <input type="text" name="mail" id="mail" /></div> <div> <input type="radio" name="masc" /> Masculin<br /> <input type="radio" name="fem" /> Fminin<br /> </div> <div> Navigateur utilis :<br /> <input type="checkbox" name="ie" /> Internet Explorer<br /> <input type="checkbox" name="ff" /> Firefox<br /> <input type="checkbox" name="saf" /> Safari<br /> <input type="checkbox" name="autre_nav" /> Autre navigateur </div> </form> <button>Srialiser</button> <p id="resultat">&nbsp;</p> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

312

- 4-

ENI Editions - All rigths reserved - Jonifar lina

313

Applications
1.Uneicnedechargement
LesrequtesAJAXpeuventparfoisentranerunerelativelenteurauchargementdufichierexterneenfonctiondela tailledufichier,delencombrementduserveuret/oudelaqualitdelaconnexion. Ainsi, pour viter que lutilisateurnesoitdsappointparcesmomentsdelatence,leconcepteurpeutprvoirune petiteicneindiquantquelechargementestencours.Cetteicneestenfaituneimagegifanimequiapparat linitialisationdelarequteetquidisparatlorsquelarequteaaboutiavecsuccs. Le site ajaxload (http://www.ajaxload.info/) propose une srie impressionnante de ces icnes animes de tlchargement.

Son interface permet de choisir le type danimation (Indicator type), la couleur de fond (Background color) et la couleur de lanimation (Foreground color). Le bouton Generate it ! cre limage et en donne un aperu. Le bouton Downloadit!,vouspermetdetlchargerlicneanime.Riendeplussimple.Parfaitpournepasperdredetemps crersoimmecesimagesdattente.Bienentendu,cestentirementgratuit.

Exemple Soitlefichierdedpartquicomportesimplementunboutonetunedivisiondestinerecevoirlefichierunefoischarg.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

314

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> button { margin: 12px 0 12px 0} #contenu { width: 250px;} </style> </head> <body> <button id="bouton">Charger</button> <div id="contenu"></div> </body> </html> Le fichier charger depuis le serveur sappelle ici lorembis.htm. Lors de la phase de dveloppement et de test en interne,lapparitiondelicnedetlchargementrisquedtreassezfurtive.Unfichierassezlongestpluttconseill pourapercevoir(oupluttentrapercevoir)celleci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id semper enim. Vestibulum metus felis, elementum sit amet tristique non, pulvinar vitae metus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id semper enim. Vestibulum metus felis, elementum sit amet tristique non, pulvinar vitae metus. ... Le script jQuery doit prendre en charge non seulement la requte AJAX mais aussi lapparition et la disparition de limagedechargement.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

315

Licneestdisponibledanslespacedetlchargement. <script type="text/javascript"> $(document).ready(function() { $(#bouton).click(function() { $(#contenu).hide().load(lorembis.htm, function() { $(this).fadeIn(4000); }); return false; }); $(<div id="loading"><img src="ajax-loader.gif" /></div>) .insertBefore(#contenu) .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }); }); </script>

ENI Editions - All rigths reserved - Jonifar lina

- 3-

316

Cescriptncessitequelquesexplications. $(document).ready(function() { InitialisationdejQuery $(#bouton).click(function() { Auclicdubouton. $(#contenu).hide().load(lorembis.htm, function() { $(this).fadeIn(4000); }); Une requte AJAX est effectue vers le fichier lorembis.htm et son contenu est insr dans la division contenu. Un effetapparitionprogressiveatajoutsoitfadeIn(4000). return false; }); Findelapartiedechargement. $(<div id="loading"><img src="ajax-loader.gif" /></div>) .insertBefore(#contenu) Limageajaxloader.gif,inclusedansladivisionloadingestinsre( insertBefore)avantladivisioncontenu. .ajaxStart(function() { $(this).show(); }) LorsquelarequteAJAXdmarre(ajaxStart),cetteimage(this)estrenduevisible(show()). .ajaxStop(function() { $(this).hide(); }); LorsquelarequteAJAXsetermine(ajaxStop),cetteimage(this)estalorscache(hide()). }); FinduscriptjQuery. Aufinal,voicilapagedfinitive. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(#bouton).click(function() { $(#contenu).hide().load(lorembis.htm, function() { $(this).fadeIn(4000); }); return false; }); $(<div id="loading"><img src="ajax-loader.gif" /></div>) .insertBefore(#contenu) .ajaxStart(function() { $(this).show();

- 4-

ENI Editions - All rigths reserved - Jonifar lina

317

}) .ajaxStop(function() { $(this).hide(); }); }); </script> <style type="text/css"> button { margin: 12px 0 12px 0} #contenu { width: 250px;} #loading { margin: 30px 0 0 30px; position: absolute; display: none;} </style> </head> <body> <button id="bouton">Charger</button> <div id="contenu"></div> </body> </html>

2.UnlexiqueenAJAX
laborons un petit lexique informatique dont les dfinitions sont charges par des requtes AJAX dans la page principale. Cettepageprincipaleseprsentecommesuit.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

318

<style type="text/css"> body { font: 62.5% Arial, Verdana, sans-serif;} a { color: black} #container { font-size: 1.2em; margin: 10px 20px; width: 360px;} #header { margin-top: 20px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid black;} #alphabet { float: left; width: 30px; padding-right: 10px; margin-right: 10px; } #lexique { float: left; width: 300px;} </style> </head> <body> <div id="container"> <div id="header"> <h2>Petit lexique informatique</h2> </div> <div id="alphabet"> <div id="lettre_a"> <h3><a href="#">A</a></h3> </div> <div id="lettre_b"> <h3><a href="#">B</a></h3> </div> <div><h3>C</h3></div> <div><h3>D</h3></div> <div><h3>E</h3></div> <div><h3>F</h3></div> <div><h3>G</h3></div> <div><h3>Etc</h3></div> </div> <div id="lexique"> </div> </div> </body> </html> LefichierdesdfinitionsdelalettreA(lettre_a.htm)estlesuivant: <h3>ActiveX</h3> <div> Technologie Microsoft. La technologie ActiveX permet la cration de composants logiciels qui peuvent tre inclus dans des pages Html. </div> <h3>AVI</h3> <div> Audio Video Interleave. Format de fichier Microsoft pour les donnes audio et vido. </div> <h3>AZERTY</h3> <div> Nom du clavier franais qui vient de lordre des six premires lettres de la premire range. </div> LefichierdesdfinitionsdelalettreB(lettre_b.htm)estlesuivant: <h3>Backup</h3> <div> Version anglaise de sauvegarde, ou de secours. </div> <h3>Big Blue</h3>

- 6-

ENI Editions - All rigths reserved - Jonifar lina

319

<div> Big Blue est le surnom dIBM, par rfrence Big Brother, qui est le personnage inquitant dOrwell dans 1984 . </div> <h3>Bureautique</h3> <div> Mot apparu en 1976. Application de linformatique au travail de bureau (tertiaire). Couramment, il sagit du trio tableur traitement de texte - base de donnes. </div> Cesfichierssontdisponiblesdanslespacedetlchargementrservcetouvrage. Lorsque les fichiers comportent des accents, il est recommand de les enregistrer au format UTF8 ou iso 88591. Au clic sur la lettre A ou B, une requte AJAX est diligente afin de charger les dfinitions correspondantes (lettre_a.htmoulettre_b.htm)dansladivisionlexique.

ENI Editions - All rigths reserved - Jonifar lina

- 7-

320

LescriptjQueryprendlaforme: <script type="text/javascript"> $(document).ready(function() { $(#lettre_a).click(function() { $(#lexique).hide().load(lettre_a.htm, function() { $(this).slideDown(1000); }); return false; }); $(#lettre_b).click(function() { $(#lexique).hide().load(lettre_b.htm, function() { $(this).slideDown(1000); }); return false; }); }); </script> cestadedecetouvrage,lesexplicationspeuventtreplussuccinctes. $(document).ready(function() { InitialisationdejQuery. $(#lettre_a).click(function() { AuclicdelalettreA. $(#lexique).hide().load(lettre_a.htm, function() { $(this).slideDown(1000); }); UnerequteAJAXenjQuery(load())esteffectueverslefichierlettre_a.htmetsoncontenuinsrdansladivision lexique.Uneffetvisuelatajoutauscript.Dansunpremiertemps,lecontenude lexiqueesteffac(hide())etle nouveaucontenuapparatavecuneffetdeglissementverslebas( slideDown(1000)).

- 8-

ENI Editions - All rigths reserved - Jonifar lina

321

Lapagefinaledevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(#lettre_a).click(function() { $(#lexique).hide().load(lettre_a.htm, function() { $(this).slideDown(1000); }); return false; }); $(#lettre_b).click(function() { $(#lexique).hide().load(lettre_b.htm, function() { $(this).slideDown(1000); }); return false; }); }); </script> <style type="text/css"> body { font: 62.5% Arial, Verdana, sans-serif;} a { color: black} #container { font-size: 1.2em; margin: 10px 20px; width: 360px;} #header { margin-top: 20px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid black;} #alphabet { float: left; width: 30px; padding-right: 10px; margin-right: 10px; } #lexique { float: left; width: 300px;} </style> </head> <body> <div id="container"> <div id="header"> <h2>Petit lexique informatique</h2> </div> <div id="alphabet"> <div id="lettre_a"> <h3><a href="#">A</a></h3> </div> <div id="lettre_b"> <h3><a href="#">B</a></h3> </div> <div><h3>C</h3></div> <div><h3>D</h3></div> <div><h3>E</h3></div> <div><h3>F</h3></div> <div><h3>G</h3></div> <div><h3>Etc</h3></div> </div> <div id="lexique"> </div> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 9-

322

- 10 -

ENI Editions - All rigths reserved - Jonifar lina

323

Introduction
Ds son origine, jQuery se voulait un framework JavaScript complet. Il comporte ainsi une srie de fonctions, dites, utilitaires. Il nest pas possible, dans le cadre de cet ouvrage de les passer toutes en revue. Cellesci peuvent tre consultesdansladocumentationdejQueryladresse:http://docs.jquery.com/Utilities Noussouhaitonscependantenpinglerquelquesunes.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

324

Dtecterlenavigateur
LesdiffrencesentrelefonctionnementdesnavigateurssontunetristeralitdelaconceptiondessitesWeb.Ilest souventncessaire,surtoutdanslecadredapplicationspointues,deprvoirdeslignesdecodesspcifiqueslunou lautrenavigateur(InternetExplorer,malgrsesprogrs,restevis).Ainsi,ladtectiondunavigateurresteunoutil essentieldudveloppeurWeb.

1.Parlenomdunavigateur
jQuery.browser() DtectelesnavigateursSafari,Opera,MsieetMozilla. jQuery.browser, function() Commentaire Au demeurant fort pratique, la mthode jQuery.browser() est dprcie (deprecated) en jQuery 1.3 et ne se retrouveraplusdanslesversionsfutures.Ilfautluiprfrerlamthode jQuery.support()abordeaupointsuivant decechapitre. Cestenfaituneinterprtationduclassiquenavigator.userAgentdeJavaScript.

Exemple ExploronsdiversnavigateursaveclamthodejQuery.browser().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $.each(jQuery.browser, function(i, val) { $("<div>" + i + " : <span>" + val + "</span>") .appendTo(document.body); }); }); //]]> </script> <style type="text/css"> p { font-weight: bold; margin: 3px 0 0 10px; } div { margin-left:40px; } </style> </head> <body> <p>Le navigateur est :</p> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

325

2.Parlescapacitsdunavigateur
Avec la relance des navigateurs et les nouvelles versions qui se succdent un rythme assez lev, il devient un vritablecassettedesavoirsilaversionxdunavigateurygretelleproprit.AveclamthodejQuery.support(), la dmarche est plus pragmatique. En effet, elle dtecte si une proprit spcifique est reconnue ou non par le navigateurdelutilisateurfinal.Parexemple,dtectersile(clbre)modledeboteduW3Cestappliquouignor. jQuery.support AjoutenjQuery1.3.Testelaprsenceoulabsencedunesriedeproprits(voirdocumentationofficielle). jQuery.support.boxModel:testesilemodledeboteestappliqu. Exemple Testonslapriseenchargedumodledebote,delopacitetdelapropritCSSfloatdunavigateur. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("p").html("Cette page utilise : <br>Le modle de boite W3C : <span>" +
- 2 ENI Editions - All rigths reserved - Jonifar lina

326

jQuery.support.boxModel + "</span><br>Lopacit : <span>" + jQuery.support.opacity + "</span><br>La proprit CSS float : <span>" + jQuery.support.cssFloat + "</span>"); }); //]]> </script> </head> <body> <p></p> </body> </html> InternetExplorer8reconnatlemodledeboteduW3C(grcelaprsencedudoctype),negrepaslaproprit destyleopacity(utiliselesfiltresalphapourlopacit)etneprendpasencomptestyle.cssFloat(utilisestyleFloat).

Firefox3.5russitquantluilesdiffrentstests.

ENI Editions - All rigths reserved - Jonifar lina

- 3-

327

viterlesconflits
LesframeworksJavaScripttelsquejQuery,MootoolsouPrototypesontfrquemmentutilisspourledveloppement desapplicationsrcentes.Leurcohabitationposesouventdesproblmescarlesignedollar$estutilisparchacun deux.Pourrappel,jQueryutilisele$commealiasde"jQuery". La mthode jQuery.noConflict() permet dviter les conflits possibles avec les autres frameworks. Ainsi lappel $ dans le code du script, ne sera plus considr comme du jQuery et sera rserv aux autres librairies. Le nommage initialjQueryserareprispourlecodejQuery. Pourplusdedtails,voir:http://docs.jquery.com/Using_jQuery_with_Other_Libraries Exemple Soitdeuxdivisions.LecontenudeluneestgrparjQueryetlautreparPrototype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery et Protoype</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> div { width: 160px; height: 30px; border: 1px solid black; margin-bottom: 15px; padding-left: 5px;} .jquery { background-color: #9cf; margin-top: 15px;} .prototype { background-color: white; font-style: italic; } </style> </head> <body> <div id="jquery">Produit en jQuery</div> <div id="prototype">Produit par Prototype</div> <script type="text/javascript"> // Partie jQuery jQuery.noConflict(); jQuery(#jquery).addClass(jquery); // Partie Prototype $(prototype).addClassName(prototype); </script> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 1-

328

Explicationsduscript. // Partie jQuery jQuery.noConflict(); LamthodejQuery.noConflict()indiquejQuerydeneplusprendreencomptelesvariables$. jQuery(#jquery).addClass(jquery); Lesigne$estremplacparjQuery. // Partie Prototype $(prototype).addClassName(prototype); Instruction gre par Prototype. Le signe $ nest plus considr comme du jQuery grce linstruction jQuery.noConflict().

- 2-

ENI Editions - All rigths reserved - Jonifar lina

329

ItrationsenjQuery
LaboucleforenJavaScriptclassiquenestjamaisanodineprogrammer(parexemple, for (i=1; i<6; i++)).Ilfaut prciserlenomdelavariableducompteurainsiquesavaleurinitiale,laconditionquifixelalimitedelaboucleetenfin uneinstructionquiincrmente(oudcrmente)lecompteur. Pourcefaire,jQueryproposelamthodeeach(). each(fonction) Excutelafonctionpasseenparamtrechaqueoccurrencedelobjetslectionn. La fonction doit disposer ellemme dun argument (un entier) qui reprsentera la position de llment en cours de traitement. $("img").each(function(i){ this.src = "test" i ".jpg"; }); Exemple Auclicdunbouton,lescriptremplitleslmentsdunelistenumrote.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
ENI Editions - All rigths reserved - Jonifar lina - 1-

330

lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready( function() { $("button").click(function() { $("#liste").find("li").each( function(i) { $(this).html( $(this).html() + " Item " + (i+1) ); }); }); }); </script> <style type="text/css"> .bouton { margin-top: 12px; margin-left: 20px;} </style> </head> <body> <button class="bouton">Liste</button> <ul id="liste"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> Dtaillonslescript. $(document).ready( function() { $("button").click(function() { AudmarrageduDOMetauclicdubouton. $("#liste").find("li").each( function(i) { $(this).html( $(this).html() + " Item " + (i+1) ); }); Lescriptbouclesurchaquelment(each)delaliste($("#liste").find("li")).Remarquonslargumentdelafonction associe each() (function(i)).chaquelment <li>trouv,lafonctionajoutelamention"Item"etlavaleurdei augmentede1. }); }); Findescript.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

331

Introduction
MmesijQuerynapporteriendespcifiquementnouveauenlamatire,nousconsacronsunchapitreparticulieraux formulairescarilsreprsententtoujoursundveloppementparticulierdansllaborationdespagesWeb.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

332

Lesslecteursdeformulaires
:input Slectionnetousleslmentsdeformulaires(input,textarea,selectetboutons). :text Slectionnetousleslmentsdeformulairesdetypelignedetexte. :password Slectionnetousleslmentsdeformulairesdetypemotdepasse. :radio Slectionnetousleslmentsdeformulairesdetypeboutonsradio. :checkbox Slectionnetousleslmentsdeformulairesdetypeboutonsdecasescocher. :submit Slectionnetousleslmentsdeformulairesdetypesubmit. :image Slectionnetousleslmentsdeformulairesdetypeimage. :reset Slectionnetousleslmentsdeformulairesdetypereset. :button Slectionnetouteslesbalises<button>ettousleslmentsdeformulairesdetypebutton. :file Slectionnetousleslmentsdeformulairesdetypefichier. :hidden Slectionnetousleslmentsdeformulairesdetypehidden. Exemple Soitdescasescocheretdesboutonsradio.Auclicdunbouton,retrouvonslespremiresetauclicdunautrebouton,ces derniers.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

333

Lefichierdedpart: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> p { margin: 3px;} </style> </head> <body> <form action=""> <p><input type="checkbox" />Checkbox 1</p> <p><input type="checkbox" />Checkbox 2</p> <p><input type="checkbox" />Checkbox 3</p> <p><input type="radio" />Radio 1<br /></p> <p><input type="radio" />Radio 2</p> <br /> Boutons de test :<br /> <button id="test1">Test checkbox</button> <button id="test2">Test radio</button> </form> </body> </html>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

334

LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("#test1").toggle( function () { $("form :checkbox").parent().css({"border": "1px solid black"}); }, function () { $("form :checkbox").parent().css({"border": "none"}); }); $("#test2").toggle( function () { $("form :radio").parent().css({"background": "#9cf"}); }, function () { $("form :radio").parent().css({"background": "none"}); }); }); </script> Dtaillonslescript.

ENI Editions - All rigths reserved - Jonifar lina

- 3-

335

$(document).ready(function(){ $("#test1").toggle( AprschargementduDOM,lescriptintroduituneffetdepermutation(toggle)surlepremierbouton(#test1). function () { $("form :checkbox").parent().css({"border": "1px solid black"}); }, Aupremierclic,lescriptretrouvelescasescocher(form :checkbox).Puisremonteauparentdirect(parent)soitles balises<span>quientourentleschampsdeformulaires.Enfin,modifielapropritdestyle(css)consistantmettreune bordure. function () { $("form :checkbox").parent().css({"border": "none"}); }); Ausecondclic,lescriptremetletoutdanssontatinitial. $("#test2").toggle( function () { $("form :radio").parent().css({"background": "#9cf"}); }, function () { $("form :radio").parent().css({"background": "none"}); }); Lemmeprocdestappliqupourlesboutonsradio( form :radio). }); Finduready. Lefichierfinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#test1").toggle( function () { $("form :checkbox").parent().css({"border": "1px solid black"}); }, function () { $("form :checkbox").parent().css({"border": "none"}); }); $("#test2").toggle( function () { $("form :radio").parent().css({"background": "#9cf"}); }, function () { $("form :radio").parent().css({"background": "none"}); }); }); </script> <style type="text/css"> p { margin: 3px;} </style> </head> <body> <form action="">

- 4-

ENI Editions - All rigths reserved - Jonifar lina

336

<p><input type="checkbox" />Checkbox 1</p> <p><input type="checkbox" />Checkbox 2</p> <p><input type="checkbox" />Checkbox 3</p> <p><input type="radio" />Radio 1<br /></p> <p><input type="radio" />Radio 2</p> <br /> Boutons de test :<br /> <button id="test1">Test checkbox</button> <button id="test2">Test radio</button> </form> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

337

Lesfiltresdeslection
1.Leslmentscochs
:checked Reprendtousleslmentsdeboutonradiooudecasescocherslectionns. Exemple Retrouvonsauclicdubouton,leslmentsslectionnsdescasescocher.

Lefichierdedpart. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css"> span { padding: 0 10px 0 10px;}

ENI Editions - All rigths reserved - Jonifar lina

- 1-

338

</style> </head> <body> <form action=""> <span><input type="checkbox" 1</span><br /> <span><input type="checkbox" <span><input type="checkbox" <span><input type="checkbox" <span><input type="checkbox" </form> <p><button>Test</button></p> </body> </html> LescriptjQuery.

name="box" checked="checked" /> Choix name="box" name="box" name="box" name="box" /> /> /> /> Choix Choix Choix Choix 2</span><br 3</span><br 4</span><br 5</span><br /> /> /> />

<script type="text/javascript"> $(document).ready(function(){ $(":button").toggle( function () { $("input:checked").parent().css({"background": "#9cf"}); }, function () { $("input:checked").parent().css({"background": "none"}); }); }); </script> Lescriptreprendladmarcheduprcdent.Ilnencessitedoncpasdeplusamplesexplications.Notonssimplement input:checkedquipermetdenereprendrequeleschampsdeformulairesquisontcochs. Aufinal: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(":button").toggle( function () { $("input:checked").parent().css({"background": "#9cf"}); }, function () { $("input:checked").parent().css({"background": "none"}); }); }); </script> <style type="text/css"> span { padding: 0 10px 0 10px;} </style> </head> <body> <form action=""> <span><input type="checkbox" name="box" checked="checked" /> Choix 1</span><br /> <span><input type="checkbox" name="box" /> Choix 2</span><br /> <span><input type="checkbox" name="box" /> Choix 3</span><br /> <span><input type="checkbox" name="box" /> Choix 4</span><br /> <span><input type="checkbox" name="box" /> Choix 5</span><br /> </form> <p><button>Test</button></p> </body> </html>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

339

2.Leslmentsslectionns
:selected Reprendtousleslmentsdunelistedechoixquisontslectionns. Exemple

Lefichierhtmlinitial: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> </head> <body> <p>Votre navigateur est ?</p> <form action=""> <select id="navigateurs"> <option selected="selected" value="0">Tous les

ENI Editions - All rigths reserved - Jonifar lina

- 3-

340

navigateurs</option> <option value="1">Internet Explorer</option> <option value="2">Firefox</option> <option value="3">Opera</option> <option value="4">Safari</option> <option value="5">Google</option> </select> </form> <br /> <div id="resultat"></div> </body> </html> Lescriptseprsenteainsi. <script type="text/javascript"> $(document).ready(function(){ $("#navigateurs").change(onSelectChange); }); function onSelectChange(){ var selected = $("#navigateurs option:selected"); var output = ""; if(selected.val() != 0){ output = "Votre slection : " + selected.text(); } $("#resultat").html(output); } </script> Exploronsle. $(document).ready(function(){ $("#navigateurs").change(onSelectChange); }); Lorsquunchangementesteffectudanslalistedechoix(change),lafonctiononSelectChangeestappele. function onSelectChange(){ var selected = $("#navigateurs option:selected"); var output = ""; Lafonction onSelectChange dfinit dabordlavariable selectedcommetantlechoixretenuparlutilisateurdansla liste ($("#navigateurs option:selected")). La variable output qui contiendra lnonc du choix de lutilisateur est initialise. if(selected.val() != 0){ output = "Votre slection : " + selected.text(); } Si lattribut valeur du choix effectu est diffrent de 0 ((selected.val() != 0)), la variable output est labore comptetenuduchoixeffectu. $("#resultat").html(output); } Lavaleurdelavariableoutputestaffichedansladivisionidentifieparresultat. } Finduscript. Lefichiercomplet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head>

- 4-

ENI Editions - All rigths reserved - Jonifar lina

341

<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#navigateurs").change(onSelectChange); }); function onSelectChange(){ var selected = $("#navigateurs option:selected"); var output = ""; if(selected.val() != 0){ output = "Votre slection : " + selected.text(); } $("#resultat").html(output); } </script> </head> <body> <p>Votre navigateur est ?</p> <form action=""> <select id="navigateurs"> <option selected="selected" value="0">Tous les navigateurs</option> <option value="1">Internet Explorer</option> <option value="2">Firefox</option> <option value="3">Opera</option> <option value="4">Safari</option> <option value="5">Google</option> </select> </form> <br /> <div id="resultat"></div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

342

Applications
1.Slectionnertouteslescasescocher
Trsenvoguesurlessitesrcents,cescriptoffrelapossibilitlutilisateurdactivertouteslescasescocheren uneseuleaction.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tous").click(function(){ var checked_status = this.checked; $("input[name=case]").each(function(){ this.checked = checked_status;

ENI Editions - All rigths reserved - Jonifar lina

- 1-

343

}); }); }); </script> </head> <body> La librairie jQuery est :<br /> <input type="checkbox" name="case" />Concise<br /> <input type="checkbox" name="case" />Souple<br /> <input type="checkbox" name="case" />Compacte<br /> <input type="checkbox" name="case" />Rapide<br /> <input type="checkbox" name="case" />Compatible<br /> <br /> <input type="checkbox" id="tous" /><b>Slectionner tout</b> </body> </html> LescriptjQuery: <script type="text/javascript"> $(document).ready(function(){ $("#tous").click(function(){ var checked_status = this.checked; $("input[name=case]").each(function(){ this.checked = checked_status; }); }); }); </script> Explications: $(document).ready(function(){ $("#tous").click(function(){ InitialisationdejQueryetauclicdelacasecocherpermettantdeslectionnertousleslments. var checked_status = this.checked; Lavariablechecked_statusnotequelacaseestcoche. $("input[name=case]").each(function(){ this.checked = checked_status; }); Lamthodeeach()passeenrevuetouteslescasescocher( input[name=case])etcochecellesci. }); }); Findescript.

2.Confirmerunecommande
Reprenonsdansunelignedetexte,leslmentscochsdunformulaire.

- 2-

ENI Editions - All rigths reserved - Jonifar lina

344

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $(input:checkbox[name=dessert]).click(function(){ var check = this.checked; var val = $(this).val(); var keys = $("input[name=commande]").val().split(, ); var newKeys = new Array(); var inArray = false; $.each(keys, function(i){ var key=this; if (key == val) { if (check){ newKeys.push(key); } inArray = true; } else {

ENI Editions - All rigths reserved - Jonifar lina

- 3-

345

newKeys.push(key); } }); if (!inArray && check) newKeys.push(val); $("input[name=commande]").val(newKeys.join( + )); }); }); //]]> </script> </head> <body> Choisissez votre dessert : <form action=""> <input value="chocolat" type="checkbox" name="dessert" /> Chocolat<br /> <input value="chantilly" type="checkbox" name="dessert" /> Chantilly<br /> <input value="meringue" type="checkbox" name="dessert" /> Meringue<br /> <input value="biscuit" type="checkbox" name="dessert" /> Biscuit<br /> <br /> Votre commande : <br /> <input type="text" name="commande" size="45" value="Glace vanille" /> </form> </body> </html> Explicationsduscript $(document).ready(function() { $(input:checkbox[name=dessert]).click(function(){ InitialisationdejQueryetauclicdunecasecocher. var check = this.checked; var val = $(this).val(); Lavariablechecknotequelacaseestcoche.Lavariablevalrcuprelavaleurcorrespondantedelacase. var keys = $("input[name=commande]").val().split(, ); Prparation du contenu de la ligne de texte qui confirme la commande en reprenant la valeur initiale de lattribut value. var newKeys = new Array(); var inArray = false; Crationduntableau(Array)appelnewKeysdestincontenirlesintitulsdescasescoches. $.each(keys, function(i){ var key=this; if (key == val) { if (check){ newKeys.push(key); } inArray = true; } else { newKeys.push(key); } }); Par la mthode JavaScript classique Array.push(), les intituls des cases coches sont ajouts la fin du tableau newkeys. if (!inArray && check) newKeys.push(val);

- 4-

ENI Editions - All rigths reserved - Jonifar lina

346

$("input[name=commande]").val(newKeys.join( + )); Laconfirmationdelacommandesaffichedanslalignedetexteparlamodificationdesonattributvalue. }); }); Findescript.

3.Unformulairedinscriptionoriginal
Les formulaires de contact ou dinscription sont une partie indispensable de tout site Web. Ils sont souvent implmentsdansunepagespareetfontrarementpreuvedecrativit.Cetexempleillustrecommentcreravec jQuery,unformulairedisponibledslapagedaccueil.

AuclicdeladivisionFormulairedinscription,leformulairedecontactapparatenglissantverticalementverslebas.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <style type="text/css">

ENI Editions - All rigths reserved - Jonifar lina

- 5-

347

body{ margin: 0px; font-family: Arial, Sans-Serif; font-size: 0.75em;} .box { margin: 0px auto; background-color: #ffffff; text-align: justify; position: relative;} .content { padding: 20px 30px;} #container { position: absolute; left: 100px; float: right;} #contactForm { height: 117px; width: 245px; background-color: #9cf; display: none;} #contactForm fieldset { padding: 30px; border: none; } #contactForm label { display: block; color: black;} #contactForm input[type=text] { display: block; border: solid 1px #4d3a24; margin-bottom: 10px; height: 24px;} #contactForm input[type=submit] { background-color: #4d3a24; border: solid 1px #23150c; color: #fecd28; padding: 5px;} #contact { height: 30px; width: 246px; background-color: #9cf; border: 1px solid black; display: block; cursor: pointer; font-size: 14px; padding-top: 7px; text-align: center;} </style> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#contact").click(function(){ if ($("#contactForm").is(":hidden")){ $("#contactForm").slideDown("slow"); } else{ $("#contactForm").slideUp("slow"); } }); }); function closeForm(){ $("#contactForm").slideUp("slow"); } </script> </head> <body> <div class="box"> <div id="container"> <div id="contactForm"> <fieldset> <label for="Name">Nom *</label> <input id="name" type="text" /> <label for="Email">Adresse Email *</label> <input id="Email" type="text" /> <input id="envoi" type="submit" name="submit" onclick="closeForm()" /> </fieldset> </div> <div id="contact">Formulaire dinscription</div> </div>

- 6-

ENI Editions - All rigths reserved - Jonifar lina

348

<div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sodales, dolor ut tempor sollicitudin, nulla lacus sodales ipsum, vitae commodo dui nisi et sapien. Phasellus ac nisl. Vivamus dignissim justo iaculis mauris. Suspendisse adipiscing, arcu sit amet tincidunt pretium, lorem mauris ullamcorper erat, blandit auctor erat massa sit amet neque. ... </p> </div> </div> </body> </html> LescriptjQueryest(cestadedevotretude)relativementsimple. $(document).ready(function(){ $("#contact").click(function(){ AuchargementduDOMetauclicdeladivisionidentifieparcontact. if ($("#contactForm").is(":hidden")){ $("#contactForm").slideDown("slow");} Sileformulairedecontact(contactForm)estcach(is(":hidden")),celuiciapparatenglissantlentementverslebas (slideDown("slow")). else{ $("#contactForm").slideUp("slow"); } Sinon,ilremonte(slideUp("slow"))pourtrouversapositioninitiale. }); }); Finduready. function closeForm(){ $("#contactForm").slideUp("slow"); } Reste dfinir la fonction (closeForm()) associe au bouton de soumission. Celleci fait remonter le formulaire (slideUp("slow"))sapositioninitiale.

ENI Editions - All rigths reserved - Jonifar lina

- 7-

349

Introduction
Les plugins jQuery sont des scripts ddis des tches spcifiques comme, par exemple, le tri dun tableau, limplmentationduncarrouseldimagesoulavalidationdeformulaires. Ces plugins, initis par la communaut jQuery, sont nombreux, gnralement dexcellentes qualits et souvent librementdisponiblessurlatoile.Unaperudeleurvaritpeuttreeffectuladresse:http://plugins.jquery.com/ ouhttp://www.julienverkest.fr/22/11/2007/240pluginsjquery/ Ces plugins gnrent un gain de temps prcieux en vitant de devoir rcrire un code qui a dj t trait par ailleurs. Ils permettent parfois aussi, avouonsle, de se lancer dans des oprations qui dpassent le niveau de programmationduconcepteurmoyenenjQuery.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

350

ConcevoirunpluginjQuery
1.Aspectsthoriques
LcrituredunpluginjQuerypassepardestapesbienprcisesetcertainesrglesbienprcisessontrespecter. LepluginjQueryprendlaformedunfichierJavaScriptexterne(extension.js)quiseplaceimmdiatementaprsla balisedappeldejQuery(voirlasectionUtiliserunpluginjQueryduprsentchapitre)soit: <script type="text/javascript" src="jquery.js"></script> Nommerleplugin Unplugindoittoujourssenommersouslaformejquery.nom_du_plugin.js.Ilseraainsiimmdiatementidentifiable. Isolerlecode Danscefichierjsnouvellementcr,ilfautengloberlecodeduplugindansunefonctionanonyme.Decettemanire, touteslesvariablesdupluginnerentrerontpasenconflitaveclesautresscriptsdelapage. (function () { // code jQuery }) () Profitons pour passer la variable jQuery par son alias $ cette fonction, ce qui permettra dutiliser la variable $ lintrieurdecelleci. (function ($) { // code jQuery }) () AjouterlanouvellemthodejQuery Noussommespresqueprtscrirenotreplugin.IlfautencoreajoutercettenouvellemthodeauxobjetsjQuery parlinstruction$.fn.nom_du_plug-in.DanscettefonctionlemotclthisreprsenteralobjetjQueryslectionnpar lutilisateurduplugin. (function($) { $.fn.nom_du_plugin = function () { // code jQuery }; }) (jQuery) LadocumentationdejQueryconcernantlaconceptiondepluginsinsistesurlefaitquechaquemthodeoufonction doitbienseterminerparlepointvirgule.Sinon,lecoderisquedenepasfonctionneraprscompressionduplugin. Lesrglesessentiellesdellaborationdunpluginsontainsipassesenrevue.Cependant,ilrestedespointsne pasperdredevue:
G

Lorsqueplusieurslmentssontourisquentdtreslectionns,lamthode each()estrecommandepour bouclersurleslmentsslectionns. Ilestutiledepasserdesparamtreslamthodedupluginpourfaciliterlapersonnalisationdeceluicipar lutilisateur. Saufexception,leplugindoitretournerlobjettrait(returnthis).

Lefindufin,quoiquesouventpasindispensable,estdecompresserlecodepourrduireletempsdetlchargement du plugin. Il existe une petite application en ligne http://dean.edwards.name/packer/ qui ralise ceci merveille. Effectuezuncopier/collerdevotrecodedanslechampdeformulaire,cochezBase62encodeet/ou Shrinkvariables etcliquezsurleboutonPack.Etlersultatsaffiche. Lecodeobtenucommencecommeceluici:

ENI Editions - All rigths reserved - Jonifar lina

- 1-

351

eval(function(p,a,c,k,e,r){e=function(c){return(c

2.Uneapplicationpratique
Leplugindenotreexempleajouteuneinfobulleexplicativesurdesliens.

La premire tape consiste nommer le plugin. Appelonsle, suivant les conventions de jQuery, jquery.mon_infobulle.js. Aprsavoirouvertunditeurdetexte,lencodagedeceluicipeutdbuter. CommenonspardterminerlenvironnementjQuery. (function($){ jQuery.fn.mon_infobulle = function(options) { // code du plug-in }; })(jQuery) Incluonsmaintenantlecodedupluginproprementdit. (function($){ jQuery.fn.mon_infobulle = function(options) { var element = document.createElement("div"); $(element).addClass(options.infobullecss).hide(); document.body.appendChild(element); return this.each(function() { $(this).hover(function() { $(element).show(); $(element).html($(this).attr("rel")); $(this).mousemove(function(e) { $(element).css({ "position": "absolute", "top": e.pageY + options.offsetY, "left": e.pageX + options.offsetX }); }); }, function() { $(element).hide() }); }); }; })(jQuery) Le script cre une division <div> (celle de linfobulle), laquelle il adjoint la classe de style infobullecss. Cette division est ajoute au corps ( body) du document. Au survol du lien par le curseur de la souris, cette division est affiche. Le contenu de celleci reprend les lments de lattribut rel du lien. Il est prudent de prvoir un lger dcalagehorizontaletverticaldelinfobulleparrapportaulien(leftettop). Troislmentsdoiventdonctreparamtrs:

- 2-

ENI Editions - All rigths reserved - Jonifar lina

352

Laclassequiprendenchargelaspectdelinfobulle(options.infobullecss). Ledcalageverticaldelinfobulleparrapportaulien(options.offsetY). Ledcalagehorizontaldelinfobulleparrapportaulien(options.offsetX).

Etvoilnotrepluginprtlemploi!

ENI Editions - All rigths reserved - Jonifar lina

- 3-

353

UtiliserunpluginjQuery
Lutilisationdunpluginestdesplussimples.Ilsuffitdelappeler(parsonnom)danslecodedelapage. Exemple Exploitonsnotreplugindansunepageavecplusieursliens. PartonsdudocumentHtmlinitial. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> </head> <style type=text/css> .infobulle { width: 150px; padding: 3px; background-color: #9CF; border: black 1px solid; color: black;} a { color: black} </style> <body> <p><a href="#" rel="Explication du lien 1" class="pop">Lien 1</a></p> <p><a href="#" rel="Explication du lien 2" class="pop">Lien 2</a></p> <p><a href="#" rel="Explication du lien 3" class="pop">Lien 3</a></p> </body> </html> Remarquons: Quelattributreldesbalisesdelien<a>contientdjletextedelinfobulle. Quelaspectdelinfobulleestdjprvuparlaclasse.infobulle. Passonsauscript: <script type="text/javascript"> $(document).ready(function(){ var options = { offsetX: 30, offsetY: 5, infobullecss: "infobulle" }; $("a.pop").mon_infobulle(options); }); </script> Quelquesexplications... var options = { offsetX: 30, offsetY: 5, infobullecss: "infobulle" }; Dterminelesparamtrespasssauplugin,soitledcalagevertical,horizontaletlenomdelaclassedestyledela fentreinfobulle.

ENI Editions - All rigths reserved - Jonifar lina

- 1-

354

$("a.pop").mon_infobulle(options); Pourlesliensdotsdelaclassepop,lepluginmon_infobulleestappel. Lefichierfinalcompletdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.mon_infobulle.js"></script> <script type="text/javascript"> $(document).ready(function(){ var options = { offsetX: 30, offsetY: 5, infobullecss: "infobulle" }; $("a.info").mon_infobulle(options); }); </script> <style type="text/css"> .infobulle { width: 150px; padding: 3px; background-color: #9CF; border: black 1px solid; color: black;} a { color: black} </style> </head> <body> <p><a href="#" rel="Explication du lien 1" class="info">Lien 1</a></p> <p><a href="#" rel="Explication du lien 2" class="info">Lien 2</a></p> <p><a href="#" rel="Explication du lien 3" class="info">Lien 3</a></p> </body> </html>

- 2-

ENI Editions - All rigths reserved - Jonifar lina

355

Quelquesplugins
Nous avons retenu quelques exemples de plugins. Pour pleinement apprcier le ct spectaculaire de ceuxci,nous vousinvitonsplusquejamais,consulterlespacedetlchargementddicelivre.

1.Denouveauxmessagesdalerte
IlfautbienadmettrequelaspectdesbotesdedialoguenapasbeaucoupvoludepuisledbutduHtmletque celuici est devenu quelque peu dsuet. Les concepteurs peuvent souhaiter en changer lapparence. Cest ce que proposelepluginjquery.alerts.jsdisponibleladresse:http://abeautifulsite.net/notebook/87 Aprs avoir lu la documentation (en anglais), il faut tlcharger les fichiers jquery.alerts.js, jquery.alerts.css ainsi queledossierimages.ToutcecidoitalorstreinclusdansledossiercontenantlapageHtml. LedocumentHtmldevientalors: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.alerts.js"></script> <link rel="stylesheet" type="text/css" href="jquery.alerts.css" /> <script type="text/javascript"> $(document).ready(function(){ $("#bouton_alerte").click( function() { jAlert(Ceci est une alerte personnalise, Message d\alerte); }); }); </script> </head> <body> <p><input type="button" id="bouton_alerte" value="Message" /></p> </body> </html>

Quelquescommentairesconcernantlepluginetlescript. Lappeldupluginseffectuepar: <script type="text/javascript" src="jquery.alerts.js"></script> Ilnefautpasoublierderelierlapagelafeuilledestyleexterne:

ENI Editions - All rigths reserved - Jonifar lina

- 1-

356

<link rel="stylesheet" type="text/css" href="jquery.alerts.css"> LepluginsinitialisesimplementparjAlertaveclesparamtressouhaits. jAlert(Ceci est une alerte personnalise, Message d\alerte); Lemmepluginpermetdemodifierlesbotesdeconfirmationetdinvite.

2.Desbordsarrondisetvaris
Lajoutdunebordureunedivision<div>entranedesbordsrectangulaires.Lepluginjquery.corner.jspermetde varieraismentleurprsentation. Le plugin peut tre tlcharg ladresse http://plugins.jquery.com/project/corners et la documentation est consultablelapagehttp://www.malsup.com/jquery/corner/. Exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

- 2-

ENI Editions - All rigths reserved - Jonifar lina

357

<head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.corner.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(#div1).corner(); $(#div2).corner("bite 7px"); $(#div3).corner("dog tl br 12px"); }); </script> <style type="text/css"> div.demo { margin:15px; width: 220px; height: 50px; background: #9cf;} </style> </head> <body> <div id="div1" class="demo"></div> <div id="div2" class="demo"></div> <div id="div3" class="demo"></div> </body> </html> Notons: Lappeldupluginpar<script type="text/javascript" src="jquery.corner.js"> </script>. Limplmentation des bords se ralise, aprs avoir consult la documentation, par $(#div1).corner(), $(#div2).corner("bite 7px")et$(#div3).corner("dog tl br 12px").

3.Ajouteruneombre
Lombrage de texte ou dautres lments fait partie intgrante des recommandations CSS3. Cet effet de style est attenduavecimpatienceparlesdesignersdesitesWebpoursonapportnouveaudanslaprsentationdespages. Cette recommandation commence tre reprise par les navigateurs de la dernire gnration mais de Firefox Opera en passant par Internet Explorer, chacun y va de sa mthode personnelle. Voil une belle source dincompatibilitenperspective.LepluginjQueryvouspropose,doresetdj,unesolutiondirectementapplicable etsurtoutcompatiblepourtouslesnavigateursrcents. Lescriptesttlchargeableladressehttp://eyebulb.com/dropshadow/.Lesiteproposeunassistantenlignepour vouspermettredeconfigureretvisualiserunesriedeparamtrescommeledportverticalethorizontaldelombre, sadispersionetsonopacit.

Le plugin nest pas trs facile configurer car certains aspects tiennent quelque peu du domaine des trucs et astuces(labalise<span>pourletexte,limageenarrireplandunedivision).

ENI Editions - All rigths reserved - Jonifar lina

- 3-

358

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript" src="jquery.dropshadow.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("h2 span").dropShadow(); $("#test").dropShadow({left: 4, top: 4, blur: 2, opacity: 0.5, color: "#000"}); }); </script> <style type="text/css"> body{ font-family: serif;} #test { border: white 2px outset; width: 150px; height: 156px; background: url(arbre.jpg) no-repeat; margin-left : 50px;} </style> </head> <body> <h2><span>Ombre</span> <span>porte</span> <span>en</span> <span>jQuery</span></h2> <div id="test"></div> </body> </html>

4.Unglisser/dposer(draganddrop)
TrsenvoguesurleWeb2.0,leglisser/dposeroudraganddropestsouventassezcomplexemettreenplaceen JavaScriptclassique.Leplugineasydragralise,commesonnomlesuggre,cetteoprationtrsfacilement. La documentation et le fichier du plugin jquery.easydrag.js http://fromvega.com/wordpress/2007/07/14/easydragjqueryplugin/
- 4 ENI Editions - All rigths reserved - Jonifar lina

sont

disponibles

ladresse :

359

Unefoislefichier jquery.easydrag.jsinclusdanslemmedossierquelapageHtml,cettefonctiondeglisser/dposer estdisponible. Exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.easydrag.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#box").easydrag(); }); </script> <style type="text/css"> div { position: relative; width: 75px; height: 75px; border: 1px solid black; background-color: #9cf;} </style> </head> <body> <div id="box"></div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 5-

360

5.Redimensionnerlesdivisions
Leredimensionnementdesbotes(divisions)rendupossibleparcepluginestunplusassezspectaculaireetoriginal. Les fichiers jqDnR.js et dimensions.js http://dev.iceburg.net/jquery/jqDnR/ ncessaires au plugin sont tlchargeables ladresse

Cescriptpermetenoutre,commelepluginprcdentdedplacerleslments(drag/drop). Exemple

- 6-

ENI Editions - All rigths reserved - Jonifar lina

361

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jqDnR.js"></script> <script type="text/javascript" src="dimensions.js"></script> <script type="text/javascript"> $(document).ready(function() { $(#ex1).jqResize(.jqResize); }); </script> <style type="text/css"> .jqHandle { background: red; height:15px;} .jqDrag { width: 100%; cursor: move;} .jqResize { width: 15px; position: absolute; bottom: 0; right: 0; cursor: se-resize;} .jqDnR { z-index: 3; position: relative; width: 210px; font-size: 0.87em; color: black; margin: 5px 10px 10px 10px; padding: 8px; background-color: #EEE; border: 1px solid black; } </style> </head> <body> <div id="ex1" class="jqDnR"> Bote dexemple<br /> Vous pouvez me redimensionner ! <div class="jqHandle jqResize"></div> </div> </body> </html>

6.Uncarrouseldimages
ENI Editions - All rigths reserved - Jonifar lina - 7-

362

Lescarrouselsdimagessonttrsapprcisdesdesignerscarilsoffrentlapossibilitlutilisateurdevisionnerde multiplesimages,toutenleurconsacrantuneplacerduitesurlapage. LepluginjCarouselestlundesplusrputsetestdisponibleladresse :http://sorgalla.com/projects/jcarousel/ Il permet de contrler des images disposes horizontalement ou verticalement. Cellesci peuvent tre du contenu HtmlclassiqueouchargesdynamiquementpardelAJAX.Ellespeuventdfileravecousansanimation. Exemple Lesimagesdelexemplesontdisponiblesdanslespacedetlchargementconsacrcetouvrage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jcarousel.js"></script>

- 8-

ENI Editions - All rigths reserved - Jonifar lina

363

<link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" /> <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" /> <script type="text/javascript"> jQuery(document).ready(function() { jQuery(#mycarousel).jcarousel(); }); </script> </head> <body> <div id="wrap"> <h3>Un carrousel simple</h3> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="a.jpg" width="75" height="75" alt="" /></li> <li><img src="b.jpg" width="75" height="75" alt="" /></li> <li><img src="c.jpg" width="75" height="75" alt="" /></li> <li><img src="d.jpg" width="75" height="75" alt="" /></li> <li><img src="e.jpg" width="75" height="75" alt="" /></li> <li><img src="f.jpg" width="75" height="75" alt="" /></li> <li><img src="g.jpg" width="75" height="75" alt="" /></li> <li><img src="h.jpg" width="75" height="75" alt="" /></li> <li><img src="i.jpg" width="75" height="75" alt="" /></li> <li><img src="j.jpg" width="75" height="75" alt="" /></li> </ul> </div> </body> </html>

7.UnmenufaonMac
Le plugin jqDock (http://www.wizzud.com/jqDock/) transforme une srie dimages en un menu qui nest pas sans rappelerlafonctionnalitDockdelenvironnementgraphiqueduMacOSX. Ladocumentation(enanglais)estparticulirementsoigneetdtaille. Exemple Lespetitesicnesutilisesdanslexemplesontdisponiblesdanslespacedetlchargement.

ENI Editions - All rigths reserved - Jonifar lina

- 9-

364

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jqDock.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript"> //<![CDATA[ jQuery(function($){ $(div.demo>img).each(function(i){ $(this).one(click, function(){ location.href = index.php?dt=+(i%5); return false; }); }); $(div.demo).each(function(i){ var opts = { align: [ bottom, right, top , middle, left, center ][i] || bottom , size: [ 48 , 48 , 48 , 48 , 36 , 60 ][i] || 36 //default , distance: [ 60 , 60 , 60 , 60 , 48 , 80 ][i] || 54 //default , coefficient : [ 1.5 , 1.5 , 1.5 , 1 , 1.5 , 1.5 ][i] || 1.5 //default , labels: [ true , mc , true , br , true , false ][i] || false //default , duration: 500 //default }; $(this).jqDock(opts); }); $(div.demo a>img).not($(#menu1 a>img)).bind(click, function(){ var Href = $(this).parent().get(0).href; if(Href && !/^javascript:/i.test(Href)){ location.href = Href; }else{ $(this).parent().trigger(click); } return false; }); }); //]]> </script> </head>
- 10 ENI Editions - All rigths reserved - Jonifar lina

365

<body> <div id="menu6" class="demo"> <a href="#"><img alt="" src="doc.png" <a href="#"><img alt="" src="htm.png" <a href="#"><img alt="" src="ini.png" <a href="#"><img alt="" src="mp3.png" <a href="#"><img alt="" src="pdf.png" <a href="#"><img alt="" src="swf.png" </div> </body> </html>

/></a> /></a> /></a> /></a> /></a> /></a>

8.Lavalidationdeformulaires
Autre vedette des plugins, le " jQuery Validation" dont le tlchargement et la documentation sont disponibles ladresse:http://bassistance.de/jqueryplugins/jquerypluginvalidation/ Cepluginvrifielesformulairesen19points(adresseemail valide, mention obligatoire, format de date, donnes numriques,numrodecartedecrdit,etc.). Pouruneutilisationcourante,ilfautveillermettrelesmessagesderreur(inclusdansleplugin)enfranais. Exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#formulaire").validate(); }); </script> <style type="text/css"> label { width: 5em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }

ENI Editions - All rigths reserved - Jonifar lina

- 11 -

366

p { clear: both; } .submit { margin-left: 6em; } </style> </head> <body> <form id="formulaire" action=""> <p> <label for="cnom">Nom * :</label> <input type="text" id="cnom" name="nom" size="20" class="required" minlength="2" /> </p> <p> <label for="cprenom">Prnom :</label> <input type="text" id="cprenom" name="prenom" size="20" minlength="2" /> </p> <p><label for="cemail">Email * :</label> <input type="text" id="cemail" name="email" size="20" class="required email" /> </p> <p> <input class="submit" type="submit" value="Soumettre"/> </p> </form> </body> </html>

9.Desgraphiquespartirduntableau
Ilestindubitablequun graphique est souvent plus explicite quun tableau de donnes. Pour afficher un graphique danslespagesHtml,ilnyavaitcommealternativequelacapturedcrandutableaudansuntableurdustyleExcel. Le plugin visualize de jQuery permet de crer la vole un graphique. Celuici saffiche alors directement dans la page.Intressantsurtoutlorsqueletableaudedonnesconnatdesmisesjourfrquentes.Ladocumentationetle tlchargement sont disponibles ladresse : http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ Exemple Aprsavoirincluslesdiffrentslmentsduplugin(visualize.jQuery.js,visualize.jQuery.cssetexcanvas.compiled.js) dansledossierdenotrepage,exprimentonscepluginpourlemoinssurprenant. Soitletableaudedonnessuivant:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">


- 12 ENI Editions - All rigths reserved - Jonifar lina

367

<head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title> <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <link type="text/css" rel="stylesheet" href="demopage.css"/> <script type="text/javascript" src="jquery.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ $(table).visualize({type: pie, pieMargin: 10, title: Relv par individu}); $(table).visualize({type: line}); $(table).visualize(); }); </script> </head> <body> <table > <caption>Relev individuel par item</caption> <thead> <tr> <td></td> <th>Item 1</th> <th>Item 2</th> <th>Item 3</th> <th>Item 4</th> <th>Item 5</th> </tr> </thead> <tbody> <tr> <th>A</th> <td>190</td> <td>160</td> <td>40</td> <td>120</td> <td>100</td> </tr> <tr> <th>B</th> <td>5</td> <td>40</td> <td>30</td> <td>45</td> <td>80</td> </tr> <tr> <th>C</th> <td>10</td> <td>180</td> <td>10</td> <td>85</td> <td>105</td> </tr> <tr> <th>D</th> <td>40</td> <td>80</td> <td>90</td> <td>25</td> <td>125</td> </tr> </tbody> </table>

ENI Editions - All rigths reserved - Jonifar lina

- 13 -

368

</body> </html> Leplugindelexempleproduitautomatiquement3graphiques:

10.Trieruntableaudedonnes
Autre merveille de programmation, le plugin jQuery "tablesorter" qui permet de trier la vole les donnes de nimportequellecolonneduntableauparordreascendantoudescendant.Lescriptdtecteautomatiquementletype dinformationscontenudanslacolonne.Ilreconnaitentreautres,lesnombres,lesdates,lesadressesIP,etc. Ladocumentation(liresoigneusement)etletlchargementsontdisponiblesladresse:http://tablesorter.com Exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>jQuery</title>

- 14 -

ENI Editions - All rigths reserved - Jonifar lina

369

<link rel="stylesheet" href="blue/style.css" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript"> $(document).ready(function() { $("table").tablesorter({ sortList: [[0,0]] }); }); </script> </head> <body> <p></p> <div id="demo"> <table cellspacing="1" class="tablesorter"> <thead> <tr> <th>Nom</th> <th>Prnom</th> <th>Age</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Masurelle</td> <td>Sophie</td> <td>28</td> <td>9.99 </td> </tr> <tr> <td>Dupire</td> <td>Alain</td> <td>33</td> <td>19.99 </td> </tr> <tr> <td>Bonvin</td> <td>Pierre</td> <td>18</td> <td>15.89 </td> </tr> <tr> <td>Balland</td> <td>Amandine</td> <td>45</td> <td>153.19 </td> </tr> <tr> <td>Vilmot</td> <td>Albert</td> <td>22</td> <td>13.19 </td> </tr> <tr> <td>Dehant</td> <td>Charlotte</td> <td>22</td> <td>42.98 </td> </tr> </tbody> </table> </div> </body> </html>

ENI Editions - All rigths reserved - Jonifar lina

- 15 -

370

Onremarqueraqueleplugintelquilestconfiguratriselonunordreascendantlapremirecolonne(sortList: [[0,0]]). Ilestpossibledetrierselonlge:

oudeffectueruntriselonlacolonne"Total".

- 16 -

ENI Editions - All rigths reserved - Jonifar lina

371

ENI Editions - All rigths reserved - Jonifar lina

- 17 -

372