2.2 JQuery
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);
- Créez ensuite un deuxième bouton à côté qui remontre l’image (.show);
- Créez enfin un troisième bouton qui fait les deux (cacher-montrer) comme un interrupteur (.slideToggle);
- 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
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)
KIT DE SURVIE AU FU***** CODE :
- je respire calmement;
- je télécharge le dossier de départ;
- j’analyse le dossier Innerfade;
- je crée le site avec une liste images (ul + li);
- je récupère le « jQuery.js » et « innerfade.js »;
- attention le « innerfade.js » utilise « jQuery.js »
>>> donc il doit se mettre en dessous dans le code; - je les mets dans mon petit dossier;
- je les relie via le « head » de mon HTML;
- je tente de comprendre comment fonctionne le « innerfade »;
- je copie/colle certains codes et tente une greffe;
- si cela marche, je m’offre un bounty sans sucre.
Dossier de départ