Un site webdynamique avec

jQuery !Par Nassoub

et Sainior

www.openclassrooms.com

Licence Creative Commons 7 2.0Dernire mise jour le 9/07/2012

http://www.openclassrooms.com

Sommaire

2Sommaire ........................................................................................................................................... 4Lire aussi ............................................................................................................................................ 6 Un site web dynamique avec jQuery ! ................................................................................................ 7Partie 1 : Introduction jQuery ........................................................................................................... 8jQuery : l'histoire d'un framework ! .................................................................................................................................... 8Mais... c'est quoi jQuery ? ........................................................................................................................................................................................... 8jQuery, un framework JavaScript ................................................................................................................................................................................ 8JavaScript ou... jQuery ? ............................................................................................................................................................................................. 9jQuery, un framework ou une librairie ? .......................................................................................................................................................................

10A quoi va nous servir jQuery ? .................................................................................................................................................................................. 10Les points forts de jQuery ......................................................................................................................................................................................... 11L'histoire du framework .............................................................................................................................................................................................. 11Des sites qui utilisent jQuery ..................................................................................................................................................................................... 11De quels outils a-t-on besoin ? ........................................................................................................................................ 12Le choix du navigateur web ....................................................................................................................................................................................... 13Un incontournable : Firebug pour Firefox ! ................................................................................................................................................................ 13Ajoutez Firebug votre navigateur Firefox ! ............................................................................................................................................................. 13Utiliser la bote outils Firebug ! ............................................................................................................................................................................... 14Un diteur de texte efficace ....................................................................................................................................................................................... 15Un diteur de texte performant et efficace ................................................................................................................................................................

18Rappels gnraux sur JavaScript ................................................................................................................................... 18O et quand utiliser JavaScript ? .............................................................................................................................................................................. 18O placer son code JavaScript ? .............................................................................................................................................................................. 18Quand et comment l'utiliser ? .................................................................................................................................................................................... 18Variables et fonctions ................................................................................................................................................................................................ 19De la dclaration des variables ................................................................................................................................................................................. 19Fonctions et arguments .............................................................................................................................................................................................

20Partie 2 : Les bases du framework .................................................................................................... 20Vos premiers pas avec jQuery ! ...................................................................................................................................... 20Inclure jQuery dans vos pages .................................................................................................................................................................................. 20Deux mthodes pour inclure jQuery dans vos pages web ........................................................................................................................................ 22La fonction de base : jQuery() ................................................................................................................................................................................... 22Une fonction gnrique : jQuery() ou $() ................................................................................................................................................................... 24viter le conflit ........................................................................................................................................................................................................... 25Le principe de fonctionnement ..................................................................................................................................................................................

27Les slecteurs ................................................................................................................................................................. 27Les slecteurs de CSS .............................................................................................................................................................................................. 27Les slecteurs les plus utiliss .................................................................................................................................................................................. 27Frres et parents ....................................................................................................................................................................................................... 28Une slection plus pousse ...................................................................................................................................................................................... 28La place d'un lment ............................................................................................................................................................................................... 29Slection par attributs ............................................................................................................................................................................................... 29Le slecteur :not() ..................................................................................................................................................................................................... 30Le cas des formulaires .............................................................................................................................................................................................. 30Le type des lments ................................................................................................................................................................................................ 30Le slecteur $(this) .................................................................................................................................................................................................... 31Performance des slecteurs ..................................................................................................................................................................................... 31Les slecteurs les plus rapides ................................................................................................................................................................................. 31courter les chanes ...................................................................