Upload
serge-pacome
View
609
Download
6
Embed Size (px)
Citation preview
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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;
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQztr6t70SizIgLAA==-enidentnumber
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.
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQztr6t70SizIgLAA==-enidentnumber
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
- 4 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQztr6t70SizIgLAA==-enidentnumber
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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/
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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;}
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzcpAQSkWizIgLAA==-enidentnumber
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
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzcpAQSkWizIgLAA==-enidentnumber
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");
- 4 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzcpAQSkWizIgLAA==-enidentnumber
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
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzAmSoY0WizIgLAA==-enidentnumber
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;}
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzAmSoY0WizIgLAA==-enidentnumber
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;}
- 4 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzAmSoY0WizIgLAA==-enidentnumber
21
Item 1 Item 2 Item 3 Item 4 Item 5
$("li.un + li").css("border", "1px double black");
Trouvelefrreimmdiatparmilesfrresdellmentdelistedotdelaclasseun($("li.un + li")).
- 5 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzAmSoY0WizIgLAA==-enidentnumber
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
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
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
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
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
- 4 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
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
- 5 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
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
- 6 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
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
- 7 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
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
- 8 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
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
- 9 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
31
$("li:not(:first, :last)").css("background", "#9cf");
Slectionnetousleslmentsdelistesauflapremireetdernireoccurrencedeceuxci.
Ilfauttreattentiflordreetauplacementdesparenthsesouvrantesetsurtoutfermantes.
- 10 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6pbDckWizIgLAA==-enidentnumber
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
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzu6thUWizIgLAA==-enidentnumber
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;}
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzu6thUWizIgLAA==-enidentnumber
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");});
- 4 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzu6thUWizIgLAA==-enidentnumber
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(){
- 5 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzu6thUWizIgLAA==-enidentnumber
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.
- 6 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzu6thUWizIgLAA==-enidentnumber
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");
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmldIjEWizIgLAA==-enidentnumber
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
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmldIjEWizIgLAA==-enidentnumber
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.
- 4 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmldIjEWizIgLAA==-enidentnumber
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;}
- 1 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzSs9Sk0WizIgLAA==-enidentnumber
43
$("div:visible").css("background", "#9cf");
$("div:visible"):uniquementlesdivisionsvisiblessontslectionnes.
2.Elmentcach
:hidden
Slectionneleslmentsquisontcachs.
$("p:hidden"):slectionnelesparagraphescachs.
Exemple
Cescriptvaafficher,auclicdubouton,lesdivisionscaches.
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")).
- 3 - ENI Editions - All rigths reserved - Jonifar lina
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
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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"); });
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCq09mEWizIgLAA==-enidentnumber
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
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCq09mEWizIgLAA==-enidentnumber
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(){
- 4 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCq09mEWizIgLAA==-enidentnumber
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
- 5 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCq09mEWizIgLAA==-enidentnumber
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".
- 7 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCq09mEWizIgLAA==-enidentnumber
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".
- 8 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCq09mEWizIgLAA==-enidentnumber
53
Lesslecteursetfiltresdeformulaires
LesformulairesenjQuerymritentuneplacepartdansnotretudedujQuery.AinsilesslecteursetfiltresrelatifsauxformulairesserontabordsauchapitreLesformulaires.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzPl/sokWizIgLAA==-enidentnumber
55
Introduction
LesnombreuxslecteursdejQuerymisenplace,nousentamonsaveccechapitre,laspectdynamiqueduJavaScriptetdejQueryquiestdemodifierleslments.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
CettemthoderetourneunobjetjQuery.
Exemple
Ausurvoldunparagraphepar le curseur,mettons celuici en vidence en le dotant dunarrireplande couleuretdunebordure.Ceteffetseraliseenajoutantuneclasseaupassagedelasouris.
Ledocumentinitialseprsentecommesuit:
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
$(document).ready(function(){
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
- 3 - ENI Editions - All rigths reserved - Jonifar lina
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.
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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.
});
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzDvk2tUWizIgLAA==-enidentnumber
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
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzDvk2tUWizIgLAA==-enidentnumber
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.
CettemthoderetourneunobjetjQuery.
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...
- 1 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzVtRq7kWizIgLAA==-enidentnumber
63
LescriptjQuery:
$(document).ready(function(){ $("a").click(function(){ $("div").toggleClass("cacher"); }); });
Exploronslescriptpaspas.
$(document).ready(function(){
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;
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzVtRq7kWizIgLAA==-enidentnumber
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).
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzVtRq7kWizIgLAA==-enidentnumber
65
Connatrelavaleurdunattribut
CettemthodejQuerycorrespondgetAttribute()duJavaScriptclassique.
attr(nomdelattribut)
Accdelavaleurdelattributmentionn.
Cettemthodeestassezutilepour retrouver lavaleurdunattributde llmentslectionnoudupremierlmentslectionnsilyenaplusieurs.Sillmentnapasdattributrpondantcenom,lavaleurundefinedestretourne.
$("a").attr("title"):rcuprelavaleurdelattributtitledupremierlienrencontr.
CettemthoderetourneunobjetjQuery.
Exemple
Auclicsur lebouton,recherchons lestyleattach labaliseJavaScript.Lersultatseraaffichdansunedivisionprvueceteffet.
Lefichierdedpart:
jQuery
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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;}
- 2 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz7r+p9UWizIgLAA==-enidentnumber
67
Trouver jQuery est un framework JavaScript libre. Le style du est :
- 3 - ENI Editions - All rigths reserved - Jonifar lina
enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz7r+p9UWizIgLAA==-enidentnumber
68
Ajouterunattributetsavaleur
attr(attribut,valeur)
Assigneunepaireattribut/valeurtousleslmentsconcerns.
$("#photo").attr("alt","Parc oliennes"):assignellmentidentifipar#photo,lattributalt="Parc oliennes".
CettemthoderetourneunobjetjQuery.
Exemple
Auclicsurlebouton,untableaudedonnesseraaffichavecunelargeurplusgrandepourlerendreainsipluslisible.
Lefichierdedpart:
jQuery table { border-collapse: collapse; border: 1px solid black;} td { text-align: center; border: 1px solid black;}
- 1 - ENI Editions - All rigths reserved - Jonifar lina
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");