Share This
Lorsqu’on dit qu’il y a une première fois à tout, et bien moi celle-ci je la partage avec tout le monde.
Depuis le temps que je voulais tester, je m’y suis enfin mise et je suis GENTILLE et JE PARTAGE.
D’abord, si vous n’avez aucune idée de ce qu’est le JQuery, allez consulter le cours de @Scica (Eh Oui, je ne suis pas là pour vous faire le cours, je partage REK :D).
Bon, pour ce premier test, j’ai voulu expérimenter les effets ‘Hover’ de la souris sur un élément HTML.
Pour cela, j’ai juste créé les fichiers suivants :
-
index.html : La page HTML principale
-
css/style.css : La feuille de style (juste pour rendre joli le tout)
-
script/jquery.js : Ce fichier représente la bibliothèque (Javascript) téléchargée à partir du site
-
script/my-script.js : Ceci constitue le fichier de script qui va contenir mes méthodes.
La structure de mon fichier index.html se présente comme ceci :
Les scripts sont chargés avant la fermeture de la balise <body>.
Ce qui est intéressant, c’est qu’au départ je chargeais mon script avant celui de JQuery et cela empêchait l’exécution de mes méthodes. Donc, veuillez à charger ce dernier avant les autres afin d’éviter tout problème de ce genre.
La page HTML complète :
Ma feuille de style, style.css :
Et enfin, mon script my-script.js que j’expliquerai quand même:
-
Le caractère ‘$’ signifie que l’on appelle la bibliothèque JQuery. On peut le remplacer par ‘jquery’ également (IDEM).
-
L’appel de la fonction ready veut juste dire que le code entre les crochets ne sera exécuté que lorsque le DOM (Document Object Model ou encore appelé “Arbre d’Objets Node”) sera entièrement chargé.
Donc, j’ai 2 fonctions qui seront exécutées une fois le DOM chargé :
-
La première fonction va directement puiser vers l’élément liste <li > et détecter l’événement ‘mouseenter’ de la souris (c’est-à-dire au passage de la souris) et chercher l’élément paragraphe <p> pour lui dire de s’afficher : slideDown(). Vous remarquerez que dans la feuille de style, les paragraphes sont cachés.
-
La deuxième fonction, elle, va faire le contraire et détecter l’événement ‘mouseleave’ de la souris et faire un slideUp() pour cacher le paragraphe à nouveau.
Simple non !
Après exécution, vous verrez un bel effet au passage de la souris sur les éléments de la liste créée. Un exemple du site montre presque les mêmes effets réalisés par le code précédent (dans notre cas, sur un évènement ‘souris’, dans leur code sur un évènement ‘click’)
Pour ma part, je trouve la manipulation du JQuery pas trop difficile, il suffit de bien analyser la structure du DOM et voilà.
Pour plus d’infos, referrez vous aux tutos suivants :
Leylisha
Latest posts by Leylisha (see all)
- JQuery : Ma première fois - 24/04/2014
- Hibernate: Let’s Practice guys - 12/10/2013
- IBM : Le Film - 01/05/2013
- Entretien d’embauche : Act like a boss, Speak like an engineer! - 16/03/2013