Learn more about jQuery common events-JS Tutorial-php.cn

Learn more about jQuery common events

王林

Release： 2024-02-22 12:42:03

Original

610 people have browsed it

Learn more about jQuery common events

jQuery is a JavaScript library widely used in web development. It provides many powerful functions and methods, of which event handling is an important feature. In the process of web development, we often need to trigger and process events to achieve interactive effects and page dynamic effects. This article will take a deep dive into common jQuery events and demonstrate their usage with concrete code examples.

1. Click event (click)

Click event is one of the most common events, which is triggered when the user clicks on an element. Through jQuery, we can easily add click events to specific elements and perform corresponding operations when the event occurs. The following is an example of a simple click event:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
$(document).ready(function(){
    $("#myButton").click(function(){
        alert("按钮被点击了！");
    });
});
</script>
</head>
<body>
<button id="myButton">点击我</button>
</body>
</html>

Copy after login

In this example, when the button is clicked, a prompt box will pop up showing "The button was clicked!".

2. Mouse in and out events (mouseenter, mouseleave)

Mouse in and out events are triggered when the mouse enters and leaves the element respectively. These two events are usually used to implement functions such as floating effects or menu expansion and collapse. The following is an example of a mouse move in and out event:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入移出事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
$(document).ready(function(){
    $("#myDiv").mouseenter(function(){
        $(this).css("background-color", "yellow");
    });
    
    $("#myDiv").mouseleave(function(){
        $(this).css("background-color", "white");
    });
});
</script>
</head>
<body>
<div id="myDiv" style="width: 100px; height: 100px;">鼠标移入移出我</div>
</body>
</html>

Copy after login

In this example, when the mouse moves into the <div> element, the background color will change to yellow; when the mouse moves out<div> element, the background color will return to white.

3. Keyboard events (keydown, keypress, keyup)

Keyboard events can capture user operations on the keyboard, such as pressing, holding, and releasing keys. The following is an example of keyboard events, demonstrating the keydown, keypress, and keyup events respectively:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
$(document).ready(function(){
    $(document).keydown(function(e){
        console.log("键码：" + e.keyCode);
    });
    
    $(document).keypress(function(e){
        console.log("按键：" + String.fromCharCode(e.which));
    });
    
    $(document).keyup(function(){
        console.log("按键释放");
    });
});
</script>
</head>
<body>
在此处点击键盘
</body>
</html>

Copy after login

In this example, when When the keyboard is pressed anywhere on the page, the corresponding key code or key information will be output on the console, as well as the key release prompt.

4. Double-click event (dblclick)

Double-click event is triggered when the user double-clicks an element. It is often used to implement functions such as double-click editing or pop-up of detailed information. Here is an example of a double-click event:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双击事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
$(document).ready(function(){
    $("#myText").dblclick(function(){
        $(this).css("font-weight", "bold");
    });
});
</script>
</head>
<body>
<p id="myText">双击我改变字体加粗</p>
</body>
</html>

Copy after login

In this example, when the paragraph element is double-clicked, the font will change to bold style.

Through the above code examples, we have a preliminary understanding of how to use common events in jQuery, including click events, mouse move-in and move-out events, keyboard events, and double-click events. In actual development, we can use these events to achieve various interactive effects and dynamic effects according to specific needs, making the page more vivid and attractive. I hope this article is helpful to you, and you are welcome to continue to learn more and explore more uses of jQuery events.

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