Java基础之《Ajax+JQuery（JavaEE开发进阶Ⅱ）》—JQuery事件与动画（1）

csj50

已于 2022-09-26 15:23:49 修改

阅读量242

点赞数

分类专栏：前端基础文章标签： ajax jquery java

于 2022-08-30 14:22:34 首次发布

本文链接：https://blog.csdn.net/csj50/article/details/126603263

版权

前端基础专栏收录该内容

55 篇文章 0 订阅

订阅专栏

jQuery事件相关介绍

一、文档加载事件
$(document).ready()和window.onload方法区别？
jQuery当中用$(document).ready()代替了传统的、javascript当中的window.onload

1、执行时机不同
window.onload方法是在网页中的元素（包括元素的所有关联文件）完全加载到浏览器后执行，即javascript此时才可以访问网页中的任何元素。
而$(document).ready()方法在DOM完全就绪时就可以被调用，无需等待元素的相关联文件下载完毕，可以大大提高程序的响应速度。

2、使用次数不同
window.onload事件一次只能保存一个函数的引用。
$(document).ready()方法每次调用都会在现有的行为上追加新的行为。

3、$()和window.onload区别.html

<html>
	<head>
	<title>$()和window.onload区别</title>
		<style type="text/css">
			
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			/*
			//javascript事件可以获得图片宽度
			window.onload=function(){
				alert($("img").width());
			};
			*/
			
			/*
			//jQuery事件
			//目前jQuery也可以获取图片宽度，加载时机提前了？
			$(function(){
				alert($("img").width());
			});
			*/
			
			/*
			//jQuery中类似window.onload事件
			//$(window).load()在1.8开始不支持了
			//.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.
			$(window).on("load",function(){
				alert($("img").width());
			});
			*/
			
			/*
			//只能绑定最后一个函数
			window.onload=function(){
				alert("hello1");
			}
			window.onload=function(){
				alert("hello2");
			}
			*/
			
			//弹出两个消息框，提示hello1，再提示hello2
			$(function(){
				alert("hello1");
			});
			$(function(){
				alert("hello2");
			});
		</script>
	</head>
	
	<body>
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
	</body>
</html>

二、jQuery事件绑定
1、在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定
格式：

bind(type, [data], fn);

说明：
type：事件类型
data：传递给处理函数进行处理的额外数据
fn：用来绑定的处理函数
例子：

$("div").bind("click", function(){});  //给div绑定一个点击事件
$("div").bind("mouseover mouseout", function(){});  //同时绑定多个事件

三、jQuery常用的事件类型
1、click、dbclick、blur、focus、resize、scroll、unload、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keyup、keypress和error等。
当然这些事件类型都可以用bind方法来绑定，其实jQuery也为这些事件类型专门设计了简写的方法。

2、绑定事件.html

