jQuery中的事件与动画

最新推荐文章于 2024-09-24 21:17:34 发布

VaporGas

最新推荐文章于 2024-09-24 21:17:34 发布

阅读量1k

点赞数 18

分类专栏： JQuery 文章标签： jquery 前端 javascript 学习

本文链接：https://blog.csdn.net/weixin_52937170/article/details/141954544

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

网页中的事件

和winform一样，在网页中的事件也是实现和用户交互的基础
例如tab页切换效果，可以通过鼠标点击事件来实现

jQuery中的事件

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

鼠标事件

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

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover()	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout()	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

例：以mouseover()为例，实现鼠标移过时特效

需求：实现主导航栏鼠标移动时的特效：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		li {
			/* 添加左浮动，去除列表前面的小圆点，左边距 */
			float: left;
			list-style: none;
			margin-left: 15px;
		}

		.heightlight {
			/* 设置背景色和悬浮指针特效（小手） */
			background-color: lightgray;
			cursor: pointer;
		}
	</style>

	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<ul id="nav">
			<li>首页</li>
			<li>服装城</li>
			<li>电器城</li>
			<li>易购超市</li>
		</ul>
		<script>
			$("#nav li").mouseover(function(){
				// $(this):代表当前调用mouseover的jquery对象
				$(this).addClass("heightlight");
			}).mouseout(function(){
				$(this).removeClass("heightlight");
			})
			
			
			
		</script>
	</body>
</html>

键盘事件

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

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

例：以keydown ()为例，实现按键时特效

需求：提交表单时，使用回车键进行提交：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<!-- 这里的action提交的是本地页面 -->
		<form id="frm"  action="dest.html" method="post">
			用户名：<input type="text" name="username"/><br />
			密码：<input type="password" name="password"/><br />
			<input type="button" value="提交" />
		</form>
	</body>
	<script>
			//keydown事件只能绑定$(document)对象，表示键盘按下时触发
			// 事件对象event中封装了事件的参数
			$(document).keydown(function(event) {
					if (event.keyCode == 13) { //回车键对应的值是13
						var answer = confirm('确认提交吗?');
						if (answer) {
							$("#frm").submit();
						}
		
					}
				});
	</script>
</html>

表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法	描述	执行时机
focus()	触发或将函数绑定到指定元素的focus事件	获得焦点
blur()	触发或将函数绑定到指定元素的blur事件	失去焦点

例：在上面的表单提交的例子基础上，在表单项添加聚焦和失去焦点的特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.8.3.js"></script>
	<style>
		.input_focus{
			background-color: skyblue;
		}
	</style>
	<body>
		<!-- 这里的action提交的是本地页面 -->
		<form id="frm"  action="dest.html" method="post">
			用户名：<input type="text" name="username"/><br />
			密码：<input type="password" name="password"/><br />
			<input type="button" value="提交" />
		</form>
	</body>
	<script>
			//keydown事件只能绑定$(document)对象，表示键盘按下时触发
			// 事件对象event中封装了事件的参数
			$(document).keydown(function(event) {
					if (event.keyCode == 13) { //回车键对应的值是13
						var answer = confirm('确认提交吗?');
						if (answer) {
							$("#frm").submit();
						}
		
					}
				});
				// 以表单为例演示聚焦和失去焦点特效
				$("[name=username],[name=password]").focus(function(){
					$(this).addClass("input_focus");
				}).blur(function(){
					$(this).removeClass("input_focus");
				})
	</script>
</html>

绑定事件

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

绑定单个事件

例：以上面的例子作为模板：进行事件绑定演示（移入和移出鼠标时显示效果）

例：以mouseover()为例，实现鼠标移过时特效

需求：实现主导航栏鼠标移动时的特效：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		li {
			/* 添加左浮动，去除列表前面的小圆点，左边距 */
			float: left;
			list-style: none;
			margin-left: 15px;
		}

		.heightlight {
			/* 设置背景色和悬浮指针特效（小手） */
			background-color: lightgray;
			cursor: pointer;
		}
	</style>

	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<ul id="nav">
			<li>首页</li>
			<li>服装城</li>
			<li>电器城</li>
			<li>易购超市</li>
		</ul>
		<script>
			// $("#nav li").mouseover(function(){
			// 	// $(this):代表当前调用mouseover的jquery对象
			// 	$(this).addClass("heightlight");
			// }).mouseout(function(){
			// 	$(this).removeClass("heightlight");
			// })

			//绑定单个事件事件演示，bind参数一：事件类型，bind参数二：处理函数
			$("#nav li").bind("mouseover",function(){
				$(this).addClass("heightlight");
			});	
	
		</script>
	</body>
</html>

绑定多个事件

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

