Cours n°2.2
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)
- Téléchargez le dossier de départ
- Greffez le jQuery dans votre projet
- Testez le fonctionnement de jQuery (voir code)
- Cacher d’abord l’image lors du clic (voir .hide)
- Ensuite un deuxième bouton qui remontre l’image (.show)
- Enfin un seul bouton qui fait les deux comme un interrupteur (toggle)
- Have fun !
Dossier de départ
Sources
- Le site jQuery
- Vos premiers pas avec jQuery !
- .hide() avec un seul bouton
- .show() avec deux boutons
- .slideToggle() avec un seul bouton pour montrer et cacher
- Faire vibrer avec jRumble
- Animer images avec StickersJs
- Swipe avec jQuery Mobile
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)
- Téléchargez le dossier de départ
- Analysez le dossier Innerfade
- Greffez Innerfade sur votre page.html
Dossier de départ