jquery 第三天

最新推荐文章于 2022-01-05 20:12:42 发布

听风，等雨

最新推荐文章于 2022-01-05 20:12:42 发布

阅读量76

点赞数 2

本文链接：https://blog.csdn.net/qq_53692029/article/details/114295552

版权

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="js/jquery-1.8.3.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            padding: 0 5px;
        }
        .color{
            background-color: blue;
        }
    </style>
    <script>
        $(function(){
            // 触发鼠标移过时的事件
            $("li").mouseover(function(){
                $(this).addClass("color");
            });
            // 触发鼠标移出时的事件
            $("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">
        <title>Document</title>
        <script src="./js/jquery-1.8.3.js"></script>
    
    </head>
    
    <body>
        <script>
            $(function () {
                $("[type=password]").keydown(function () {
                    $("#show").append("keydown");
                }).keyup(function () {
                    $("#show").append("keyup");
                }).keypress(function () {
                    $("#show").append("keypress");
                });
                $(document).keydown(function (event) {
                    if (event.keyCode == "13") {
                    // 13是键盘Enter键
                        alert("确认要提交吗？？");
                    }
                });
    
            });
        </script>
        账号<input type="text" name="userName"><br>
        密码<input type="password" name="psw"><br>
        <input type="submit" value="提交"><br>
        <span id="show"></span>
    </body>
    
    </html>

三表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：
在这里插入图片描述
例如

四绑定事件

除了使用事件名绑定事件外，还可以使用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>
    <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>

听风，等雨

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
jquery 第三天

JQuery事件：jQuery事件就是对JavaScript事件封装以方便代码书写和使用，常用的事件分类如下：基础事件鼠标事件键盘事件表单事件复合事件是多个事件的组合鼠标光标悬停鼠标连续点击一鼠标事件鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：代码实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