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 1 (.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 2 (.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
>> Voir TEAMS
Exercice 3 (Bodin)
Vous devez refaire le site web HTML + CSS de Quentin Bodin. Ensuite vous devez y greffer des jQuery. Les explications sont dans le dossier complet. >> Voir TEAMS.