Table des matières
1. Événement de clic
2. dblclick事件
二、鼠标事件
1. mouseenter和mouseleave事件
2. hover事件
rrreee
Maison interface Web js tutoriel Liste des événements jQuery courants

Liste des événements jQuery courants

Feb 24, 2024 am 11:57 AM
鼠标事件 键盘事件 点击事件 表单提交

Liste des événements jQuery courants

【Liste des événements couramment utilisés dans jQuery, des exemples de code spécifiques sont requis】

jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement Web. Dans jQuery, la gestion des événements est une partie très importante. Grâce aux événements, nous pouvons obtenir des effets interactifs et dynamiques sur la page. Cet article présentera les événements couramment utilisés dans jQuery, notamment les événements de clic, les événements de souris, les événements de clavier, etc., et fournira des exemples de code spécifiques.

1. Événement de clic

1. Événement de clic

L'événement de clic est un événement déclenché lorsqu'un élément est cliqué. Vous pouvez lier le gestionnaire d'événement de clic via la méthode click(). click()方法来绑定click事件的处理函数。

$("#btn").click(function(){
    alert("按钮被点击了!");
});
Copier après la connexion

2. dblclick事件

dblclick事件是元素被双击时触发的事件,可以通过dblclick()方法来绑定dblclick事件的处理函数。

$("#box").dblclick(function(){
    alert("盒子被双击了!");
});
Copier après la connexion

二、鼠标事件

1. mouseenter和mouseleave事件

mouseenter和mouseleave事件分别在鼠标进入和离开元素时触发,可以通过mouseenter()mouseleave()方法来绑定处理函数。

$("#box").mouseenter(function(){
    $(this).css("background-color", "red");
}).mouseleave(function(){
    $(this).css("background-color", "white");
});
Copier après la connexion

2. hover事件

hover事件在鼠标进入和离开元素时触发,可以通过hover()

$("#box").hover(function(){
    $(this).css("background-color", "blue");
}, function(){
    $(this).css("background-color", "white");
});
Copier après la connexion

2. Événement dblclick

L'événement dblclick est un événement déclenché lorsqu'un élément est double-cliqué. Vous pouvez lier la fonction de gestionnaire de l'événement dblclick via la méthode dblclick().

$(document).keydown(function(event){
    console.log("按下了键:" + event.key);
});

$(document).keypress(function(){
    console.log("按住键不放。");
});

$(document).keyup(function(){
    console.log("释放了键。");
});
Copier après la connexion

2. Événements de souris

1. Les événements mouseenter et mouseleave

mouseenter et mouseleave sont déclenchés lorsque la souris entre et quitte l'élément respectivement, et peuvent être transmis via mouseenter() et <. méthode code>mouseleave() pour lier la fonction de gestionnaire.

$("#input").change(function(){
    alert("输入框内容发生了变化。");
});

$("#form").submit(function(){
    alert("表单提交了。");
});

$(window).resize(function(){
    alert("窗口大小发生了变化。");
});
Copier après la connexion
2. Événement Hover

L'événement hover est déclenché lorsque la souris entre et quitte l'élément, et la fonction de gestionnaire peut être liée via la méthode hover().

rrreee

3. Événements de clavier

1. Les événements keydown, keypress et keyup🎜🎜les événements keydown, keypress et keyup sont déclenchés lorsque les touches du clavier sont enfoncées, maintenues enfoncées et relâchées respectivement, et les fonctions de traitement peuvent être liées via les touches correspondantes. méthodes. 🎜rrreee🎜4. Autres événements courants🎜🎜En plus des événements communs ci-dessus, jQuery prend également en charge d'autres événements, tels que la modification, la soumission, le redimensionnement, etc. Ces événements peuvent également être liés aux fonctions du gestionnaire via les méthodes correspondantes. 🎜rrreee🎜Dans les projets, l'utilisation rationnelle de ces événements peut ajouter de l'interactivité et de l'expérience utilisateur à la page. J'espère que le contenu de cet article pourra être utile à la majorité des développeurs. 🎜🎜Conclusion🎜🎜Grâce à l'introduction de cet article, nous avons découvert les événements couramment utilisés dans jQuery et leurs exemples de code correspondants. Ces événements sont des méthodes interactives couramment utilisées dans le développement Web, et leur maîtrise peut aider les développeurs à obtenir des effets de page plus riches. J'espère que les lecteurs pourront améliorer leurs compétences frontales grâce à la pratique et à l'apprentissage continu. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment ajouter des événements tactiles aux images dans vue Comment ajouter des événements tactiles aux images dans vue May 02, 2024 pm 10:21 PM

