第十五章 jQuery中的事件-CSDN博客

本文链接：https://blog.csdn.net/qq_36827283/article/details/125604767

jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类
基础事件
鼠标事件
键盘事件
window事件
表单事件
复合事件
鼠标光标悬停
鼠标连续点击

鼠标事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

方法	相同点	不同点
mouseover( )	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时：触发mouseover( ) 不触发mouseenter
mouseenter( )
mouseout( )	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时：触发mouseout不触发mouseleave
mouseleave( )

键盘事件

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				$(".a").keydown(function(){
					$(".a1").append("按下");
				});
				$(".a").keyup(function(){
					$(".a1").append("弹起");
				});
				$(document).keypress(function(){
					//alert(event.keyCode);
					if(event.keyCode==13){
						alert("您输入了回车键")
					}
				});
			});
		</script>
	</head>
	<body>
		<input type="text" class="a" ><span class="a1"></span>
		<input type="text" class="b" ><span class="b1"></span>
		<input type="text" class="c" ><span class="c1"></span>
		
	</body>
</html>

浏览器事件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lOeQTepK-1656926568019)(D:\课件\笔记\jQuery中的事件与动画.assets\image-20220623091330634.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{height: 200px;}
		</style>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				$(window).resize(function(){
					$("div").css("background-color","red");
				});
			});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

绑定事件

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
	<script src="js/jquery.js"></script>
	<script>
		 $(function(){
		// 	$("li").mouseenter(function(){
		// 		var index=$(this).index();
		// 		$("li:eq("+index+") p").show();
		// 		$("li:eq("+index+") span").css("background-color","#c81623");
		// 	});
		// 	$("li").mouseleave(function(){
		// 		var index=$(this).index();
		// 		$("li:eq("+index+") p").hide();
		// 		$("li:eq("+index+") span").css("background-color","#7a6e6e");
		// 	});
			$("li").bind({
				mouseenter:function(){
					var index=$(this).index();
					$("li:eq("+index+") p").show();
					$("li:eq("+index+") span").css("background-color","#c81623");
				},
				mouseleave:function(){
					var index=$(this).index();
					$("li:eq("+index+") p").hide();
					$("li:eq("+index+") span").css("background-color","#7a6e6e");
				}
			});
		});
	</script>
</head>
<body>
<nav id="nav">
    <li><span></span><p>就东会员</p></li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
</body>
</html>

移除事件

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
	<script src="js/jquery.js"></script>
	<script>
		 $(function(){
		// 	$("li").mouseenter(function(){
		// 		var index=$(this).index();
		// 		$("li:eq("+index+") p").show();
		// 		$("li:eq("+index+") span").css("background-color","#c81623");
		// 	});
		// 	$("li").mouseleave(function(){
		// 		var index=$(this).index();
		// 		$("li:eq("+index+") p").hide();
		// 		$("li:eq("+index+") span").css("background-color","#7a6e6e");
		// 	});
			$("li").bind({
				mouseenter:function(){
					var index=$(this).index();
					$("li:eq("+index+") p").show();
					$("li:eq("+index+") span").css("background-color","#c81623");
				},
				mouseleave:function(){
					var index=$(this).index();
					$("li:eq("+index+") p").hide();
					$("li:eq("+index+") span").css("background-color","#7a6e6e");
				}
			});
			$("#nav").click(function(){
				$("li").unbind("mouseleave");
			});
		});
	</script>
</head>
<body>
<nav id="nav">
    <li><span></span><p>就东会员</p></li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
</body>
</html>

复合事件

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

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
	<script src="js/jquery.js"></script>
	<script>
		 $(function(){
			$("li").hover(function(){
					var index=$(this).index();
					$("li:eq("+index+") p").show();
					$("li:eq("+index+") span").css("background-color","#c81623");
				},function(){
					var index=$(this).index();
					$("li:eq("+index+") p").hide();
					$("li:eq("+index+") span").css("background-color","#7a6e6e");
				}
			);
		});
	</script>
</head>
<body>
<nav id="nav">
    <li><span></span><p>就东会员</p></li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
</body>
</html>

toggle()方法用于模拟鼠标连续click事件

在这里插入图片描述

<html>
<head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
</body>
</html>