【暑假学习笔记】之——jQuery对事件的处理，模拟操作，jQuery动画

本文介绍jQuery中的事件处理方式，包括获取事件对象、取消事件冒泡等技巧，并演示了hover、toggle等合成事件的使用。此外，还展示了如何利用jQuery实现动画效果，包括自定义动画及预设动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获得事件对象event

只需要为事件处理函数传递任意一个参数，如：$obj.click(function(e){…})

e就是事件对象，但已经经过jQuery对底层事件对象的封装，可以方便的兼容各浏览器

如何取消事件冒泡

和js相同，jQuery也有事件冒泡机制，可以通过e.stopPropagation()取消事件冒泡。

jQuery合成事件种类 //了解

hover(mouseenter,mouseleave)模拟光标悬停事件
toggle()在多个事件响应中切换

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo2_事件处理</title>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
<script>
	//类似于window.onload()， onload若写多次，则后者会覆盖前者，只有一个会生效。$(function())都生效。
	$(function() {
		//给按钮1后绑定单击事件
		$(":button:eq(0)").click(function(e) {
			console.log("点了按钮1");
			//此事件对象被jQuery做了封装，因为事件对象是浏览器创建的，不同浏览器创建的事件对象有区别，开发时要兼顾这个区别，很麻烦
			//jQuery就是想解决这个麻烦，将他们的区别进行统一，提供统一的方法
			//取消冒泡：e.stopPropagation()
			//获取事件源：e.target
			console.log(e);
		});
	});
	
	$(function() {
		//后绑定hover事件，该事件是jQuery特有的事件，必须使用jQuery后绑定
		$("img").hover(
			function() {
				console.log(1);
				$(this).width(250).height(250);
				//$(this).css("width","250px").css("height","250px");
				//$(this).addClass("big");
				//$(this).toggleClass("big");
			},//悬停时
			function() {
				console.log(2);
				$(this).width(218).height(218);
				//$(this).css("width","218px").css("height","218px");
				//$(this).removeClass("big");
				//$(this).toggleClass("big");
			}//离开时
		);
	});
	
	$(function() {
		//给按钮2后绑定单击事件，显示，隐藏图片
		$(":button:eq(1)").click(function() {
			$("img").toggle();
		});
	});
</script>
</head>
<body>
	<p>
		<input type="button" value="按钮1"/>
	</p>
	<p>
		<input type="button" value="隐藏图片"/>
	</p>
	<p>
		<img src="../img/01.jpg"/>
	</p>
</body>
</html>

模拟操作的语法

$obj.trigger(事件类型)
如：$obj.trigger("focus"); 简写形式：$obj.focus():

示例：电脑模拟打分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo3_模拟打分</title>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
<script>
	$(function() {
		var id;
		//给按钮绑定单击事件
		$(":button").click(function() {
			if (id) {
				return;
			}
			//启动定时器
			var n = 0;
			id = setInterval(() => {
				//获取下一个要处理的框
				var $text = $(":text").eq(n);
				//模拟光标切入事件
				$text.trigger("focus");
				//生成随机的分数，写入框内
				var s = parseInt(Math.random()*100);
				$text.val(s);
				//都处理完就停止定时器
				if (n==$("text").length-1) {
					clearInterval(id);
				}
				n++;
			}, 2000);
		});
	});
</script>
</head>

<body>
	<p>
		<input type="button" value="打分"/>
	</p>
	<p>
		JISOO: <input type="text"/>
	</p>
	<p>
		ROSE:  <input type="text"/>
	</p>
	<p>
		JENNIE:<input type="text"/>
	</p>
	<p>
		LISA:  <input type="text"/>
	</p>
</body>
</html>

jQuery动画

自定义动画基于定位，通过定时器连续改变元素的偏移量就能实现动画效果。

示例：显示，隐藏图片，点击删除按钮显示操作成功的淡入淡出效果，移动图片（相对/绝对/固定都可以），侧边栏的显示与隐藏动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1_jQuery动画</title>
<style>
	/*设置相对/绝对/固定定位，才能做出动画效果，动画就是连续改变元素的偏移量*/
	img {
		position: relative;
	}
	#ad {
		width: 200px;
		height: 100px;
		border: 1px solid red;
		position: fixed;
		top: 50px;
		right: -180px;
	}
</style>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
<script>
	//显示隐藏动画的实现原理：通过定时器连续改变元素的样式（大小和透明度）
	//f2相当于主线程，动画相当于支线程，二者并发执行，不会等待，所以“完成”会立刻输出
	function f1() {
		//$("img").show(3000);
		//$("img").slideDown(2000);
		$("img").fadeIn(2000);
	}
	function f2() {
		//$("img").hide(3000);
		//$("img").slideUp(2000);
		//参数2是一个函数，jQuery会在执行完动画以后自动调用它，这样的函数称为回调函数
		$("img").fadeOut(2000,function(){
			console.log("over");
		});
		console.log("完成");
	}
	function f3() {
		$("#msg").fadeIn(500).fadeOut(2500);
	}
	function f4() {
		$("img").animate({"left":"300px"},3000)
		.animate({"top":"300px"},3000)
		.animate({"left":"0"},3000)
		.animate({"top":"0"},3000);
	}
	
	$(function() {
		$("#ad").hover(
			function() {
				$(this).animate({"right":"0"},500);
			},
			function() {
				$(this).animate({"right":"-180px"},500);
			}
		);
	});
</script>
</head>
<body>
	<p>
		<input type="button" value="显示" onclick="f1();"/>
		<input type="button" value="隐藏" onclick="f2();"/>
		<input type="button" value="删除" onclick="f3();"/>
		<input type="button" value="移动" onclick="f4();"/>
	</p>
	<p>
		<img src="../img/01.jpg"/>
	</p>
	<p id="msg" style="display: none;">操作成功</p>
	<div id="ad"></div>
</body>
</html>

谢谢你看到这里！写作仓促，有疏漏之处还请评论指正，共同探讨进步！