jQuery - Le framework JavaScript du Web 2.0.pdf

Introduction

Depuis1995,soitdsledbutdelouvertureduwebaugrandpublic,leJavaScriptestlecompagnonfidleduHTML.Nanmoins,ilfautadmettrequesareconnaissanceparlesdveloppeursatlente.Cependant,depuislapparitiondAJAX, la situation a totalement volu. Les designers lui dcouvrent des qualits jusque l inexploites et leJavaScriptacquiertenfinseslettresdenoblesse.

JavaScriptestcependantunlangagedeprogrammationpartentireavectouteslesdifficultsdapprentissagequecela implique. Lidede concevoir un frameworkddi JavaScript pour accrotre laproductivitdedveloppementsestainsiimpose.CestalorsquapparatleframeworkjQuery.

MaisjQuery,grce lapproche innovantedesonjeune inventeurJohnResig,reconsidrecompltement lapportetlcritureduJavaScript.Eneffet,iltaitimpratifdetenircompteduDOMetdesfeuillesdestyleCSSapparusdepuislanaissanceduJavaScript.Ilimportaitgalementderevenirunesyntaxeplusintuitivecardelaversion1.1initialelaversion1.7actuelle,lvolutionduJavaScriptsestraliseauprixdunecomplexitcroissante.

LesgrandsnomsdelinformatiqueetdInternetcommeGoogle,NokiaetMicrosoftnesontpasrestsenresteetontrapidementapportleurreconnaissancejQuery.Ainsi,lalibrairiejQueryestmaintenantinclusedanslasuitedoutilsdedveloppementVisualStudiodeMicrosoft.

Lecontexteainsiplant, ilsemblevidentquuneconnaissanceapprofondieduHTML(ouXHTML)etdes feuillesdestyleCSSestindispensable.DebonnesnotionsdeJavaScriptsontgalementsouhaites.JQuerysadresseeneffetunpublicaufaitdecesdiffrentestechniques.

Danscetouvrage,nousallonsparcourirlesdiffrentsthmesabordsparjQuery.Lauteuraprivilgiuneapprochestructureetprogressive.ChaquepointdejQueryestillustrparunexempleavantdepasserdesapplicationspluspointues.Attironslattentiondulecteursurlechapitreconsacrauxslecteurs(chapitreLesslecteursenjQuery).Ilestnonseulementlillustrationde ladiversitdejQuerypouratteindreaismentnimportequellmentdelapagemais un lment essentiel dans lapprentissage de jQuery. Suivront ensuite des sujets plus interactifs comme lamanipulationdesfeuillesdestyleouduDOM,leseffetsvisuels,lAJAXrevuparjQueryetlesplugins.

Votretudetermine,vosapplicationsWebserontnenpasdouter,plusinteractives,plusrichesetplusinnovantes,letoutavecunefacilitdcritureduJavaScriptinsouponne.

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

enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzDuxs7kOizIgLAA==-enidentnumber

1

LeretourduJavaScript

LesapplicationsWebactuellessesituentdansunenvironnementdynamique.Jamaisencorelessitesnonttaussirichesenprsentationsvisuellesetautresfonctionssoutenantlagestiondesinformations.

DslespremiresheuresduWeb,leJavaScriptatunpartenaireprivilgidanslaconceptiondespagesHtmlparlinteractivit quil permettait dajouter cellesci. Mais sa prsence et son influence restrent longtemps limites,principalementcausedesdifficultsderalisationdescriptsvraimentcompatiblesaveclesdiffrentsnavigateursdelpoque.

LapparitionduDOM(DocumentObjectModel),permettantdaccderoudemettrejourlecontenu,lastructureetlestyle 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 problmesdinteroprabilitdesscripts.

Vinrent ensuite AJAX (Asynchronous JavaScript and XML) et les requtes XMLHttpRequest associes qui donnrentnaissanceauJavaScriptasynchroneoffrantlapossibilitdemodifierunepartiedespagesWebsansdevoirrechargerlentiretdecellesci.LaportetaitouvertedesapplicationsJavaScriptbeaucoupplusrichesrpondantaumieuxausoucidinteractivitdesapplicationsWeb.Iciaussilacompatibilittaitgagnante.

Le conceptduWeb2.0,dans sesobjectifsdunemeilleureusabilitetduneplusgrandeergonomie,aquant luiencore renforc linteractivitdespageset lademandedapplicationsplustendues.Etvoil le JavaScriptpropulscommeunlmentincontournabledansledveloppementdesapplicationsWeb.

LameilleurepreuvedecerepositionnementduJavaScriptestassurmentlapparitiondenouveauxmoteursJavaScriptdanslesnavigateursrcents.QuecesoitGoogleChromeavecsonmoteurJavaScriptOpenSourceV8,OperaavecleprojetCarakan,Safaridanssaversion4ouFirefox3.5avecTraceMonkey,touscherchentamliorer(etparfoisdefaonsensible)letraitementduJavaScript.SeulInternetExplorer8estunpeulatranemaislerenouvellementdesonmoteurJavaScriptfaitpartiedesprioritsdInternetExplorer9.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzSgh0ykSizIgLAA==-enidentnumber

2

PrsentationdeJQuery

jQueryestunframeworkJavaScriptlibreetOpenSource,implantctclient,quiportesurlinteractionentreleDOM,JavaScript,AJAXetleHtml.CettelibrairieJavaScriptapourbutdesimplifierlescommandescommunesduJavaScript.LadevisedejQueryesteneffet,"criremoinspourfaireplus"(writelessdomore).

jQuery,dumoinslorigine,estluvredunseulhomme:JohnResig.CejeunesurdoudeJavaScriptdveloppalapremireversiondejQueryenjanvier2006.Ilavaitalorspeinevingtans!Silreste llmentmoteurdejQuery,ilpeutmaintenantsefaireaiderparunecommunautdepassionns.

LesspcificitsdejQuerysontnombreusesmaislessentielleestassurmentlasouplessequilapportepouraccdertousleslmentsdudocumentHtmlgrcelamultitudedeslecteursmisenplace(voirchapitreLesslecteursenjQuery).Cettecaractristiquefutdailleursretenuepourdonnerunnomceframework:jpourJavaScriptetQuerypourchercherouaccderauxlments.

Notons galement que cette librairie jQuery est en constante volution. Lesmises jour et nouvelles versions sesuccdentunrythmergulier:

Aot2006:versionstabledejQuery1.0.

Janvier2007:jQuery1.1.

Septembre2007:jQuery1.2.

Janvier2009:jQuery1.3.

Cestsurlaversion1.3.queportecetouvrage.

LaqualitdejQueryatreconnueparlesgrandscomptesduWebetdelinformatique.CitonsGoogle,Mozilla,Dell,IBM,WordPress,Nokiaetbiendautres.MicrosoftlaincorpordernirementsonlogicielVisualStudio.SacroissanceestrapideetilseposeenconcurrentsrieuxdautresframeworkcommePrototype,DojoToolkitetSciptaculouspourneciterqueceuxl.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz1mgD0ESizIgLAA==-enidentnumber

3

LespointsfortsdejQuery

LeframeworkjQueryestdeplusenplusreconnuetadoptparlesdveloppeurscarlesapportsdecetenvironnementsontnombreux.

LapprochedejQueryneconsistepasseulementenuncodagedesscriptsplusintuitifsetconcismaissaphilosophiepremireestconcentresurlensembledeslmentsprisencompteparleDOM.LeJavaScripttraditionnel,danssonvolution historique, a d saccommoder du Document Object Model. John Resig avec jQuery, a en quelque sortereconsidrleJavaScriptenlepercevantcommeunvritablelangagedeprogrammationaxenprioritsurleDOM.CequimodifietotalementlafaondapprhenderetdcrireleJavaScript.