<html>
	<head>
	<title>绑定事件</title>
		<style type="text/css">
			table{ border:0; border-collapse:collapse; }
			td{ font:normal 12px/17px Arial; padding:2px; width:100px; }
			th{ font:bold 12px/17px Arial; text-align:center; padding:4px; border-bottom:1px solid #333; }
			.even{ background:#FFF38F; }  /*偶数行样式*/
			.odd{ background:#FFFFEE; }  /*奇数行样式*/
			.selected{ background:#FF6500; color:#fff; }
			.over{ background:green; }
			
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				//给奇偶行加上背景色
				//查找tbody元素内的tr的奇数行，添加类选择器
				$("tbody>tr:odd").addClass("odd");
				$("tbody>tr:even").addClass("even");
				
				/*
				//给tbody里所有行绑定一个点击事件，点击一行增加样式
				$("tbody>tr").bind("click", function(){
					//判断行有没有被选中
					var hasSelected=$(this).hasClass("selected");
					if (hasSelected){
						$(this).removeClass("selected").find(":checkbox").attr("checked",false);
					}else{
						$(this).addClass("selected").find(":checkbox").attr("checked",true);
					}
				})
				//当鼠标移到某一行上给它加背景
				//链式操作再绑定一个事件
				.bind("mouseover", function(){
					$(this).addClass("over");
				}).bind("mouseout", function(){
					$(this).removeClass("over");
				});
				*/
				
				//不用bind，用jQuery提供的方法
				//给tbody里所有行绑定一个点击事件，点击一行增加样式
				$("tbody>tr").click(function(){
					//判断行有没有被选中
					var hasSelected=$(this).hasClass("selected");
					if (hasSelected){
						$(this).removeClass("selected").find(":checkbox").attr("checked",false);
					}else{
						$(this).addClass("selected").find(":checkbox").attr("checked",true);
					}
				})
				//当鼠标移到某一行上给它加背景
				//链式操作再绑定一个事件
				.mouseover(function(){
					$(this).addClass("over");
				}).mouseout(function(){
					$(this).removeClass("over");
				});
				
				//一开始被选中的控件添加背景色
				$("tbody>tr:has(':checked')").addClass("selected");
			});
			
		</script>
	</head>
	
	<body>
		<table>
			<thead>
				<th> </th>
				<th>姓名</th>
				<th>性别</th>
				<th>暂住地</th>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="choice" value="" /></td>
					<td>张三</td>
					<td>男</td>
					<td>浙江宁波</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choice" value="" /></td>
					<td>李四</td>
					<td>女</td>
					<td>浙江杭州</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
					<td>王五</td>
					<td>男</td>
					<td>湖南长沙</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choice" value="" /></td>
					<td>赵六</td>
					<td>男</td>
					<td>浙江温州</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choice" value="" /></td>
					<td>rain</td>
					<td>男</td>
					<td>浙江杭州</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choice" value="" /></td>
					<td>max</td>
					<td>女</td>
					<td>浙江杭州</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

3、事件触发范围
对li标签绑定一个click事件，那么点击事件的范围是这个<li>标签到</li>标签内的所有空间

四、合成事件
1、hover()方法
格式：

hover(enter, leave);

说明：
用于模拟光标悬停事件，当鼠标移到元素上的时候会触发enter函数，当鼠标离开元素的时候会触发leave函数

2、toggle()方法
格式：

toggle([fn1], [fn2], [fn3]...)

说明：
（1）用于绑定两个或多个事件的处理器函数，以响应被选元素的轮流的click事件。第一次点击执行fn1函数，第二次点击执行fn2函数，第三次点击执行fn3函数。假设总共有三个函数，再点击的时候又从第一个函数开始
（2）当toggle内没有参数时，toggle()方法另一个功能是，元素原来为显示的时候隐藏，隐藏的时候显示

3、hover.html

<html>
	<head>
	<title>hover</title>
		<style type="text/css">
			* {margin:0; padding:0; }
			body {font-size:13px; line-height:130%; padding:60px; }
			#panel {width:300px; border:1px solid #0050D0; }
			.head {height:24px; line-height:24px; text-indent:10px; background:#96E555; cursor:pointer; width:100%; }
			.content {padding:10px; text-indent:24px; border-top:1px solid #0050D0; display:none; }
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				//当鼠标移动到h5标题上时，下面div内容可见。离开标题内容不可见
				$(".head").hover(function(){
					//当前对象的下一个对象，显示
					$(this).next().show();
					
				}, function(){
					//隐藏
					$(this).next().hide();
					
				});
			});
			
		</script>
	</head>
	
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
			jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
			</div>
		
		</div>
	</body>
</html>

4、toggle.html

<html>
	<head>
	<title>hover</title>
		<style type="text/css">
			* {margin:0; padding:0; }
			body {font-size:13px; line-height:130%; padding:60px; }
			#panel {width:300px; border:1px solid #0050D0; }
			.head {height:24px; line-height:24px; text-indent:10px; background:#96E555; cursor:pointer; width:100%; }
			.content {padding:10px; text-indent:24px; border-top:1px solid #0050D0; display:none; }
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				//点击h5标题，div显示的变隐藏，隐藏的变显示
				$(".head").click(function(){
					$(this).next().toggle();
					
				});
			});
			
		</script>
	</head>
	
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
			jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
			</div>
		
		</div>
	</body>
</html>

五、事件对象
1、事件对象主要封装了事件发生的详细信息，尤其是鼠标、键盘事件。在jQuery中使用事件对象非常简单，只需要为函数添加一个参数
例子：

$("element").bind("click", function(event){  //event事件对象
  //函数处理语句
});

六、停止事件冒泡
1、使用event.stopPropagation()方法来停止事件冒泡。
冒泡事件：
就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。

2、停止事件冒泡.html

<html>
	<head>
	<title>停止事件冒泡</title>
		<style type="text/css">
			* {margin:0; padding:0; }
			body {font-size:13px; line-height:130%; padding:60px; }
			#content {width:220px; border:1px solid #0050D0; background:#96E555; }
			span {width:200px; margin:10px; background:#666666; cursor:pointer; color:white; display:block; }
			p {width:200px; background:#888; color:white; height:16px; }
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				//为span元素绑定click事件
				$("span").bind("click",function(){
					var txt = $("#msg").html() + "<p>内层span元素被点击.</p>";
					$("#msg").html(txt);
					event.stopPropagation();
				});
				//为div元素绑定click事件
				$("#content").bind("click",function(){
					var txt = $("#msg").html() + "<p>外层div元素被点击.</p>";
					$("#msg").html(txt);
					event.stopPropagation();
				});
				//为body元素绑定click事件
				$("body").bind("click",function(){
					var txt = $("#msg").html() + "<p>body元素被点击.</p>";
					$("#msg").html(txt);
				});
				
			});
			
		</script>
	</head>
	
	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>
		<div id="msg"></div>
	</body>
</html>

七、阻止默认行为
1、使用event.preventDefault()方法来阻止元素的默认行为。

2、阻止默认行为.html

<html>
	<head>
	<title>阻止默认行为</title>
		<style type="text/css">
			
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#sub").bind("click",function(event){
					var username = $("#username").val();  //获取元素的值
					if (username=="") {
						//判断值是否为空
						$("#msg").html("<p>文本框的值不能为空.</p>");
						//默认情况下，只要点击了submit，就会提交到action上的地址去
						//阻止默认行为
						event.preventDefault();
					}
				});
			});
			
		</script>
	</head>
	
	<body>
		<form action="http://www.baidu.com">
		用户名：<input type="text" id="username" />
		<br/>
		<input type="submit" value="提交" id="sub" />
		</form>
		<div id="msg"></div>
	</body>
