JQuery学习笔记之鼠标的各种事件

最新推荐文章于 2025-07-23 13:26:12 发布

原创最新推荐文章于 2025-07-23 13:26:12 发布 · 316 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文通过一个具体的HTML页面示例，介绍了使用JQuery处理不同类型的鼠标事件的方法，包括按钮点击、鼠标进入和离开等事件，并展示了如何改变输入框背景颜色及进行简单的计数操作。

html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>
    <form>
        <input type="text"/>
        <input type="button" value="按钮"/>
    </form>
    <div style="background-color: blueviolet; width: 300px">
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <p>窗口改变:<span></span></p>
    </div>
</body>
</html>

JQuery代码：

$(document).ready(function () {

    var i = 0;

    // 鼠标点击事件：click是按下和弹起两个动作；
    $(":button").click(function(){                    
        $(":text").css("background-color", "green");
    });

    // 鼠标左键按下事件：
    $(":button").mousedown(function(){
        $(":text").css("background-color", "blue");
    });
    
    // 鼠标左键弹起事件：
    $(":button").mouseup(function(){
        $(":text").css("background-color", "green");
    });

    // 鼠标进入元素事件：
    $("div").mouseenter(function(){
        $(":text").css("background-color", "red");
    });
    
    // 鼠标离开元素事件：
    $("div").mouseleave(function(){
        $(":text").css("background-color", "blueviolet");
    });

    // 鼠标进入元素或其子元素时触发的事件：
    $("div").mouseover(function(){
        $(":text").css("background-color", "red");
        $("span").text(i++);
    });
    
    // 鼠标离开元素或其子元素时触发的事件：
    $("div").mouseout(function(){
        $(":text").css("background-color", "blueviolet");
    });
});

//$(document).ready(function () {
//    var i = 0;
//    $(window).resize(function () {      // 当浏览器的窗口大小发生改变时触发resize事件；
//        $("span").text(i++);
//    });
//});