olivier evrard

*********************
*********************

Cours n°2.2

lippens_anim

jQuery

jQuery est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML des pages web. La première version est lancée en janvier 2006 par John Resig. (Wikipedia)

Exercice un (.hide .show .slideToggle)

  1. Téléchargez le dossier de départ
  2. Greffez le jQuery dans votre projet
  3. Testez le fonctionnement de jQuery (voir code)
  4. Cacher d’abord l’image lors du clic (voir .hide)
  5. Ensuite un deuxième bouton qui remontre l’image (.show)
  6. Enfin un seul bouton qui fait les deux comme un interrupteur (toggle)
  7. Have fun !

Dossier de départ

jquery_lippens_fstart_es

Sources

Code

Installez le lien vers jQuery dans votre <head>

<script type="text/javascript" src="jquery-1.12.1.min.js"></script>

Testez le fonctionnement du jQuery en copiant ce code juste en dessous de la balise d’ouverture <body>

<script>
$(document).ready(function() {
 alert("jQuery fonctionne !");
}); 
</script>

Exercice deux (.innerfade)

  1. Téléchargez le dossier de départ
  2. Analysez le dossier Innerfade
  3. Greffez Innerfade sur votre page.html

Dossier de départ

jquery_innerfade_start_es

 

*********************