</html>

八、同时对事件对象停止冒泡和默认行为
1、使用return false这种简写方式即可。大可不必写上面两句。

九、常用的事件对象属性
1、event.type：用于获取到事件类型，比如click等。

2、event.target：用于获取到事件触发的元素。

3、event.pageX：获取到光标相对于页面x的坐标。

4、event.pageY：获取到光标相对于页面y的坐标。

5、event.which：获取鼠标的左、中、右键，分别为1、2、3。

6、event.metaKey：键盘事件中获取<ctrl>按键。

7、事件对象属性.html

<html>
	<head>
	<title>事件对象属性</title>
		<style type="text/css">
			
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				/*
				$("a").click(function(event){
					alert(event.type);  //获取事件类型
					var tg=event.target;  //获取触发事件的事件源
					alert(tg.href);  //弹出事件源的href属性
					alert(event.pageX+"--"+event.pageY);  //获取点击位置在浏览器中的x坐标和y坐标
					return false;
				});
				*/
				
				//鼠标按下事件
				$("a").mousedown(function(event){
					alert(event.which);
					return false;
				});
				
				$("input").keyup(function(event){
					alert(event.which);  //event.which既可以获得鼠标按键，也可以获得键盘按键
					return false;
				});
			});
			
		</script>
	</head>
	
	<body>
		<a href="http://www.baidu.com">点击我</a>
		<input type="button" value="点击我" />
	</body>
