首页 前端知识 jQuery中的事件与动画

jQuery中的事件与动画

2024-10-26 09:10:33 前端知识 前端哥 288 761 我要收藏

 网页中的事件

  • 和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()

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19223.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!