Jquery - Le Framework JavaScript Du Web 2.0 PDF

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.
- 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.
- 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.
- 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.
- 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.
- 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;
- 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-
<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.
- 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-
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.
- 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.
- 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/
- 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>
- 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>
- 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-
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>
- 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-
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>
- 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-
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")).
- 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>
- 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-
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>
- 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-
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>
- 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-
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>
- 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-
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>
- 9-
31
$("li:not(:first, :last)").css("background", "#9cf"); Slectionnetousleslmentsdeliste<li>sauflapremireetdernireoccurrencedeceuxci. Ilfauttreattentiflordreetauplacementdesparenthsesouvrantesetsurtoutfermantes.
- 10 -
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>
- 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-
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;}
- 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-
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(){
- 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-
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");
- 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-
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
- 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-
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>
- 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-
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 <div> 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")).
- 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>
- 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-
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">
- 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-
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>
- 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-
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".
- 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-
53
Lesslecteursetfiltresdeformulaires
LesformulairesenjQuerymritentuneplacepartdansnotretudedujQuery.Ainsilesslecteursetfiltresrelatifs auxformulairesserontabordsauchapitreLesformulaires.
- 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.
- 1-
55
Introduction
LesnombreuxslecteursdejQuerymisenplace,nousentamonsaveccechapitre,laspectdynamiqueduJavaScriptet dejQueryquiestdemodifierleslments.
- 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>
- 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.
- 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-
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>
- 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>
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-
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).
- 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">
- 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 <span> 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;}
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 <span> est :<div></div> </body> </html>
- 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>
- 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-
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>
- 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>
- 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-
73
<div> <img src="pansolaire1.png" alt="Panneau solaire 1"/> </div> </body> </html>
- 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>
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-
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">
- 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-
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>
- 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
- 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-
81
Introduction
EstilncessairedesoulignerlimportancepriseparlesfeuillesdestyledanslcritureducodedespagesWeb?Avec jQuery,lamodificationdynamiquedespropritsdestyleCSSservlefacileimplmenter. Lamthodecss()tudieauxtroispremierspointsdecechapitre,nestpassansrappelerlamthodeattr()aborde auchapitreprcdent.
- 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.
- 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-
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 () {
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-
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">
- 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" />
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>
- 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.
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-
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>
- 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.
- 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()
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>
- 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.
- 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-
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>
- 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-
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.
- 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-
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" />
- 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>
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){
- 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
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;
- 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-
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;
- 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 -
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
- 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 -
111
Introduction
LesvnementssontlesdclencheursdelinteractivitapporteparleJavaScript.Ceuxcipermettentdassocierdes actionsdelutilisateur,desfonctionsetdesmthodes.AveclalibrairiejQuery,leprinciperestelemmemaiscertains gestionnairesdvnementssontadaptsetdesmthodesnouvellesintroduites.
- 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 () {
- 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-
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
- 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-
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" />
- 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-
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
- 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-
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>");
- 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 -
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.
- 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 -
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> </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.
- 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> </p> <div class="in overout"></div> </div> <div id="afficher"></div> <div id="compteur"></div>
- 14 -
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.
- 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(){
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.
- 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.
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.
- 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.
- 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-
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" />
- 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-
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
- 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-
137
Leclicgnreunnouveauparagraphe.
En cliquant sur le paragraphe initial ou sur le paragraphe nouvellement cr, la fonction ajoute nouveau un paragraphe.Etainsidesuite...
- 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.
- 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-
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
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-
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>
- 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;
- 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-
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.
- 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-
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:
- 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>
149
</html>
- 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.
- 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.
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">> 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-
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...);
- 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">> 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-
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:
- 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-
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 });
- 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-
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");});
1.Faireglisserunedivision
Auclicsurlebouton,nousallonsdroulerunedivision.
- 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-
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;
- 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); });
- 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 />
165
<a href="">Point 3</a> </div> </body> </html>
- 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");});
1.Uneapparitionetdisparitionprogressive
Mettonsen uvrecesmthodesjQuerysuruneimage. Lesimagesdecetexemplesontprsentesdanslespacedetlchargement.
- 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-
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.
- 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-
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>
- 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-
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>
- 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");});
1.Illustrationdubasculement
Unscriptsimplepourdcrirecettefonctiontoggle().
- 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
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>
- 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.
- 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">
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>
- 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.
1.Uneanimationsurunedivision
- 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-
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;
- 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-
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).
- 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-
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:
- 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-
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>
- 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>
- 1-
190
- 2-
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>
- 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-
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
- 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>
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-
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;}
- 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-
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>
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-
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>
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-
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>
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-
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>
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-
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>
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-
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>
- 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-
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;}
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-
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>
- 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-
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;}
- 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-
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.
- 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-
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>
- 3-
219
Introduction
LintgrationduDOMaprofondmentmodifilcritureduJavaScriptparsontraagedeslments.Maissavritable rvolutionest,sansconteste,lapossibilitdemodifieretdajouterlavoledeslmentsdanslapageHtml.
- 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().
- 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>
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;}
- 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-
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;}
- 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-
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
- 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-
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");
- 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-
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" />
- 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-
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>
- 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;
- 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-
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:
- 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-
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;
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;
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>
- 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>
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-
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().
- 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-
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 () {
- 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-
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:
- 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-
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>
- 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.
- 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-
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>
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-
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.
- 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>
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"
- 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-
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
- 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 -
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.
- 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>
- 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-
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>
- 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>
- 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-
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.
- 3-
266
$("td").slice(0).addClass("bleu"); Tousleslmentssontainsireprisdanslasquence.
- 4-
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.
- 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-
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>
- 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.
- 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;}
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:
- 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">
- 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-
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>
- 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-
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>
- 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>
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(); } }); }); //]]>
- 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-
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>
- 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;
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.
- 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 -
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);
- 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 -
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.
- 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">
- 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() {

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>
- 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-
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:
- 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">
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.
- 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-
296
</script> <style type="text/css"> button { margin-top: 10px;} </style> </head> <body> <button id="bouton">Script</button> </body> </html>
- 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
- 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-
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.
- 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-
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>
- 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({});
- 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>
- 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-
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[
- 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-
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>
- 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-
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>
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"> </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-
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"> </p> </body> </html>
- 3-
312
- 4-
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.
- 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-
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>
- 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-
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.
- 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-
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.
- 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-
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>
- 9-
322
- 10 -
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.
- 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>
- 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>" +
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.
- 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>
- 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-
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"
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-
331
Introduction
MmesijQuerynapporteriendespcifiquementnouveauenlamatire,nousconsacronsunchapitreparticulieraux formulairescarilsreprsententtoujoursundveloppementparticulierdansllaborationdespagesWeb.
- 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.
- 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-
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.
- 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-
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>
- 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;}
- 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-
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
- 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-
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>
- 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;
- 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-
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 {
- 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-
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">
- 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-
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.
- 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.
- 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:
- 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-
352
Laclassequiprendenchargelaspectdelinfobulle(options.infobullecss). Ledcalageverticaldelinfobulleparrapportaulien(options.offsetY). Ledcalagehorizontaldelinfobulleparrapportaulien(options.offsetX).
Etvoilnotrepluginprtlemploi!
- 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.
- 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-
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:
- 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-
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).
- 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/
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>
- 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-
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
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-
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.
- 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>
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; }
- 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">

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>  <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>
- 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 -
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>
- 15 -
370
Onremarqueraqueleplugintelquilestconfiguratriselonunordreascendantlapremirecolonne(sortList: [[0,0]]). Ilestpossibledetrierselonlge:
oudeffectueruntriselonlacolonne"Total".
- 16 -
371
- 17 -
372

Jquery - Le Framework JavaScript Du Web 2.0 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery - Le Framework JavaScript Du Web 2.0 PDF

Uploaded by

Copyright:

Available Formats

Introduction

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

<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.

ENI Editions - All rigths reserved - Jonifar lina

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

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

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");

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

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

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina

ENI Editions - All rigths reserved - Jonifar lina