JQuery事件-CSDN博客

本文链接：https://blog.csdn.net/s990420/article/details/114267872

JQuery事件：

jQuery事件是对JavaScript事件的封装，常用事件分类如下：

基础事件：

鼠标事件
键盘事件
表单事件

复合事件：

鼠标光标悬停
鼠标连续点击

一、鼠标事件：

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标光标悬停事件</title>
    <script src="../jquery/jquery-3.4.1.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            padding: 0 5px;
        }
        .heightcontent{
            background-color: aqua;
        }
    </style>
    <script>
        $(function(){
            // 触发鼠标移过时的事件
            $("li").mouseover(function(){
                $(this).addClass("heightcontent");
            });
            // 触发鼠标移出时的事件
            $("li").mouseout(function(){
                $(this).removeClass();
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>服装</li>
        <li>家用电器</li>
        <li>数码产品</li>
        <li>足球</li>
    </ul>
</body>
</html>

在这里插入图片描述

二、键盘事件：

用户每次按下或者释放键盘上的键时都会产生事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>键盘事件</title>
    <script>
        $(function(){
            $(document).keydown(function(event){
                if(event.keyCode=="13"){
                    alert("确认要提交吗？");
                }
            });
        });
    </script>
</head>
<body>
    <!-- 当点击enter按键的时候弹出是否确认提交的弹窗 -->
    用户名<input type="text" name="userName"><br>
    密码<input type="password" name="password"><br>
    <input type="button" value="提交">
</body>
</html>

在这里插入图片描述

三、表单事件：

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>表单事件</title>
    <style>
        .content{
            background-color: aqua;
        }
    </style>
    <script>
        $(function(){
            $("[type=password").focus(function(){
                $(this).addClass("content");
            });
            $("[type=password]").blur(function(){
                $(this).removeClass();
            });
        });
    </script>
</head>

<body>
    用户名<input type="text" name="userName"><br>
    密码<input type="password" name="password"><br>
    <input type="button" value="提交">
</body>
</html>

在这里插入图片描述

四、绑定事件：

除了使用事件名绑定事件外，还可以使用bind()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>绑定事件</title>
    <script>
        $(function(){
            $("[type=button]").bind("click",function(){
                $("P").css("background-color","aqua");
            });
        });
    </script>
</head>
<body>
    <p>远赴人间惊鸿宴</p>
    <p>一睹人间盛世颜</p>
    <p>最是人间留不住</p>
    <p>朱颜辞镜花辞树</p>
    <input type="button" value="点击">
</body>
</html>

在这里插入图片描述

五、绑定多个事件：

bind()方法还可以同时为多个事件绑定方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>绑定多个事件</title>
    <script>
        $(function(){
            $("[type=button]").bind({
                mouseover:function(){
                    $("p").css("display","none");
                },
                mouseout:function(){
                    $("p").css("display","block");
                }
            })
        });
    </script>
</head>
<body>
    <p>早知如此绊人心</p>
    <p>何如当初莫相识</p>
    <input type="button" value="点击">
</body>
</html>

六、移除事件：

移除事件使用unbind()方法
当unbind()不带参数时，表示移除所绑定的全部事件

在这里插入图片描述

七、鼠标光标悬停事件：

hover()方法相当于mouseover与mouseout事件的组合

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>鼠标光标悬停事件</title>
    <style>
        li{
            list-style: none;
            float: left;
            padding: 0 10px;
        }
        .ulcontent{
            list-style: none;
            float: none;
        }
    </style>
    <script>
        $(function(){
            $("li").hover(function(){
                $("#show").css("display","block")
            },
            function(){
                $("#show").css("display","none")
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>电器</li>
        <li>
            数码产品
            <ul id="show">
                <li class="ulcontent">手机</li>
                <li class="ulcontent">蓝牙耳机</li>
                <li class="ulcontent">电脑</li>
            </ul>
        </li>
        <li>服装</li>
    </ul>
</body>
</html>