</html>

十、移除事件
1、unbind()方法
格式：

unbind([type], [bind]);

说明：
（1）如果没有参数则删除所有的绑定事件
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件
（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数被删除

2、解除绑定事件.html

<html>
	<head>
	<title>解除绑定事件</title>
		<style type="text/css">
			* {margin:0; padding:0; }
			body {font-size:13px; line-height:130%; padding:60px; }
			p {width:200px; background:#888; color:white; height:16px; }
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				//一个元素可以绑定多个事件
				$("#btn").bind("click",myfun1=function(){  //指定函数名称
					$("#test").append("<p>我的绑定函数1-click</p>");
				}).bind("mouseout",myfun2=function(){
					$("#test").append("<p>我的绑定函数2-mouseout</p>");
				}).bind("click",myfun3=function(){
					$("#test").append("<p>我的绑定函数3-click</p>");
				});
				
				//解除绑定
				$("#del1").click(function(){
					//找到这个按钮
					$("#btn").unbind();
					//删除之后，再点btn不会有事件绑定！！！相当于bind的代码没有了
				})
				
				$("#del2").click(function(){
					$("#btn").unbind("mouseout");
				})
				
				$("#del3").click(function(){
					//删除具有myfun1这个指定函数的click事件
					$("#btn").unbind("click",myfun1);
				})
			});
			
		</script>
	</head>
	
	<body>
		<button id="btn">点击我</button>
		<div id="test"></div>
		<button id="del1">删除所有事件</button>
		<button id="del2">删除指定的事件</button>
		<button id="del3">删除具有指定处理函数的事件</button>
	</body>
</html>

十一、模拟事件操作
1、以前都是通过用户单击按钮，触发按钮的点击事件。有时候需要在用户进入页面后就触发按钮的点击事件。

2、在jQuery中，可以使用trigger()方法完成模拟操作。
例子：

$("#btn").trigger("click");  //模拟点击事件

3、触发自定义事件
例子：

$("#btn").bind("myclick",function(){
  //函数体
});
$("#btn").trigger("myclick");

4、传递数据
event事件对象自动会传过来
例子：

$("#btn").bind("myclick",function(event,msg1,msg2){
  $("#test").append("<p>"+msg1+msg2+"</p>");
});
$("#btn").trigger("myclick",["我的自定义","事件"]);

说明：
“我的自定义”会赋值给msg1
“事件”会赋值给msg2

5、trigger.html

<html>
	<head>
	<title>trigger</title>
		<style type="text/css">
			* {margin:0; padding:0; }
			body {font-size:13px; line-height:130%; padding:60px; }
			p {width:200px; background:#888; color:white; height:16px; }
		</style>
		
		<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(function(){
				/*
				$("#btn").bind("click",function(){
					$("#test").append("<p>我的绑定函数1-click</p>");
				}).bind("click",function(){
					$("#test").append("<p>我的绑定函数2-click</p>");
				}).trigger("click");  //模拟自身的click
				*/
				
				//方式二，简写click()
				/*
				$("#btn").bind("click",function(){
					$("#test").append("<p>我的绑定函数1-click</p>");
				}).bind("click",function(){
					$("#test").append("<p>我的绑定函数2-click</p>");
				}).click();
				*/
				
				//触发自定义事件
				/*
				$("#btn").bind("hao",function(){
					alert("hello world");
				}).trigger("hao");
				*/
				
				//传递数据
				$("#btn").bind("hao",function(event,msg1,msg2){
					alert(msg1+"---"+msg2);
				}).trigger("hao",["hello","world"]);
			});
			
		</script>
	</head>
	
	<body>
		<button id="btn">点击我</button>
		<div id="test"></div>
	</body>
</html>