例：需求同上，多绑定一个鼠标移出事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		li {
			/* 添加左浮动，去除列表前面的小圆点，左边距 */
			float: left;
			list-style: none;
			margin-left: 15px;
		}

		.heightlight {
			/* 设置背景色和悬浮指针特效（小手） */
			background-color: lightgray;
			cursor: pointer;
		}
	</style>

	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<ul id="nav">
			<li>首页</li>
			<li>服装城</li>
			<li>电器城</li>
			<li>易购超市</li>
		</ul>
		<script>
			// $("#nav li").mouseover(function(){
			// 	// $(this):代表当前调用mouseover的jquery对象
			// 	$(this).addClass("heightlight");
			// }).mouseout(function(){
			// 	$(this).removeClass("heightlight");
			// })
			
			绑定多个事件
			 $("#nav li").bind({
			 	mouseover:function(){
					$(this).addClass("heightlight");
			    },
			 	mouseout:function(){
					$(this).removeClass("heightlight");
				}
		        });
			
	
		</script>
	</body>
</html>

移除事件

移除事件使用unbind()方法，其语法如下：
- unbind([type],[fn])

参数	含义	描述
[type]	事件类型	主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
[fn]	处理函数	用来绑定的处理函数

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

鼠标光标悬停事件

hover()方法相当于mouseover与mouseout事件的组合，里面存在两个函数，分别在光标移入时触发和光标移出时触发。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			border: 1px solid gray;
			width: 200px;
			display: none;
		}
	</style>
	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<a href="">我的商城</a>
		<div>
			<ul>
				<li>我的优惠券</li>
				<li>我的订单</li>
				<li>我的私信</li>
			</ul>
		</div>

		<script>
			$(function() {
				//hover中，有两个函数：函数一：光标悬停时触发；函数二：光标移出时触发（可以替代mouseover函数加mouseout函数）
				$("a").hover(function() {						
						$("div").css("display", "block");
					},
					function() {						
						$("div").css("display", "none");
					}
				)
			})
		</script>
	</body>
</html>

鼠标连续click事件

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

$("body").toggle( function () { }, function () { }, function () { } ); //每次点击触发一个函数，依次向后循环触发（函数可以存在多个，这里表示此时有3个点击事件触发时对应的函数）

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<input type="button" id="btn" value="改变颜色" />
		
	</body>

	<script>
		$(function() {
			$("body").toggle(
				function() {
					$("body").css("background-color", "red");
				},
				function() {
					$("body").css("background-color", "yellow");
				},
				function() {
					$("body").css("background-color", "green");
				}

			);
		})
	</script>
</html>

jQuery动画效果

jQuery提供了很多动画效果，如：
- 控制元素显示与隐藏
- 控制元素淡入淡出
- 改变元素高度

显示及隐藏元素

show() 在显示元素时，能定义显示元素时的效果，如显示速度
显示速度可以取如下值：毫秒（如1000）、slow、normal、fast

例：隐藏页面元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div{
			/* display: none; */
			border: 1px solid gray;
			width: 300px;
			
		}
		
	</style>
	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<a href="#">我的商城</a>
		<div>
			<ul>
				<li>我的优惠券</li>
				<li>我的订单</li>
				<li>我的私信</li>
			</ul>
		</div>

		<script>
			$(function() {
				$("a").click(function() {
					$("div").hide(1000);
				});
			})
		</script>

	</body>
</html>

切换元素可见状态

toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<ul>
			<li>aaa</li>
			<li>bbbb</li>
			<li>cccc</li>
			<li>ddd</li>
			<li>
				<input id="btn" type="button" value="展开或关闭" />
			</li>
		</ul>
		<script>
			$(function() {
				$("#btn").click(function() {
					$("li:gt(1):not(:last)").toggle();
				});
			})
		</script>
	</body>
</html>

淡入淡出效果

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
显示速度可以取如下值：毫秒（如1000）、slow、normal、fast

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.8.3.js"></script>
	<body>
		<input id="danchu" type="button" value="淡出" />
		<input id="danru" type="button" value="淡入" />
		<img src="img/bg.jpg" alt="" />
		<script>
			$(function() {
				$("#danchu").click(function() {
					$("img").slideUp(2000);
				});
				$("#danru").click(function() {
					$("img").slideDown(3000);
				});
				
			})
		</script>

	</body>
</html>

改变元素的高度

slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏
使用的方式与淡入和淡出一致

$("h2").click(function(){
        $(".txt").slideUp("slow");
        $(".txt").slideDown("slow");
});

总结

鼠标事件
click、mouseover、mouseout
键盘事件
keydown、 keyup、 keypress
表单事件
focus、 blur
复合事件
hover、 toggle
动画
show()、hide()、 toggle()、 fadeIn()、 fadeOut()、 slideUp()、 slideDown()