jQuery内容整合---（三）常见的几种jQuery事件_jq绑定事件的几种方式-CSDN博客

本文链接：https://blog.csdn.net/CSDN9825/article/details/114287709

一、鼠标事件
在这里插入图片描述
代码实例如下：

<!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="../jq/jquery-3.4.1.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            text-decoration: none;
            padding: 0 5px;
        }
        .show1{
            background-color: aqua;
        }
    </style>
    <script>
        $(function(){
            $('li').mouseover(function(){//鼠标移动到导航栏触发
                $(this).addClass('show1');//添加show这个样式
            });
            $('li').mouseout(function(){//鼠标移出导航栏时删除该样式
                $(this).removeClass('show1');
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>家电</li>
        <li>厨房用品</li>
        <li>生活用品</li>
    </ul>
    
</body>

二、键盘事件
在这里插入图片描述
代码实例如下：

<!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="../jq/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $('[type="text"]').keydown(function(){
                $('#show').append('keydown');
            }).keypress(function(){
                $('#show').append('keypress');
            }).keyup(function(){
                $('#show').append('keyup');
            });

            $(document).keydown(function(event){
                if(event.keyCode=='13'){
                    alert('确认要提交吗？');
                }
            })
        });
    </script>
</head>
<body>
    输入: <input type="text" name="inp"><br>
    <button>提交</button><br>
    <span id="show"></span>
</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="../jq/jquery-3.4.1.js"></script>
    <style>
        .show{
            background-color: aqua;
        }
    </style>
    <script>
        $(function(){
            $('[type="text"]').focus(function(){
                $(this).addClass('show');
            });
            $('[type=text]').blur(function(){
                $(this).removeClass('show');
            });
        });
    </script>
</head>
<body>
    用户名：<input type="text" id="username"><br>
    密码：<input type="password" id="psw"><br>
    <button>登录</button>
</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">
    <title>Document</title>
    <script src="../jq/jquery-3.4.1.js"></script>
    <script>
        $(function(){
        //绑定单个事件
            $('#show').bind('click',function(){
                $('p').css('color','green');
            });
         //移除事件
         // $('#show').unbind();
         // $('#show').unbind([事件类型]，[处理函数]);
		//绑定多个事件
            $('#show').bind({mouseover:function(){
                $('p').css('display','none');
            },mouseout:function(){
                $('p').css('display','block');
            }
        });
        });
    </script>
</head>
<body>
    <h1>人生</h1>
    <p>也许生活就这样</p>
    <button id="show">点此体验</button>
</body>
</html>

五、鼠标光标悬停事件
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">
    <title>Document</title>
    <script src="../jq/jquery-3.4.1.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            text-decoration: none;
            padding: 10px 20px;
        }
        #show li{
            list-style: none;
            float: none;
        }
    </style>
    <script>
        $(function(){
            $('#show1').hover(function(){
                $('#show').css('display','block');
            },function(){
                $('#show').css('display','none');
            });
        });
    </script>
</head>
<body>
    <ul>首页<br>
        <li id="show1">电器城
            <ul id="show" style="display: none;">
                <li>电脑</li>
                <li>手机</li>
                <li>洗衣机</li>
            </ul>
        </li>
        <li>服装</li>
        <li>家具</li>
        <li>蔬菜</li>
    </ul>
</body>
</html>