HTML (fichier ”base-jQuery.html
”) :
url pour charger jQuery depuis Google https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
JavaScript (fichier ”base-jQuery.js
”) :
Tester :
console.log(…)
”$('h1')
” : sélectionne l'élément H1
$('h1').hide()
” … ? (indice)
Les ”console.log(…)
” servent à vérifier que votre code est bien chargé. Vous pouvez les retirer :
Ce code est la “base” de tout projet utilisant jQuery.
Ajouter à votre code un gestionnaire d'événement qui réagit au “click” sur un élément H1
:
Tester : Cliquer sur le H1
.
Ajouter à votre page une feuille de style et utiliser le style :
CSS (fichier ”base-jQuery.css
”) :
Tester : le H1
s'affiche en rouge.
On va utiliser la méthode toggleClass de jQuery.
Chaque fois que c'est possible, vous devez tester les commandes JavaScript/jQuery dans la console avant d'essayer de les utiliser dans votre code :
Tester :
en-rouge
” à l'élément.
Ajouter à votre page un autre élément H1
:
Tester : Vous devez constater que les DEUX titre (H1
) changent de couleur (quel que soit le titre sur lequel l'on clic).
Explication :
$('h1')
” sélectionne tous les éléments H1
de la page.$('h1').toggleClass("en-rouge")
”
Pour éviter cela, l'on peu utiliser ”this
” qui dans un gestionnaire d'événement désigne spécifiquement sur “qui” l'événement a été déclenché.
Tester : seul le titre sur lequel l’on click doit changer de couleur.
Ajouter à votre code CSS :
h1 { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
<body> <h1>Accordéon - jQuery</h1> <ul id="accordeon"> <li> <figure> <img src="http://immediatenet.com/t/s?Size=1024x768&URL=src-media.com" alt="src-media.com" width="102" height="77"> <figcaption> <h3>Le DUT des métiers du web</h3> <p>département SRC de montbéliard</p> </figcaption> </figure> </li> <li class="actif"> <figure> <img src="http://immediatenet.com/t/s?Size=1024x768&URL=xaviersenente.pu-pm.univ-fcomte.fr" alt="xaviersenente.pu-pm.univ-fcomte.fr" width="102" height="77"> <figcaption> <h3>xaviersenente.pu-pm.univ-fcomte.fr</h3> <p>Site Web de Xavier SENENTE</p> </figcaption> </figure> </li> <li> <figure> <img src="http://immediatenet.com/t/s?Size=1024x768&URL=pracht.org" alt="pracht.org" width="102" height="77"> <figcaption> <h3>Pracht Pierre - Cours</h3> <p>Cours de Pierre Pracht</p> </figcaption> </figure> </li> </ul> </body>
Écrire le code CSS pour obtenir la présentation suivante :
Vous pouvez démarrer avec le code suivant :
Tester : Dans la console les commandes suivante :
Les méthodes ”.addClass()
” et ”.removeClass()
” sont des variantes de ”.toggleClass()
” utilisé précédemment.
Complétez le code JavaScript :