TousleslmentsduDOMsontaismentaccessiblesavecjQuery.LesmthodesgetElementById,getElementsByNameet getElementsByTagName du JavaScript montrent trs rapidement leurs limites, spcialement lorsque le concepteursouhaiteaccderauxattributsetautrespropritsdestyle.AvecjQuery,tousleslmentsdudocumentpeuventtreaccds facilement et surtout intuitivement. Le chapitre suivant, consacr aux slecteurs, illustrera la diversitapporteparjQueryenlamatire.

Lapprochede jQueryestcomplte.Lesmthodeset fonctionsde jQuerynese limitentpasquelquesanimationsdordreesthtique.Parquelqueslignesdecode,jQuerypeutmodifierdutexte,insrerdesimages,trierdestableauxourorganiserlentiretdelastructuredudocumentHtml.CeframeworkposeunregardnouveausurleJavaScriptet,aprsunbrefapprentissage,simplifiegrandementlaconceptionetlcrituredesscripts.Nousnemanqueronspasdattirervotreattention,danslasuitedecetouvrage,surlaconcisionducodeainsiproduit.

LecodejQueryestcompatibleaveclesdiffrentsnavigateurs.Ladviancedesnavigateurs,infimeouplusmarque,parrapportauxstandardsduDOMetdesfeuillesdestyle,estuneregrettableralitdudveloppementdapplicationsWebvolues.GrcelinterfacelogicielleajouteparjQuery,lecodedesapplicationsservlecompatibleaveclesprincipaux navigateurs du march. Il faut dj fouiller les trfonds des forums spcialiss pour trouver quelquesaccrochages portant sur des dtails sommes toutes peu utiliss. Cette compatibilit ressort en particulier sur leslmentsde feuillesdestyleCSS3quinesontencorereprisesquede faontrs fragmentairepar lesnavigateurs.Citonscommeexemplelopacitdeslments.LesmthodesjQueryfadeIn(), fadeOut()etfadeTo()permettentdefairevariercetteopacitdemanirecompatibleavectouslesnavigateurs.

Une communaut dynamique de dveloppeurs soutient jQuery. Cette communaut, initie selon les principeshistoriques de passion et de partage dInternet, fournit unemultitude de plugins, soit des extensions de jQuery,ddies des tches trs spcifiques. Ces plugins, souvent des merveilles de programmation, sont disponibleslibrement sur la toile et sont trs priss par les concepteurs de site. Un carrousel dimages ou un tableau triableimplmentenquelquesminutesetenquelqueslignesdecode,simplifiegrandementleurtravail.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzfq0d2ESizIgLAA==-enidentnumber

4

MiseenplacedejQuery

jQuerytantunelibrairiectclient,samiseenplaceestextrmementsimple.

Dansunpremiertemps,ilfauttlchargerjQuery.LadresselaplusindiquepourleraliserestcelledusitedejQueryluimme soit http://jquery.com/. Sous la rubriqueDownload, il vous est propos une version compresse dite deproduction(production)de19KBetuneversiondedveloppement(development)de120KB.Cettedernireestbienadaptenotretudecarellepermetaupluscurieuxde jeterunilsur lecodeutilispar jQuery.Laversiondeproductionestutiliseunefoisletravaildedveloppementterminetvospagesmisesenligne.

Aumomentdelcrituredecetouvrage,lefichiertlchargportelenomdejquery1.3.2.js.Pourlasuitedenotretude,nouslavonsrenommenjquery.js.Unefoiscefichiertlcharg,ildevratreprsentdansle

mmedossierqueceluidelapageHtml(ouXhtml)quicomporteraunscriptjQuery.

LespagesfaisantappelduJavaScripttraitparjQuerydoiventcomporterdanslenttedudocument,soitentre les balises , un appel vers ce fichier JavaScript externe :

Commentaires

LalibrairiejQueryestainsichargechaquefoisquelleestncessaireaubondroulementdelapage.Ilfautcepropossouligner lecaractrecompactde la librairie jQuery.Avecses19KBdanssaversiondeproduction,ellenaquasiaucuneconsquencesurletempsdetlchargementdelapage.Eneffet,19KBcorrespondautlchargementdunepetiteicneprsentedansledocument.

Ilatditciavant,quelefichierjquery.jsdevaittreprsentdanslemmedossierquelapageHtml.CettefaondeprocderestidalementadaptelapprentissagedejQuery.Danslapratique,jquery.jsserasouventinclusdansunsousrpertoire par exemple js. On y accde alors par .

IlestpossibledutiliserdirectementlesversionsdejQueryhbergesparGooglesurAJAXLibrariesAPI.LelienverslefichierjQuerydevientalors:

ou

LestenantsdecettemthodeavancentunechargerduiteduserveurdevotresiteetuneconnexionjQueryaussi(sinonplus)rapidequpartirdunserveurquelconque.Deplus,celapermetauxnavigateursdenepastlchargerinutilementplusieursfoislammelibrairiesurchaquesitequilutilise,puisquunefoisjQuerytlchargpartirdesserveursdeGoogleetmisencache,lenavigateurnauraplusletlchargernouveau.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzatVz3USizIgLAA==-enidentnumber

5

InitierunscriptjQuery

Leframeworkmisenplaceetprttreutilis,ilfautaupralableparcourirquelquesnotionsthoriques.

TouteslesinstructionsoupourtreplusprcislesscriptsjQuerysarticulentautourdunmodleunique.Soit,

