Prsent par Marouane Bouhouch

18/3/2014 11:44

Histoire

jQuery est une librarie Javascript jQuery est un langage conu pour simplifier les scripts du cot client

OPEN SOURCE
John Resig

Version stable :

jQuery 1.11.0 (24/01/2014)

Dernire version : jQuery 2.1.0 (24/01/2014) crer des animations Grer les vnements du navigateur Slctionner des lments DOM
Crer des programmes AJAX

Tlchargement jQuery

jQuery.com

Tlchargement jQuery

jQuery.com/downlad

Tlchargement jQuery

code.jQuery.com/jquery-2.1.0.min.js

Tlchargement jQuery

Tlchargement jQuery

Commencer utiluser jQuery

+ connexion internet

jQuery = Javascript
Les conditions Les boucles

Les fonctions

jQuery vs. Javascript

Selecteurs
Javascript Document.getElementById(nom) Document.getElementsByClassName(cls) Document.getElementsByTagName(h1) jQuery $(#nom) $(.cls) $(h1)

Mthodes et attribtus
Javascript .value .innerHTML jQuery .val() .html()

Example

Les slecteurs
Slecteurs $(#nom) $(.cls) $(p) $(h1,h2,h3) $(div:first) $(div:last) $(tr:odd) $(tr:even) Slectent Llment avec id=nom Les lments avec class=cls Les lments <p> Les lments <h1>,<h2> et <h3> Le premier lment <div> Le dernier lment <div> Touts les lment <tr> avec des indices impair Touts les lment <tr> avec des indices pair

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

//Javascript

//jQuery

document.getElementById(id).style.attribut = valeur; $(slecteur).css({attribut1:valeur1,attribut2:valeur2,})

Manipuler le CSS avec jQuery

Exemple

Les vnements
Javascript Mouse onClick jQuery click()

onDblClick OnMouseOver onMouseOut Keyboard onKeyDown onKeyUp

onKeyPress Forms onSubmit onFucus onBlur Document/Window onLoad onBeforeUnload/onUnload

dblclick() mouseenter() mouseleave() keydown() keyup()

keypress() submit() focus() blur() load() unload()

http://www.w3schools.com/jquery/jquery_ref_events.asp

.ready()

ready() est un vnement excut quand le chargement de la page est termin Lvnement le plus utilis dans jQuery Utilis avec le slecteur $(document) Conseill tre utilis comme vnement principal

Syntaxe

document

window

Example

hide() et show()

Hide(en) = Cacher(fr) Show(en) = afficher(fr)

hide() et show() avec des paramtres

Speed : vitesse (int) en ms Callback : fonction

Pour continuer

fadeToggle()

slideToggle()

animate()
$(slecteur).animate({attribut1:valeur1,attribut2:valeur2,},speed)