jQuery Facile #2/10 : Les méthodes liées à la souris
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO jQuery Facile #2/10 : Les méthodes liées à la souris

Carl Brison
19,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Nous continuons notre série de cours vidéo dédiés à l'apprentissage du langage jQuery.
👉 N'hésitez pas à suivre le premier volet qui est gratuit. Il est dédié à la philosophie de jQuery.

Pour ce second volet, nous allons passer en revue les méthodes d'événements liées à la souris.
Nous allons ainsi apprendre à capter les événements que fait l'utilisateur avec sa souris et en temps réel !
Nous pourrons ainsi déclencher des actions si l'utilisateur :

  • clique ou double-clique sur sa souris,
  • passe le pointeur de sa souris dans une zone donnée,
  • retire le pointeur de sa souris d'une zone donnée.

Nous pourrons ainsi manipuler des éléments HTML, afin de rendre nos pages web encore plus attractives pour l'utilisateur.
Comme dans le premier volet, nous conserverons nos bonnes habitudes de développeurs, en mettant à jour notre documentation que nous enrichirons des nouvelles méthodes d'événements apprises dans ce cours.

Ensuite, nous mettrons en application concrète ce que nous aurons appris afin de vous exercer à utiliser efficacement ses méthodes.
Pour cet exercice pratique, nous ferons un classique du genre : la création d'une fenêtre modale.
L'utilisateur cliquera sur un bouton et une fenêtre modale apparaîtra à l'écran en grisant le fond de la page web.
L'utilisateur aura également la possibilité de fermer la modale par un simple clic sur une petite croix prévue à cet effet.
Je mets les codes de cet exercice à votre disposition.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Les méthodes d'événement liées à la souris
Chapitre 2
Exercice d'application
Chapitre 3
Pour la prochaine fois

Plan détaillé du cours

Chapitre 1 : Les méthodes d'événement liées à la souris
45m21s
 
Leçon 1La méthode d'événement click
Leçon 2La méthode d'événement dblclick
Leçon 3Les méthodes d'événement mouseenter et mouseleave
Leçon 4La méthode d'événement hover
Leçon 5Les méthodes d'événement mousedown et mouseup
Leçon 6La méthode d'événement mousemove
Leçon 7Mettre à jour notre documentation
Chapitre 2 : Exercice d'application
46m40s
 
Leçon 1Mettre en place le code HTML de la page web
Leçon 2Mettre en forme le header
Leçon 3Mettre en place le code HTML de la modale
Leçon 4Mettre en forme la modale
Leçon 5Ecrire le script jQuery
Chapitre 3 : Pour la prochaine fois
08m26s
 
Leçon 1Pour la prochaine fois

Aperçus

Avis des apprenants

Détail des avis
7
Apprenants
8
Commentaires
5/5
Note moyenne
5/5
8
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 19/05/2023
C'est vrai que c'est génial :) j'ai même réussi toute seule à faire fonctionner le tout. J'avais juste mis la fonction du clic sur la croix dans la même fonction que le clic sur le bouton, et ça fonctionnait aussi. Mais j'ai corrigé :-) C'est génial et passionnant. J'espère après tout ça, ne pas m'embrouiller entre javaScript et jQuery. On se retrouve pour le 3ème volet. Merci à vous.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Cyrille Monstard
Cyrille Monstard
Publié le 25/04/2023
Super Tutoriel, parfait, merci Carl
Carl Brison
Carl Brison
Merci beaucoup Ameb ;-)
Eric Reynaud
Eric Reynaud
Publié le 11/04/2023
Merci beaucoup Carl pour ce nouveau tuto très enrichissant ! Toujours aussi percutant ! Bravo ! A bientôt, Eric
Carl Brison
Carl Brison
Merci beaucoup Eric, c'est vraiment très gentil ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

jQuery

Que contient le fichier source ?

Le code source de l'exercice d'application ainsi que notre documentation jQuery.

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données