jquery_logo

Jquery : Premiers pas

Défi­ni­tion

jQuery est une biblio­thèque JavaS­cript libre qui porte sur l’interaction entre JavaS­cript (com­pre­nant Ajax) et HTML, et a pour but de sim­pli­fier des com­mandes com­munes de JavaS­cript. La pre­mière ver­sion date de jan­vier 2006. Pour faire simple, jQuery va nous per­mettre de gérer sim­ple­ment un grand nombre d’interaction, de prin­cipe d’affichage avec moins de code.

La biblio­thèque contient notam­ment les fonc­tion­na­li­tés suivantes :

  • Par­cours et modi­fi­ca­tion du DOM (y com­pris le sup­port des sélec­teurs CSS 1 à 3 et un sup­port basique de XPath) ;
  • Évé­ne­ments ;
  • Effets visuels et animations ;
  • Mani­pu­la­tions des feuilles de style en cas­cade (ajout/suppression des classes, d’attributs…) ;
  • Ajax ;
  • Plu­gins ;
  • Uti­li­taires (ver­sion du navi­ga­teur web…).

Métho­do­lo­gie

Pra­ti­que­ment, com­ment ça marche jQuery ? Nous n’irons pas au-delà du télé­char­ge­ment de la biblio­thèque. Nous nous conten­te­rons de l’appeler dans le <head> de notre page HTML et d’en uti­li­ser les fonc­tions en fonc­tion de nos besoins.

Inclure le fichier jQuery dans notre dos­sier de projet

Nous pou­vons télé­char­ger la biblio­thèque à par­tir du site offi­ciel.

En terme d’organisation de fichiers, voici l’arborescence d’un dos­sier type qui incluera la biblio­thèque jQuery.

capture-tree-jquery

Nous appel­le­rons la biblio­thèque dans le <head> de cette façon :

HTML

<script type=”text/javascript” src=”js/jquery-1.10.2.min.js”></script>

Pour vous faci­li­ter la tâche, voici un dos­sier de pro­jet vierge néces­si­tant la biblio­thèque jQuery.
Télé­char­ger dos­sier pro­jet HTML + CSS + jQuery

Appe­ler jQuery à par­tir de Google hos­ted Code

Il suf­fit de copier-coller cette ligne dans le <head>

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Exemples simples

Click

Télé­char­ger le code

Hover

Télé­char­ger le code

Toggle

Télé­char­ger le code

Chan­ger les pro­prié­tés CSS

Télé­char­ger le code

Chan­ger un attri­but HTML

Télé­char­ger le code

Pour aller plus loin

Un site de res­sources de scripts jQuery clai­re­ment classé :
unheap-thumbwww.unheap.com
Pour aller plus loin avec jQuery, jQuery, Sim­pli­fier et enri­chis­sez vos déve­lop­pe­ments javas­cript, J. Chaf­fer & K . Swed­berg :
chaffer-jonathan-jquery-simplifiez-et-enrichissez-vos-developpements-javascript-livre-893704502_MLTélé­char­ger un extrait du livre
0