Comment ajouter un événement de clic à une image dans Vue ? Importez l'instance Vue. Créez une instance Vue. Ajoutez des images aux modèles HTML. Ajoutez des événements de clic à l'aide de la directive v-on:click. Définissez la méthode handleClick dans l'instance Vue.

Quel est le mécanisme événementiel des fonctions C++ en programmation concurrente ? Quel est le mécanisme événementiel des fonctions C++ en programmation concurrente ? Apr 26, 2024 pm 02:15 PM

Le mécanisme événementiel de la programmation simultanée répond aux événements externes en exécutant des fonctions de rappel lorsque des événements se produisent. En C++, le mécanisme événementiel peut être implémenté avec des pointeurs de fonction : les pointeurs de fonction peuvent enregistrer des fonctions de rappel à exécuter lorsque des événements se produisent. Les expressions Lambda peuvent également implémenter des rappels d'événements, permettant la création d'objets fonction anonymes. Le cas réel utilise des pointeurs de fonction pour implémenter des événements de clic sur un bouton de l'interface graphique, appelant la fonction de rappel et imprimant des messages lorsque l'événement se produit.

La différence entre event et $event dans vue La différence entre event et $event dans vue May 08, 2024 pm 04:42 PM

Dans Vue.js, event est un événement JavaScript natif déclenché par le navigateur, tandis que $event est un objet d'événement abstrait spécifique à Vue utilisé dans les composants Vue. Il est généralement plus pratique d'utiliser $event car il est formaté et amélioré pour prendre en charge la liaison de données. Utilisez l'événement lorsque vous devez accéder à des fonctionnalités spécifiques de l'objet événement natif.

Comment créer une application d'une seule page en utilisant PHP Comment créer une application d'une seule page en utilisant PHP May 04, 2024 pm 06:21 PM

Étapes pour créer une application monopage (SPA) à l'aide de PHP : créez un fichier PHP et chargez Vue.js. Définissez une instance Vue et créez une interface HTML contenant du texte d'entrée et de sortie. Créez un fichier de framework JavaScript contenant les composants Vue. Incluez des fichiers de framework JavaScript dans des fichiers PHP.

Pourquoi l'événement click dans js ne peut-il pas être exécuté à plusieurs reprises ? Pourquoi l'événement click dans js ne peut-il pas être exécuté à plusieurs reprises ? May 07, 2024 pm 06:36 PM

Les événements de clic en JavaScript ne peuvent pas être exécutés à plusieurs reprises en raison du mécanisme de propagation des événements. Pour résoudre ce problème, vous pouvez prendre les mesures suivantes : Utiliser la capture d'événement : Spécifiez un écouteur d'événement à déclencher avant que l'événement ne se déclenche. Remise des événements : utilisez event.stopPropagation() pour arrêter le bouillonnement des événements. Utilisez une minuterie : déclenchez à nouveau l'écouteur d'événements après un certain temps.

Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ? Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ? May 09, 2024 pm 02:33 PM

Les modificateurs d'événements Vue.js sont utilisés pour ajouter des comportements spécifiques, notamment : empêcher le comportement par défaut (.prevent) arrêter le bouillonnement d'événements (.stop) événement ponctuel (.once) capturer l'événement (.capture) écouter passivement les événements (.passive) Adaptatif modificateur (.self)Modificateur de touche (.key)

Comment utiliser le vide en Java Comment utiliser le vide en Java May 01, 2024 pm 06:15 PM

void en Java signifie que la méthode ne renvoie aucune valeur et est souvent utilisée pour effectuer des opérations ou initialiser des objets. Le format de déclaration de la méthode void est : void methodName() et la méthode appelante est methodName(). La méthode void est souvent utilisée pour : 1. Effectuer des opérations sans renvoyer de valeur ; 2. Initialiser des objets 3. Effectuer des opérations de traitement d'événements ;

Que signifie div en CSS Que signifie div en CSS Apr 28, 2024 pm 02:21 PM

Un DIV en CSS est un séparateur ou un conteneur de documents utilisé pour regrouper du contenu, créer des mises en page, ajouter du style et de l'interactivité. En HTML, l'élément DIV utilise la syntaxe <div></div>, où div représente un élément auquel des attributs et du contenu peuvent être ajoutés. DIV est un élément de niveau bloc qui occupe une ligne entière dans le navigateur.

See all articles