jQuery(function(){ //contenu excut lorsque le document sera charg });

Pourconomiserdesfrappesdeclavier,lesignedollar($)quifonctionnecommealiasdejQueryestpresquetoujoursutilis.

$(function(){ //contenu excut lorsque le document sera charg });

Serfrantcemodle,toutscriptjQuerycommencepar:

$(document).ready(function() { // code jQuery });

Soit,selonunerestitutionassezlibre,crerunobjetjQuery($)partirdudocument(document)quandceluiciestprt(ready).

LaparticularitdecettefonctionestdechargerleslmentsduDOMdsqueceuxcisontdisponibles,soitbienavantlechargementcompletdelapage.

Ceenquoi jQuery sediffrencie du JavaScript classique.Celuici utilise, par exemple, le classiquewindow.onload = function()quiattendquelapageettousleslmentsquellecontientsoientcompltementchargs.Cequipeuttretrslongspcialementlorsquilyadesimagesdunetailleconsquente.CestuneparticularitessentielledejQueryquisebase,rappelonsle,defaonnativesurleslmentsduDOM.

Cemodedefonctionnementprsentedenombreuxavantages:

Tousleslmentsdelapagesontinclusdansunobjetquelesslecteurs,mthodesetfonctionsdejQuerypourrontmanipuler.

LecodeHtmlestdpouilldetoutesmentionsJavaScriptcommeparexemplelesnotationslien.Tout lecodeJavaScript/jQuerysesituedansunepartiesparede lapageHtml(entre lesbalises...)oudansunfichierjsexterne.Cequirespectepleinementleprincipedelasparationducontenuetdelaprsentation.

Avec$(document).ready(),leslmentsdelapagesontladispositiondudveloppeur,avantlechargementcompletetlaffichagedecelleci.Cequiestbienpratiquepouractiverdeseffetsdapparitionoudedisparitiondslaffichagedelapageparlenavigateur.

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.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz/sRV5ESizIgLAA==-enidentnumber

6

UnepremireapplicationjQuery

Ralisonscommeentreenmatire,unmenudenavigationverticaldroulant.

Lebut ici nest pas de comprendre lesmthodes jQuery qui seront tudies plus avantmais davoirunaperudelimplantation et lorganisation gnrale des scripts jQuery. Cette premire application a aussi comme objectif defamiliariserlelecteuraveclapprochesuivieparlauteurdansnotreexplorationdejQuery.

LefichierHtmldedpartseprsenteainsi:

jQuery 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;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQztr6t70SizIgLAA==-enidentnumber

7

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;} Chapitre 1 Point 1 Point 2 Point 3 Chapitre 2 Point 1 Point 2 Point 3 Chapitre 3 Point 1 Point 2 Point 3

laboronslescriptjQuerypaspas.

Nous supposons que la librairie jquery.js a t tlcharge et incorpore dans le dossier contenant le fichierHtmlprcdent.

AppelonslejQueryenplaantentrelesbaliseset,labalisedenttesuivante.



8

Lescriptenluimmepeutdbuter.

$(document).ready(function(){ ...

});

AveccettepremireinstructionjQuery,larbreduDOMrelatifaudocumentestchargdansunobjetjQuery.

Unepremire opration effectuer consiste ne pas afficher les sousmenus, soit les divisions dont la classe estmenu_point.

$(document).ready(function(){ $("div.menu_point").hide(); ...

});

Ainsi, jQuery ($) slectionne ces divisions dont la classe est menu_point (("div.menu_point")) et les faitdisparatre(hide()).

Passonsmaintenantlapartiequiprendenchargeledroulementdusousmenulorsquundeschapitresatcliqu.

$(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(){

Leclicdundesparagraphesdontlaclasseestmenu_chapitre(soitdefaoncode$("p.menu_chapitre"))engendreunefonctionquiseradtailleparleslignessuivantes(click(function()).

$(this).next("div.menu_point").slideDown(300)

partirdecetlment(this),lescriptdemandederechercherllmentquilesuitetquialaclassemenu_point(soitnext("div.menu_point")).Ondemandealorsdefaireapparatrecettedivisionselonuneffetdeglissementverslesbas(slideDown(300)).

.siblings("div.menu_point").slideUp("slow");

Ilfautencorerefermerlesdivisionsouvertesdesautreschapitres.IlestdemandjQuerydeslectionnerlesfrresimmdiats(siblings)dechaquedivisionquidisposeduneclassemenu_point(siblings("div.menu_point"))etderefermercesdivisionsparuneffetdeglissementverslehaut(slideUp("slow")).

Ilfautnoterquedemultiplesactionsonttainsiencodesdansunemmeinstruction.Cesdiffrentesoprationssontsimplementreliesparunpoint.

});

Findecettefonctionrelativeauclicdunparagraphe.

});

Findureadyetfindescript.

VousremarquerezdjlaconcisionducodejQuery.Quelqueslignessuffissentpourdveloppercescript.



9

Aufinal,lefichierHtmlseprsenteainsi:

jQuery $(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"); }); }); 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;} Chapitre 1 Point 1 Point 2 Point 3 Chapitre 2 Point 1 Point 2 Point 3 Chapitre 3 Point 1 Point 2 Point 3



10

LadocumentationrelativejQuery

LadocumentationrelativejQueryestabondantesurlatoilemaisestmajoritairementenanglais.

UnedocumentationenlignetrscompltedejQuery,estdisponiblesurlesiteofficiel :http://docs.jquery.com/

Ilestgalementpossibledeconsultercettedocumentationhorsligne:

l SousformedunfichierAdobeAirtlchargersurhttp://api.jquery.com/

l Sous formedun fichierchm tlcharger ladresse :http://charupload.wordpress.com/2007/12/07/jquerydocumentationchm/

l SousformeduneAPI:http://jquery.bassistance.de/apibrowser/

Un aidemmoire prcieux au format Adobe pdf ou Microsoft xls ou image png est disponible lurlhttp://www.javascripttoolbox.com/jquery/cheatsheet/

Citonsaussi,VisualjQueryconsultableenligne(http://visualjquery.com/)outlchargeableauformatzipladresse:http://support.aptana.com/asap/browse/STU3495

Pourunedocumentationcomplteenfranais,ilfautsereporter:

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

l Ausitetrssympathiqueetdexcellentefacturedunpassionnladresse:jquery.jarodxxx.com/.

Lorsquevousconsultez lesdocumentationset tutoriels relatifs jQuery,assurezvousquils correspondentbienlaversion1.3.Ilyaeneffetdesdiffrencessensiblesentrelaversion1.2et1.3.Pourexemple, les

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


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmnjd90SizIgLAA==-enidentnumber

11

Outilsdedveloppementetdedbogage

RappelonsquejQueryestunframeworkctclient.Ainsi,ilnencessitequunstrictminimumdoutilsunnavigateuretunditeurdetexte.IlfautcependantnoterquepourlesscriptsAJAX(voirchapitreAJAXvuparjQuery),linstallationdunserveurWeblocalestprvoirmaisnousyreviendronslorsdeltudedecechapitre.

Pour ce qui est du dbogage, il nexiste pas de solution miracle pour debugger le code JavaScript. Pourtant, lesnavigateurs proposent depuis quelque temps, des solutions innovantes permettant dinspecter et de dbuggerlenvironnementdespagesWeb,soitleHtml,lesCSS,lesscriptsetleDOM.

LeplusreconnuparlesdveloppeursestFirebug.CetteextensiondeFirefoxpermet,enuncoupdil,decontrlervotreHtml,CSS,JavaScript,DOMetAJAX.

Pourentirerlemeilleurprofit,nemanquezpasdeconsulterlexcellenttutorial(enfranais)ladresse:

http://ericpommereau.developpez.com/tutoriels/outilweb/firebug/

Il existe galement une solutionmultiplateforme pour les autres navigateurs soit Firebug Lite, qui est le pendant"script"delextensionpourFirefox.Cetteinteroprabilitsepaie(pourlinstant)pardesperformancesinfrieureslasolutionrserveFirefox.

Pour sa part, Internet Explorer 8 propose de faon native, des outils de dveloppement qui ne sont pas sansressemblerceuxdeFirebug.OnyaccdeparlemenuOutilsOutilsdedveloppement(touchederaccourci[F12]).

CitonsencoreDragonflydebuggerpourOperaetWebInspectorpourSafari.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmlHOAEWizIgLAA==-enidentnumber

12

Introduction

LesslecteurssontlundesaspectsleplusimportantdelalibrairiejQuery.Ceuxciutilisentunesyntaxequinestpassans rappeler celle des feuilles de style CSS. Ils permettent aux concepteurs didentifier rapidement et aismentnimportequellmentdelapageetdyappliquerlesmthodesspcifiquesjQuery.

LabonnecomprhensiondecesslecteursjQueryestunlmentclpourlabonnecomprhensionetutilisationdejQuery.

Un site Web illustre merveille le rle de ces slecteurs. Il est srement utile de le consulter ladressewww.codylindley.com/jqueryselectors/


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzehymBUWizIgLAA==-enidentnumber

13

Lesslecteursdebase

Ces slecteurs basiques de jQuery ne sont en fait quune reformulation des mthodes getElementById etgetElementsByTagNameduJavaScripttraditionnel.

LanotationrepriseparjQueryprsentelesavantagesdtreplusconciseetbeaucoupplusintuitive.

CesslecteursbasiquessonttrsfrquemmentutilissdanslesscriptsjQueryetleurbonnecomprhensionservleindispensablelapprentissagedejQueryetlasuitedecetouvrage.

1.Slectionparlidentifiant

#identifiant

Slectionnellment(unique)spcifiparlattributid="identifiant".

$("#box"):slectionnellmentdontlidestbox.

CestlanotationjQuerydegetElementByIdduJavaScriptclassique.

Rappelonsquecet identifiantdoittreuniquedans lapage.Siparerreur,centaitpaslecas,jQueryreprendlepremierlmentdotdecetidentifiant.

Exemple

Entouronsdunebordure,lesecondparagraphedontlidentifiantest"deux".

SoitlefichierXhtmlsuivant:

jQuery $(document).ready(function(){ $("#deux").css("border","1px solid black"); }); p { width: 200px; padding: 3px;} Paragraphe 1 Paragraphe 2 Paragraphe 3


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzcpAQSkWizIgLAA==-enidentnumber

14

DtaillonslescriptjQuery.

$(document).ready(function(){

InitialisationdejQuery.LescriptestprtoprerdslechargementduDOM.

$("#deux").css("border","1px solid black");

Ilestappliqullmentdontlidest"deux"($("#deux")),lamthodejQueryquipermetdemodifierlespropritsCSS,soiticidajouterunebordure(css("border","1px solid black")).CettemthodejQuerycss()seratudieendtailauchapitreManipulationdesfeuillesdestyleCSS.

});

Finduscript.

2.Slectionparlenomdelabalise

lment

Slectionnetousleslments(oubalises)dontlenomestspcifi.

$("div"):slectionnetouteslesdivisionsdelapage.

CestlanotationjQuerydegetElementsByTagNameduJavaScriptclassique.

Exemple

EntouronsduneborduretouslesparagraphesdudocumentXhtml.

jQuery $(document).ready(function(){ $("p").css("border","1px solid black"); }); p { width: 200px; padding: 3px;} div { padding: 3px;}



15

Paragraphe 1 Paragraphe 2 Division 1

$("p").css("border","1px solid black");

jQueryslectionnetouteslesbalisesdeparagraphe($("p"))etappliquecellesci,unebordureparlamthodecss().

3.Slectionparlaclasse

.classe

Slectionnetousleslments(oubalises)aveclaclassespcifie.

$(".texte"):slectionnetousleslmentsdotsdelattributclass="texte".

Exemple

Entouronsdunebordureleparagraphedotdelaclassegras.

jQuery $(document).ready(function(){ $(".gras").css("border","1px solid black"); }); p { width: 200px; padding: 3px;} .gras { font-weight: bold;} Paragraphe 1



16

Paragraphe 2 Paragraphe 3

$(".gras").css("border","1px solid black");

LabaliseaveclaclassegrasestslectionneparjQuery($(".gras")).Unebordureestalorsapplique.

Commentaires

Onauraitpunoter:$("p.gras").css("border","1px solid black").Ainsi,jQueryslectionnelesbalisesaveclaclassegras.

Selon lesexperts,cettenotationseraitplusefficacecar jQuerypeutretrouverdirectement lesbalisesdansleDOMetensuitefiltrercellesquipossdentuneclassegras.

Lanotationavecplusieursclassesestenvisageable.$(".classe1.classe2")slectionnetous leslmentsquiontcommenomdeclasseclasse1etclasse2.

Leslecteurtoile*permetdeslectionnertousleslments.

$("*").css("border","1px solid black");

jQuerypermetdassocierplusieursslecteurs.

$("div,span,p.nom_classe").css("border","1px solid black");



17

Lesslecteurshirarchiques

LanotationDOMavecsesparents,descendants,enfants,frresetsurs(siblings)estmaintenantbienancredanslcritureduJavaScript.LalibrairiejQuerynepouvaitignorercettefaondeprocder.

1.Slectiondesdescendants

AscendantDescendant

Slectionnetouslesdescendantsdellmentnot"Descendant"parrapportllmentparentnot"Ascendant".

$("#box p"):slectionnetouslesdescendantsdecontenusdansllmentparentidentifiparbox.

Lesdescendantspeuventtrelesenfants,lespetitsenfantsetlesarrirepetitsenfants.

Exemple

Soitdesdivisionsquicontiennentdiverslments.Retrouvonstouslesdescendantsdellmentidentifiparid="box".

jQuery $(document).ready(function(){ $("#box *").css("border", "1px double black"); }); span#box { display: block;} div { width: 80px; height: 100px; margin: 5px; float: left; background: #9cf; } p { text-align: center;} X X Paragraphe


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzAmSoY0WizIgLAA==-enidentnumber

18

$("#box *").css("border", "1px double black");

LescriptjQueryslectionnetouslesdescendantsdellmentavecunidentifiantbox($("#box *"))etentoureceuxcidunebordure.

Ilfautremarquerquesontentoursdunebordure,nonseulementlesenfantssoitlesdivisions,maisaussilespetitsenfantssoitlesbalisesetlesarrirepetitsenfantssoitlesbaliseset.

2.Slectiondesenfants

Parent>Enfant

Slectionnetousleslmentsnotspar"Enfant"quisontlesenfantsdirectsdellmentparentnot"Parent".

$("#box > p"):slectionnetouslesenfantsimmdiatsdecontenusdansllmentparentidentifiparbox.

Exemple

Reprenonslagencementdelexempleprcdent.Retrouvonslesenfants(etuniquementlesenfants)dellmentidentifiparid="box".

jQuery $(document).ready(function(){ $("#box > *").css("border", "1px double black"); }); span#box { display: block;} div { width: 80px; height: 100px; margin: 5px; float: left; background: #9cf; } p { text-align: center;} X X



19

Paragraphe

$("#box > *").css("border", "1px double black");

LescriptjQueryslectionnetouslesenfantsdirectsdellmentavecunidentifiantbox($("#box > *"))etentoureceuxcidunebordure.

Ilfautremarquerquelespetitsenfantsetarrirepetitsenfantsounesontplusentoursparunebordure.

Onauraitpucrire:

$("#box > div").css("border", "1px double black");

3.Slectiondesfrressuivants

Prcdent~Frres

Cible leslmentsfrressitusaprsllment identifipar leslecteur"Prcdent"etquirpondentauslecteur"Frres".

$("#prev ~ div")trouvetouteslesdivisionsquisontfrresaprsllmentavec#prevcommeidentifiant.

Exemple

Soitunelistenonordonne.Retrouvonsleslmentsfrresdupremieritemdelaliste.

jQuery $(document).ready(function(){ $("li.un ~ li").css("border", "1px double black"); }); li { width: 150px; padding-left: 3px;}



20

Item 1 Item 2 Item 3 Item 4 Item 5

$("li.un ~ li").css("border", "1px double black");

Lescriptslectionnetouslesfrresdellmentdelistedotdelaclasseun($("li.un ~ li")).Touslesautresitemsdelalistesontainsirepris.

4.Slectiondellmentsuivant

Prcdent+Suivant

Cible llment immdiatementsuivantsituaprs llment identifipar leslecteur"Prcdent"etqui rpondauslecteur"Suivant".

$("#prev + div")trouveladivisionquisuitllmentavec#prevcommeidentifiant.

Exemple

Soitunelistenonordonne.Retrouvonsllmentsuivantdupremieritemdelaliste.

jQuery $(document).ready(function(){ $("li.un + li").css("border", "1px double black"); }); li { width: 150px; padding-left: 3px;}



21

Item 1 Item 2 Item 3 Item 4 Item 5

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

Trouvelefrreimmdiatparmilesfrresdellmentdelistedotdelaclasseun($("li.un + li")).



22

LesfiltresjQuerydebase

TousleslmentsduDOMtantrpertorisparjQuery, ildevientfaciledefiltrerdeslmentsdterminscommelepremier,ledernier,etc.

1.Lepremierlment

:first

Slectionnelapremireinstancedunlment.

$("li:first"):slectionnelepremierlmentdelistedudocument.

Leslecteur:firstslectionneunseullmenttandisque:first-child(voirLesfiltresenfantsLepremierlmentduprsentchapitre)peutenslectionnerplusieurs,soitunpourchaqueparent.

Exemple

Mettreunarrireplandecouleurlapremireligneduntableau.

jQuery $(document).ready(function(){ $("tr:first").css("background", "#9cf"); }); table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} 123 456 789 101112


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber

23

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

$("tr:first")slectionnelapremirebalise.

2.Ledernierlment

:last

Slectionneladernireinstancedunlment.

$("li:last"):slectionneledernierlmentdelistedudocument.

Exemple

Mettreunarrireplandecouleurladernirecelluleduntableau.

jQuery $(document).ready(function(){ $("td:last").css("background", "#9cf"); }); table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} 123 456 789 101112



24

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

$("td:last"):lescriptslectionneladernirebalise.

3.Leslmentspairs

:even

Slectionneleslmentspairsselonunindexcommenant0.

$("tr:even"):slectionneleslignesdindexJavaScript0,2,4soitleslignes1,3,5lcran.

Exemple

Appliquonsuneffetlistinguntableauendotantunelignesurdeuxdunarrireplan.

jQuery $(document).ready(function(){ $("tr:even").css("background", "#9cf"); }); table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} 123 456 789 101112 131415



25

$("tr:even").css("background", "#9cf");

jQueryslectionnelesbalisespairesetlesagrmentedunarrireplandecouleur.

CeteffetquirclameraitdenombreuseslignesdecodeenJavaScriptclassique,seprogrammeenjQueryenuneseuleligne.CetexempleillustrebienlaconcisionducodegnrenjQuery.

4.Leslmentsimpairs

:odd

Slectionneleslmentsimpairsselonunindexcommenant0.

$("tr:odd"):slectionnelescellulesdindexJavaScript1,3,5soitlescellules2,4,6,lcran.

Exemple

Appliquonslemmeeffetlistinguntableauendotantunelignesurdeuxdunarrireplanmaisavecdautreslignesqulexempleprcdent.

jQuery $(document).ready(function(){ $("tr:odd").css("background", "#9cf"); }); table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} 123 456 789



26

101112 131415

$("tr:odd").css("background", "#9cf");

jQueryslectionnelesbalisesimpairesetlesagrmentedunarrireplandecouleur.

5.Unlmentdtermin

:eq(index)

Slectionnellmentdterminparlavaleurdelindex.

Comme les index JavaScript dbutent zro, le slecteur:eq(0) slectionne donc le premier lment, :eq(1) lesecondlmentetainsidesuite.

$("td:eq(2)"):slectionnelatroisimecelluleduntableau.

Exemple

Soitunelistenumrote.Retrouvonsllmentdelistequiapparatensecondepositionlcran.

jQuery $(document).ready(function(){ $("li:eq(1)").css("background", "#9cf"); }); li { width: 150px;} Item de liste 1 Item de liste 2 Item de liste 3 Item de liste 4



27

Item de liste 5

$("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.

jQuery $(document).ready(function(){ $("li:gt(1)").css("background", "#9cf"); }); li { width: 150px;} Item de liste 1 Item de liste 2 Item de liste 3 Item de liste 4 Item de liste 5



28

$("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.

jQuery $(document).ready(function(){ $("li:lt(4)").css("background", "#9cf"); }); li { width: 150px;} Item de liste 1 Item de liste 2 Item de liste 3 Item de liste 4 Item de liste 5



29

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

$("li:lt(4)"):tousleslmentsdelistequiprcdentlitem5sontslectionns.

8.Lesbalisesdetitre

:header

Retournetousleslmentsquisontdesbalisesdetitrecomme,,,etc.

$(":header"):slectionnetouteslesbalisesdetitredelapage.

Exemple

Slectionnonstouteslesbalisesdetitredelapage.

jQuery $(document).ready(function(){ $(":header").css("background", "#9cf"); }); body { font-size: 10px; font-family: Arial; } h1, h2, h3 { margin: 3px 0; } Titre de niveau 1 Contenu Titre de niveau 2 Contenu Titre de niveau 3 Contenu



30

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

$(":header"):slectionnetouteslesbalisesdetitredelapage.

9.Exclusiondunlment

:not(slecteur)

Exclutdelaslectiontousleslmentsquirpondentaucritrespcifiparleslecteur.

$("div:not(#box)"):slectionnetouteslesdivisionssaufcelleidentifieparbox.

Exemple

Slectionnonstousleslmentsdunelistelexclusiondepremieretdernieritem.

jQuery $(document).ready(function(){ $("li:not(:first, :last)").css("background", "#9cf"); }); li { width: 150px;} Item de liste 1 Item de liste 2 Item de liste 3 Item de liste 4 Item de liste 5



31

$("li:not(:first, :last)").css("background", "#9cf");

Slectionnetousleslmentsdelistesauflapremireetdernireoccurrencedeceuxci.

Ilfauttreattentiflordreetauplacementdesparenthsesouvrantesetsurtoutfermantes.



32

Lesfiltresenfants

Danscechapitre,nousavonsdjabordlesslecteurshirarchiquesquipermettaientdeslectionnerlesenfants.Lesfiltresenfantspermettentdeffectueruntriparmilesenfantsdunlment.

1.Lepremierenfant

:firstchild

Slectionnetousleslmentsquisontlepremierenfantdeleurparent.

$("ul:first-child"):slectionnelepremierenfant(soitlepremierlmentdeliste)delalistenonordonne.

Le slecteur :first-child peut slectionner plusieurs lments soit un pour chaque parent. ne pasconfondreavec :first qui ne reprend quun seul lment (voir la section Les filtres jQuery de base Le

premierlmentduprsentchapitre).

Exemple

Retrouvonslepremierlieninclusdansunparagraphe.

jQuery $(document).ready(function(){ $("p a:first-child").css("background", "#9cf"); }); a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 15px;} Lien 1 Lien 2 Lien 3 Lien 4 Lien 5


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzu6thUWizIgLAA==-enidentnumber

33

$("p a:first-child").css("background", "#9cf");

$("p a:first-child"):lepremierlien,enfantdelabaliseestslectionn.

2.Ledernierenfant

:lastchild

Slectionnetousleslmentsquisontledernierenfantdeleurparent.

$("ul:last-child"):slectionneledernierenfant(soitledernierlmentdeliste)delalistenonordonne.

Le slecteur :last-child peut slectionner plusieurs lments soit un pour chaque parent. ne pasconfondre avec :last qui ne reprend quun seul lment (voir la section Les filtres jQuery de base Le

dernierlmentduprsentchapitre).

Exemple

Retrouvonsledernierlieninclusdansunparagraphe.

jQuery $(document).ready(function(){ $("p a:last-child").css("background", "#9cf"); }); a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 15px;} Lien 1 Lien 2 Lien 3



34

Lien 4 Lien 5

$("p a:last-child").css("background", "#9cf");

$("p a:last-child"):ledernierlien,enfantdelabaliseestslectionn.

3.Lenimeenfant

:nthchild(index)

Slectionneleslmentsquisontlenimeenfantdeleurparent.Lapositionestfournieparleparamtreindex.

AucontrairedenombreuxindexenjQuery,lindexnedbutepasici0mais1.

$("ul li:nth-child(2)"):slectionnelesecondlmentdelaliste.

Revenonscette fameuseexceptionconcernant lindex.Laplupartdes indexutilisspar jQuery fontappeldesfonctions natives de JavaScript et respectent la convention de dbuter les index 0. Le slecteur :nth-child,slecteurspcifiquejQuery,eststrictementdrivdesspcificationsCSS.Lavaleurdindex1signifiedoncbienquilsagitdupremierlment.

La confusion avec:eq(index), abord la section Les filtres jQuery de base Un lment dtermin du prsentchapitre, dont lindex commence 0, peut tre une source derreur difficilement dcelable dans certains scriptsjQuery.

Exemple

Retrouvonsllmentdelistequiapparatensecondepositionlcran.

jQuery $(document).ready(function(){ $("li:nth-child(2)").css("background", "#9cf"); }); li { width: 150px;}



35

Item de liste 1 Item de liste 2 Item de liste 3 Item de liste 4 Item de liste 5

$("li:nth-child(2)").css("background", "#9cf");

Lescriptslectionnetousleslmentsdelistequisontensecondepositiondanslordredesenfants.

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)"):slectionneleslignesimpairesdutableau.

Iciaussilaconfusionavec:evenet:odd(voirlessectionsLesfiltresjQuerydebase LeslmentspairsetLesfiltresjQuerydebase Leslmentsimpairsduprsentchapitre)estpossiblecarlindexdeceuxcidmarre0.

jQuery $(document).ready(function(){ $("table tr:nth-child(odd)").css("background", "#9cf");});



36

table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} 123 456 789 101112 131415

