jQuery事件

最新推荐文章于 2023-01-07 11:07:03 发布

不是很菜的菜

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量93

点赞数 2

文章标签： jquery

本文链接：https://blog.csdn.net/s001125/article/details/114287195

版权

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 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="./JQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
    输入你的名字<input type="text">
	<p>按键的次数<span>0</span></p>

	<script>
		//事件1.记录键盘按键的次数
		i=0;
		$(document).ready(function(){
			$("input").keypress(function(){
				$("span").text(i+=1);
			});
		});
		//事件2.当键盘被按下时
		$(document).ready(function(){
			$("input").keydown(function(){
				$("input").css("background-color","yellow");
				//事件3.当键盘抬起时
				$("input").keyup(function(){
					$("input").css("background-color","pink");
				});
			});
		});
		
	</script>
</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="./JQuery/jquery-3.4.1.js"></script>
    <style>
        li{
            list-style: none;
            padding-left: 10px;
            float: left;
        }
        .show{
            background-color: red;
        }
    </style>
    <script>
        $(function(){
            $("li").mousemove(function(){
                $(this).css("background","red");
            }).mouseout(function(){
                $(this).css("background","white");
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>主页</li>
        <li>用户中心</li>
    </ul>
</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="./JQuery/jquery-3.4.1.js"></script>
    <style>
        li{
            list-style: none;
            padding-left: 10px;
            float: left;
        }
        .show{
            background-color: red;
        }
    </style>
    <script>
        $(function(){
            $("li").bind("mousemove",function() {
                $(this).css("background-color","red");
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>主页</li>
        <li>用户中心</li>
    </ul>
</body>
</html>

在这里插入图片描述

不是很菜的菜

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
jQuery事件

jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。事件总结键盘事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
复制链接

扫一扫