Table of Contents
1. Click event
1. click event
2. dblclick event
2. Mouse events
1. mouseenter and mouseleave events
2. Hover event
3. Keyboard events
1. keydown, keypress and keyup events
4. Other common events
Conclusion
Home Web Front-end JS Tutorial List of common jQuery events

List of common jQuery events

Feb 24, 2024 am 11:57 AM
mouse events Keyboard events click event form submission

List of common jQuery events

[List of commonly used events in jQuery, specific code examples are required]

jQuery is a popular JavaScript library that is widely used in web development. In jQuery, event handling is a very important part. Through events, we can achieve interactive and dynamic effects on the page. This article will introduce commonly used events in jQuery, including click events, mouse events, keyboard events, etc., and provide specific code examples.

1. Click event

1. click event

The click event is an event triggered when an element is clicked. It can be obtained through the click() method. Bind the handler function of the click event.

$("#btn").click(function(){
    alert("按钮被点击了!");
});
Copy after login

2. dblclick event

The dblclick event is an event triggered when an element is double-clicked. The handler function of the dblclick event can be bound through the dblclick() method.

$("#box").dblclick(function(){
    alert("盒子被双击了!");
});
Copy after login

2. Mouse events

1. mouseenter and mouseleave events

mouseenter and mouseleave events are triggered when the mouse enters and leaves the element respectively. They can be passed mouseenter( ) and mouseleave() methods to bind the handler function.

$("#box").mouseenter(function(){
    $(this).css("background-color", "red");
}).mouseleave(function(){
    $(this).css("background-color", "white");
});
Copy after login

2. Hover event

The hover event is triggered when the mouse enters and leaves the element, and the handler function can be bound through the hover() method.

$("#box").hover(function(){
    $(this).css("background-color", "blue");
}, function(){
    $(this).css("background-color", "white");
});
Copy after login

3. Keyboard events

1. keydown, keypress and keyup events

keydown, keypress and keyup events are triggered when the keyboard keys are pressed, held down and released respectively , the processing function can be bound through the corresponding method.

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

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

$(document).keyup(function(){
    console.log("释放了键。");
});
Copy after login

4. Other common events

In addition to the above-mentioned common events, jQuery also supports other events, such as change, submit, resize, etc. These events can also be bound to handler functions through corresponding methods.

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

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

$(window).resize(function(){
    alert("窗口大小发生了变化。");
});
Copy after login

In projects, reasonable use of these events can add interactivity and user experience to the page. I hope the content of this article can be helpful to the majority of developers.

Conclusion

Through the introduction of this article, we have learned about the commonly used events in jQuery and their corresponding code examples. These events are commonly used interactive methods in web development, and mastering them can help developers achieve richer page effects. I hope readers can improve their front-end skills through practice and continuous learning.

The above is the detailed content of List of common jQuery events. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to get form data in layui How to get form data in layui Apr 04, 2024 am 03:39 AM

layui provides a variety of methods for obtaining form data, including directly obtaining all field data of the form, obtaining the value of a single form element, using the formAPI.getVal() method to obtain the specified field value, serializing the form data and using it as an AJAX request parameter, and listening Form submission event gets data.

How to add touch events to pictures in vue How to add touch events to pictures in vue May 02, 2024 pm 10:21 PM

How to add click event to image in Vue? Import the Vue instance. Create a Vue instance. Add images to HTML templates. Add click events using the v-on:click directive. Define the handleClick method in the Vue instance.

How to implement front-end and back-end interaction in layui How to implement front-end and back-end interaction in layui Apr 01, 2024 pm 11:33 PM

There are the following methods for front-end and back-end interaction using layui: $.ajax method: Simplify asynchronous HTTP requests. Custom request object: allows sending custom requests. Form control: handles form submission and data validation. Upload control: easily implement file upload.

Hongmeng HarmonyOS and Go language development Hongmeng HarmonyOS and Go language development Apr 08, 2024 pm 04:48 PM

Introduction to HarmonyOS and Go language development HarmonyOS is a distributed operating system developed by Huawei, and Go is a modern programming language. The combination of the two provides a powerful solution for developing distributed applications. This article will introduce how to use Go language for development in HarmonyOS, and deepen understanding through practical cases. Installation and Setup To use Go language to develop HarmonyOS applications, you need to install GoSDK and HarmonyOSSDK first. The specific steps are as follows: #Install GoSDKgogetgithub.com/golang/go#Set PATH

How to set up jump on layui login page How to set up jump on layui login page Apr 04, 2024 am 03:12 AM

Layui login page jump setting steps: Add jump code: Add judgment in the login form submit button click event, and jump to the specified page through window.location.href after successful login. Modify the form configuration: add a hidden input field to the form element of lay-filter="login", with the name "redirect" and the value being the target page address.

Detailed explanation of JavaScript obtaining web page elements Detailed explanation of JavaScript obtaining web page elements Apr 09, 2024 pm 12:45 PM

Answer: JavaScript provides a variety of methods for obtaining web page elements, including using ids, tag names, class names, and CSS selectors. Detailed description: getElementById(id): Get elements based on unique id. getElementsByTagName(tag): Gets the element group with the specified tag name. getElementsByClassName(class): Gets the element group with the specified class name. querySelector(selector): Use CSS selector to get the first matching element. querySelectorAll(selector): Get all matches using CSS selector

What is the role of Serverlet in Java What is the role of Serverlet in Java Apr 12, 2024 pm 02:39 PM

Servlet serves as a bridge for client-server communication in Java Web applications and is responsible for: processing client requests; generating HTTP responses; dynamically generating Web content; responding to customer interactions; managing HTTP session state; and providing security protection.

What is the event-driven mechanism of C++ functions in concurrent programming? What is the event-driven mechanism of C++ functions in concurrent programming? Apr 26, 2024 pm 02:15 PM

The event-driven mechanism in concurrent programming responds to external events by executing callback functions when events occur. In C++, the event-driven mechanism can be implemented with function pointers: function pointers can register callback functions to be executed when events occur. Lambda expressions can also implement event callbacks, allowing the creation of anonymous function objects. The actual case uses function pointers to implement GUI button click events, calling the callback function and printing messages when the event occurs.

See all articles