$("table tr:nth-child(odd)").css("background", "#9cf");});

Lescriptslectionnetous leslmentsde lignequisontenrang impairdans lordredesenfantsdelabalise.

5.Lesenfantsuniques

:onlychild

Slectionne tous les lments qui sont enfant unique de leur parent. Si le parent a plusieurs enfants, aucuneslectionnesteffectue.

$("div button:only-child") : retrouve les boutons (balise ) qui nont pas de frre(s) dans toutes lesdivisionsrencontres.

Exemple

Retrouverlelienquiestenfantuniquedunebalisedeparagraphe.

jQuery $(document).ready(function(){



37

$("p a:only-child").css("background", "#9cf"); }); a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 10px; margin-bottom: 0px;} Lien 1 | Lien 2 | Lien 3 Lien 1 Lien 1 | Lien 2

$("p a:only-child").css("background", "#9cf");

$("p a:only-child") :jQuerypasseenrevuelesdiffrentsparagraphes.Examinelesliensprsentsdansceuxcietneretientqueleparagraphequinecomportequunseullien.



38

Lesfiltresdecontenu

1.Untextedonn

:contains(texte)

Slectionneleslmentsquicontiennentuntexteouunfragmentdetextefournienargument.

Ilfautnoterquelargumenttexteestsensiblelacasse(casesensitive).

$("div:contains(Eni)"):slectionnelesdivisionsquicontiennentletexte"Eni".

Exemple

Mettonsenvidencelesparagraphesquicontiennentlefragmentdetexte"En".

jQuery $(document).ready(function(){ $("p:contains(En)").css("background", "#9cf"); }); a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 10px; margin-bottom: 0px;} Editions Eni Spcialis en informatique En Bretagne

$("p:contains(En)").css("background", "#9cf");


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmldIjEWizIgLAA==-enidentnumber

39

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

2.Uncontenuvide

:empty

Slectionnetousleslmentsquinontpasdenfants(incluslesnudsdetexte).

$("div:empty"):slectionnelesdivisionsvides.

Exemple

Retrouvonslescellulesvidesduntableau.

jQuery $(document).ready(function(){ $("td:empty").css("background", "#9cf");}); table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} 12 5 79

$("td:empty").css("background", "#9cf");});

$("td:empty"):retrouvelescellulesdetableauvides.



40

3.Laqualitdeparent

:parent

Slectionneleslmentsquisontparent,cestdirequiontdeslmentsenfants,incluslesnudsdetexte.

$("div:parent"):slectionnelesdivisionsquiontdeslmentsenfants.

Ceslecteurestenquelquesortelinverseduprcdent.

Exemple

Reprenonsnotretableauetretrouvonslescellulesnonvides.

jQuery $(document).ready(function(){ $("td:parent").css("background", "#9cf");}); table { width: 210px; border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;} 12 5 79

$("td:parent").css("background", "#9cf");});

$("td:parent"):retrouvelescellulesdetableauquiontuncontenuetquisontdoncparent.

4.Unslecteurdtermin



41

:has(slecteur)

Slectionneleslmentsquicontiennentleslecteurtransmisenargument.

$("div:has(p)"):slectionnelesdivisionsquicontiennentunoudesparagraphe(s).

Exemple

Retrouvonsleparagraphequicomporteunlien.

jQuery $(document).ready(function(){ $("p:has(a)").css("background", "#9cf"); }); a { color: black;} p { width: 150px; border: 1px dotted black; padding-left: 10px; margin-bottom: 0px;} Paragraphe Paragraphe Lien Paragraphe

$("p:has(a)").css("background", "#9cf");

$("p:has(a)"):retrouveleparagraphequipossdeunlien.



42

Lesfiltresdevisibilit

1.lmentvisible

:visible

Slectionneleslmentsquisontvisibles.

$("p:visible"):slectionnelesparagraphesvisibles.

PourcefiltrejQuery,unlmentestconsidrcommevisiblesilconsommedelespacedansledocument.LespropritsCSSdevisibilitnesontpasprisesencompte.

Exemple

Dotonslesdivisionsvisiblesdunarrireplandecouleur.

jQuery $(document).ready(function(){ $("div:visible").css("background", "#9cf"); }); .hidden { display:none;} div { width: 40px; height: 40px; margin: 5px; float: left; border: 1px solid black;} p { text-align: center;}


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzSs9Sk0WizIgLAA==-enidentnumber

43

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

$("div:visible"):uniquementlesdivisionsvisiblessontslectionnes.

2.Elmentcach

:hidden

Slectionneleslmentsquisontcachs.

$("p:hidden"):slectionnelesparagraphescachs.

Exemple

Cescriptvaafficher,auclicdubouton,lesdivisionscaches.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jQuery $(document).ready(function(){ $("button").click(function () { $("div:hidden").css("background", "#9cf").show(); }); }); button {margin-left: 50px;} .hidden { display:none; } div { width: 40px; height: 40px; margin: 5px; float: left; border: 1px solid black;} Montrer les

cachs

Dtaillonsbrivementlescript.

$("button").click(function () { $("div:hidden").show("fast"); });

Au clic du bouton ($("button").click(function()), les divisions caches (("div:hidden")) sont affiches (show("fast")).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzSs9Sk0WizIgLAA==-enidentnumber

45

Lesfiltresdattribut

LesattributssontnombreuxdanslelangageHtmletXhtml.Citonstitle,alt,src,href,width,style,etc.

Dans certaines documentations disponibles sur Internet, vous tes susceptibles de retrouver la notation [@attr]relativeaux filtresdattribut.Cettenotationat retirede laversion jQuery1.3. Il suffit simplementde retirer [email protected].

1.Lattribut

[attribut]

Slectionneleslmentsdotsdelattributspcifi.

$("div[id]"):slectionneleslmentsquiontunattributid.

Exemple

Retrouvonsleslmentsdelisteaveclattributclass.

jQuery $(document).ready(function(){ $("li[class]").css("border", "1px solid black"); }); li { width: 150px;} .italique { font-style: italic; } Item de liste 1 Item de liste 2 Item de liste 3 Item de liste 4 Item de liste 5


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCq09mEWizIgLAA==-enidentnumber

46

$("li[class]").css("border", "1px solid black");

$("li[class]"):parmileslmentsdeliste,jQueryslectionneceuxquipossdentunattributdeclasse.

2.Lattributavecunecertainevaleur

[attribut=valeur]

Slectionneleslmentsdotsdunattributavecunevaleurdtermine.

$("input[name=newsletter]"):slectionnellmentdeformulaireavecunattributname="newsletter".

Exemple

Mettonsenexergueleslmentsdelistedotsdelattributdeclasseclass="gras".

jQuery $(document).ready(function(){ $("li[class=gras]").css("background", "#9cf"); });



47

li { width: 150px;} .italique { font-style: italic;} .gras { font-weight: bolder;} Item de liste 1 Item de liste 2 Item de liste 3 Item de liste 4 Item de liste 5

$("li[class=gras]").css("background", "#9cf");

$("li[class=gras]") : parmi les lments de liste , jQuery slectionne ceux qui possdent un attribut declasseclass="gras".

3.Lattributquinapasunecertainevaleur

[attribut!=valeur]

Slectionne leslmentsquinontpas lattribut spcifi et ceuxqui ont lattribut spcifimaispasavec lavaleurindique.Valeurestcasesensitive.

$("input[name!=newsletter]"):slectionneleslmentsdeformulairequinontpasdattributnameetceuxquiontunattributnameavecuneautrevaleurquenewsletter.

Exemple

Retrouvonslesliensquinontpaslattributtitle="lien interne".

jQuery



48

$(document).ready(function(){ $("a[title!=lien interne]").css("background", "#9cf"); }); a { color: black;} p { margin-left: 20px;} Lien 1 Lien 2 Lien 3 Lien 4 Lien 5

$("a[title!=lien interne]").css("background", "#9cf");

$("a[title!=lien interne]"):parmilesliens,retenonsceuxquinontpaslattributtitle="lien interne".

4.Lattributdontlavaleurcommencepar

[attribut^=value]

Slectionneleslmentsquipossdentlattributspcifietdontlavaleurcommenceparlescaractresindiqus.

$("input[name^=news]"):slectionneleslmentsdeformulaireaveclattributnameetdontlavaleurdeceluicicommenceparlescaractres"news".

Exemple

Parmilesliensdisponibles,retenonsceuxdontlattributtitlecommenceparlalettreX.

jQuery $(document).ready(function(){



49

$("a[title^=X]").css("background", "#9cf"); }); a { color: black;} p { margin-left: 20px;} Html Xhtml Dhtml Xml Xslt Xpath Xforms CSS Wml Rds

$("a[title^=X]").css("background", "#9cf");

$("a[title^=X]"):parmilesliens,retenonsceuxdontlattributtitlecommenceparlelettreX.

5.Lattributdontlavaleurfinitpar

[attribut$=value]

Slectionneleslmentsquipossdentlattributspcifietdontlavaleursetermineparlescaractresindiqus.

$("input[name$=letter]"):slectionneleslmentsdeformulaireaveclattributnameetdontlavaleurdeceluicisetermineparlescaractres"letter".

Exemple

Enreprenantlexempleprcdent,retenonslesliensdontlattributtitlesetermineparleslettres"ml".

jQuery



50

$(document).ready(function(){ $("a[title$=ml]").css("background", "#9cf"); }); a { color: black;} p { margin-left: 20px;} Html Xhtml Dhtml Xml Xslt Xpath Xforms CSS Wml Rds

$("a[title$=ml]").css("background", "#9cf");

$("a[title$=ml]"):parmilesliens,retenonsceuxdontlattributtitlesetermineparleslettres"ml".

6.Lattributdontlavaleurcontient

[attribut*=value]

Slectionneleslmentsquipossdentlattributspcifietdontlavaleurcomportelescaractresindiqus.

$("input[name*=slet]"):slectionneleslmentsdeformulaireaveclattributnameetdontlavaleurdeceluicicomportelescaractres"slet".

Lasquence(oulordre)deslettresestrespecte.

Exemple

Toujoursenreprenantlexempleprcdent,retenonslesliensdontlattributtitlecomporteleslettres"tm".

lang="fr"> jQuery $(document).ready(function(){ $("a[title*=tm]").css("background", "#9cf"); }); a { color: black;} p { margin-left: 20px;} Html Xhtml Dhtml Xml Xslt Xpath Xforms CSS Wml Rds

$("a[title*=tm]").css("background", "#9cf");

$("a[title*=tm]"):parmilesliens,retenonsceuxdontlattributtitlecomporteleslettres"tm".

7.Lesfiltresmultiplesdattribut

[filtredattribut1][filtredattribut2][filtredattribut3]

Slectionneleslmentsquirpondenttouslesfiltresdattributspcifis.

$("input[id][name$=man]"):slectionnelesbalisesquipossdentunidentifiantidetdontlattributnameseterminepar"man".

Exemple

Retenonslesliensdontlattributtitlecommencepar"lien",seterminepar"interne"etcomporte"chapitre1".



52

jQuery $(document).ready(function(){ $("a[title^=lien][title$=interne][title*=chapitre1]") .css("background", "#9cf"); }); a { color: black;} p { margin-left: 20px;} Lien 1 Lien 2 Lien 3 Lien 4 Lien 5

$("a[title^=lien][title$=interne][title*=chapitre1]")

Parmi les liens, retenonsceuxdont lattributtitlecommencepar"lien",seterminepar"interne"etcomporte"chapitre1".



53

Lesslecteursetfiltresdeformulaires

LesformulairesenjQuerymritentuneplacepartdansnotretudedujQuery.AinsilesslecteursetfiltresrelatifsauxformulairesserontabordsauchapitreLesformulaires.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzBgA+nUWizIgLAA==-enidentnumber

54

Lesslecteursetlescaractresspciaux

LessymbolesreprisdanslasyntaxedejQueryconstituentunproblmelorsquilssontutilissdanslapartielittraleducode.

Il faut alors indiquer que ces caractres ne sont pas des symboles jQuery. Pour ce faire, on fera prcder lescaractresspciauxdedeuxbarresobliquesinverses\\(backslashes)

Parexemple:

#foo\\:bar #foo\\[bar\\] #foo\\.bar

LalistecompltedescaractresspciauxquiappartiennentlasyntaxedejQuerysont:# ; & , . + * ~ : " ! ^ $ [ ] ( ) = > | /Ilestplusraisonnabledelesviterpurementetsimplement.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzPl/sokWizIgLAA==-enidentnumber

55

Introduction

LesnombreuxslecteursdejQuerymisenplace,nousentamonsaveccechapitre,laspectdynamiqueduJavaScriptetdejQueryquiestdemodifierleslments.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzoCiqkWizIgLAA==-enidentnumber

56

Ajouterousupprimeruneclasse

addClass(classe)

Ajoutelaclassespcifietousleslmentsslectionns.

$("p:last").addClass("selected"):ajoutelaclasseselectedaudernierparagraphe.

CettemthoderetourneunobjetjQuery.

Commentaires

Ilfautnoterquecettemthodeneremplacepasuneclasse.Elleajoutesimplementuneclasse.

Ilestpossibledajouterplusduneclasselafois.Ellessontnoteslesuneslasuitedesautres,sparesparunespace,soitaddClass(classe1 classe2 classe3).

CettemthodeaddClass()estsouventassocielamthoderemoveClass()pourcreruneffetdecommutation.

removeClass(classe)

Supprimelaclassespcifietousleslmentsslectionns.

$("p:last").removelass("selected"):supprimelaclasseselectedaudernierparagraphe.


Exemple

Ausurvoldunparagraphepar le curseur,mettons celuici en vidence en le dotant dunarrireplande couleuretdunebordure.Ceteffetseraliseenajoutantuneclasseaupassagedelasouris.

Ledocumentinitialseprsentecommesuit:


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzhpQEsEWizIgLAA==-enidentnumber

57

jQuery div { width: 150px; height: 35px; line-height: 35px; vertical-align: middle; text-align: center; cursor: pointer;} .arriereplan { background-color: #9cf; border: 1px solid black;} Important Important Important

PassonsauscriptjQuery.

$(document).ready(function(){ $("div").mouseover(function(){ $(this).addClass("arriereplan"); }); $("div").mouseout(function(){ $(this).removeClass("arriereplan"); }); });

Dtaillonsceluici.


AuchargementduDOM.

$("div").mouseover(function(){ $(this).addClass("arriereplan"); });

Ausurvoldunedivisionpar lasouris(mouseover), lescriptajoute(addClass()) ladivisionsurvole(this), laclassearriereplan.

$("div").mouseout(function(){ $(this).removeClass("arriereplan"); });

Lorsque le curseur quitte la division (mouseout), jQuery retire (removeClass()) la division survole (this), la classearriereplan.

});

Findescript.

LefichierXhtmlcompletdevient:

8859-1" /> jQuery $(document).ready(function(){ $("div").mouseover(function(){ $(this).addClass("arriereplan"); }); $("div").mouseout(function(){ $(this).removeClass("arriereplan"); }); }); div { width: 150px; height: 35px; line-height: 35px; vertical-align: middle; text-align: center; cursor: pointer;} .arriereplan { background-color: #9cf; border: 1px solid black;} Important Important Important


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzhpQEsEWizIgLAA==-enidentnumber

59

Vrifierlaprsenceduneclasse

hasClass(classe)

Vrifiesilaclassespcifieenargumentestprsentepourleslmentscibls.Retournetruesilaclassespcifieestprsentepouraumoinsundeslmentscibls,falsedanslecascontraire.

$("#p1").hasClass("box"):vrifiesillmentidentifiparp1possdelaclassebox.

Lamthoderenvoieunboolen(trueoufalse).

Exemple

Soitunesriedeparagraphes.

Audpart,

jQuery p { width: 150px; padding-left: 15px; cursor: pointer;} .arriereplan { height: 30px; line-height: 30px; vertical-align: middle; background-color: #9cf; border: 1px dashed black;} Article Nouveau Article Nouveau

Au survol de la souris, le script jQuery ne doit doter dunarrireplan de couleur et dunebordureuniquement lesparagraphesaveclaclassenew.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzDvk2tUWizIgLAA==-enidentnumber

60

LescriptjQuery:

$(document).ready(function(){ $("p").mouseover(function(){ if ($(this).hasClass("new") ) { $(this).addClass("arriereplan") }; }); });

Explicationsduscript:

$(document).ready(function(){ $("p").mouseover(function(){

AuchargementduDOMetausurvoldesparagraphesparlecurseur.

if ($(this).hasClass("new") ) { $(this).addClass("arriereplan") };

Lescriptvrifiesi (if) llment (this)survolpossde laclassenew(hasClass("new")).Dans laffirmative, laclassearriereplanestajoute(addClass())celuici.RemarquonsqueriennempchedemlangerJavaScriptclassiqueetJavaScriptjQuery.

});



61

});

Findescript

Aufinal,voicilefichierXhtml:

jQuery $(document).ready(function(){ $("p").mouseover(function(){ if ($(this).hasClass("new") ) { $(this).addClass("arriereplan") }; }); }); p { width: 150px; padding-left: 15px; cursor: pointer;} .arriereplan { height: 30px; line-height: 30px; vertical-align: middle; background-color: #9cf; border: 1px dashed black;} Article Nouveau Article Nouveau



62

Basculerentredeuxclasses

LalibrairiejQueryproposeplusieursmthodesquipermettentdedclenchertanttuneaction,tanttuneautre.Ceteffetdepermutationestreprissousletermedetoggle.NouslerencontreronsplusieursfoisdansnotreexplorationdejQuery.

Outredeseffetsspectaculaires,cesmthodesentranentuneconomieapprciabledelignesdecode.

toggleClass(classe)

Ajoutelaclassespcifiesiellenestpasprsente,retirelaclassespcifiesielleestprsente.

$(p).toggleClass("classe1") : applique la classeclasse1 aux paragraphes si elle nest pas prsente. Si elle lest,enlvelaclasseclasse1.


Exemple

Auclicdulien,faireapparatreoudisparatreunedivisiondelapage.

Audpart:

jQuery a{color: black} div { width: 255px; padding: 3px; border: 1px dotted black; cursor: pointer;} .cacher { display: none;} In / Out Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Suite de la page...


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzVtRq7kWizIgLAA==-enidentnumber

63

LescriptjQuery:

$(document).ready(function(){ $("a").click(function(){ $("div").toggleClass("cacher"); }); });

Exploronslescriptpaspas.


Auchargementdelapage,duDOMpourtreprcis.

$("a").click(function(){

Auclicdelasourissurlelien.

$("div").toggleClass("cacher");

Permuter(toggleClass())laclassecachersurladivision.

}); });

Findescript.

Aufinal:

jQuery $(document).ready(function(){ $("a").click(function(){ $("div").toggleClass("cacher"); }); }); a{color: black} div { width: 255px;



64

padding: 3px; border: 1px dotted black; cursor: pointer;} .cacher { display: none;} In / Out Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Suite de la page...

Il y a bien dautres faons de raliser cet effet en jQuery, par exemple, avec lesmthodesshow() et hide() (voirchapitreLeseffetsconsacrauxeffets).



65

Connatrelavaleurdunattribut

CettemthodejQuerycorrespondgetAttribute()duJavaScriptclassique.

attr(nomdelattribut)

Accdelavaleurdelattributmentionn.

Cettemthodeestassezutilepour retrouver lavaleurdunattributde llmentslectionnoudupremierlmentslectionnsilyenaplusieurs.Sillmentnapasdattributrpondantcenom,lavaleurundefinedestretourne.

$("a").attr("title"):rcuprelavaleurdelattributtitledupremierlienrencontr.


Exemple

Auclicsur lebouton,recherchons lestyleattach labaliseJavaScript.Lersultatseraaffichdansunedivisionprvueceteffet.

Lefichierdedpart:

jQuery


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz7r+p9UWizIgLAA==-enidentnumber

66

div { width: 150px; height: 16px; border: 1px dotted black;} Trouver jQuery est un framework JavaScript libre. Le style du est :

LescriptjQueryseprsenteainsi:

$(document).ready(function(){ $("button").click(function(){ var css = $("span").attr("style"); $("div").text(css); }); });

Dtaillonsceluici.

$(document).ready(function(){ $("button").click(function(){

AuchargementduDOMetauclicdubouton.

var css = $("span").attr("style");

Lescriptchargedanslavariablecss,lavaleurdelattributstyle=""attachlabalise.

$("div").text(css);

Cettevariableestaffichecommedutexte(text(css))dansladivisionprvueceteffet.

}); });

Findescript.

Ledocumentfinaldevient:

jQuery $(document).ready(function(){ $("button").click(function(){ var css = $("span").attr("style"); $("div").text(css); }); }); div { width: 150px; height: 16px; border: 1px dotted black;}



67

Trouver jQuery est un framework JavaScript libre. Le style du est :



68

Ajouterunattributetsavaleur

attr(attribut,valeur)

Assigneunepaireattribut/valeurtousleslmentsconcerns.

$("#photo").attr("alt","Parc oliennes"):assignellmentidentifipar#photo,lattributalt="Parc oliennes".


Exemple

Auclicsurlebouton,untableaudedonnesseraaffichavecunelargeurplusgrandepourlerendreainsipluslisible.

Lefichierdedpart:

jQuery table { border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;}


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzBgf3P0aizIgLAA==-enidentnumber

69

Agrandir le tableau 123 456 789

LescriptjQueryscrit:

$(document).ready(function(){ $("button").click(function(){ $("table").attr("width","240px"); }); });

Soit,endtail:

$(document).ready(function(){ $("button").click(function(){

AuchargementduDOMetauclicsurlebouton.

$("table").attr("width","240px");

Lattributwidthavecunevaleurde240 pxestajoutlabalisedetableau.

}); });

Finduscript

Uneffetspectaculairepourunminimumdecode!

Lefichiercomplet:

jQuery $(document).ready(function(){ $("button").click(function(){ $("table").attr("width","240px");

Documents

jQuery - Le framework JavaScript du Web 2.0.pdf