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

    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

    1. <html>
    2. 	<head>
    3. 	<title>$()和window.onload区别title>
    4. 		<style type="text/css">
    5. 			
    6. 		style>
    7. 		
    8. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    9. 		<script type="text/javascript">
    10. 			/*
    11. 			//javascript事件可以获得图片宽度
    12. 			window.onload=function(){
    13. 				alert($("img").width());
    14. 			};
    15. 			*/
    16. 			
    17. 			/*
    18. 			//jQuery事件
    19. 			//目前jQuery也可以获取图片宽度，加载时机提前了？
    20. 			$(function(){
    21. 				alert($("img").width());
    22. 			});
    23. 			*/
    24. 			
    25. 			/*
    26. 			//jQuery中类似window.onload事件
    27. 			//$(window).load()在1.8开始不支持了
    28. 			//.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.
    29. 			$(window).on("load",function(){
    30. 				alert($("img").width());
    31. 			});
    32. 			*/
    33. 			
    34. 			/*
    35. 			//只能绑定最后一个函数
    36. 			window.onload=function(){
    37. 				alert("hello1");
    38. 			}
    39. 			window.onload=function(){
    40. 				alert("hello2");
    41. 			}
    42. 			*/
    43. 			
    44. 			//弹出两个消息框，提示hello1，再提示hello2
    45. 			$(function(){
    46. 				alert("hello1");
    47. 			});
    48. 			$(function(){
    49. 				alert("hello2");
    50. 			});
    51. 		script>
    52. 	head>
    53. 	
    54. 	<body>
    55. 		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
    56. 	body>
    57. html>

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

    bind(type, [data], fn);

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

    1. $("div").bind("click", function(){});  //给div绑定一个点击事件
    2. $("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

    1. <html>
    2. 	<head>
    3. 	<title>绑定事件title>
    4. 		<style type="text/css">
    5. 			table{ border:0; border-collapse:collapse; }
    6. 			td{ font:normal 12px/17px Arial; padding:2px; width:100px; }
    7. 			th{ font:bold 12px/17px Arial; text-align:center; padding:4px; border-bottom:1px solid #333; }
    8. 			.even{ background:#FFF38F; }  /*偶数行样式*/
    9. 			.odd{ background:#FFFFEE; }  /*奇数行样式*/
    10. 			.selected{ background:#FF6500; color:#fff; }
    11. 			.over{ background:green; }
    12. 			
    13. 		style>
    14. 		
    15. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    16. 		<script type="text/javascript">
    17. 			$(function(){
    18. 				//给奇偶行加上背景色
    19. 				//查找tbody元素内的tr的奇数行，添加类选择器
    20. 				$("tbody>tr:odd").addClass("odd");
    21. 				$("tbody>tr:even").addClass("even");
    22. 				
    23. 				/*
    24. 				//给tbody里所有行绑定一个点击事件，点击一行增加样式
    25. 				$("tbody>tr").bind("click", function(){
    26. 					//判断行有没有被选中
    27. 					var hasSelected=$(this).hasClass("selected");
    28. 					if (hasSelected){
    29. 						$(this).removeClass("selected").find(":checkbox").attr("checked",false);
    30. 					}else{
    31. 						$(this).addClass("selected").find(":checkbox").attr("checked",true);
    32. 					}
    33. 				})
    34. 				//当鼠标移到某一行上给它加背景
    35. 				//链式操作再绑定一个事件
    36. 				.bind("mouseover", function(){
    37. 					$(this).addClass("over");
    38. 				}).bind("mouseout", function(){
    39. 					$(this).removeClass("over");
    40. 				});
    41. 				*/
    42. 				
    43. 				//不用bind，用jQuery提供的方法
    44. 				//给tbody里所有行绑定一个点击事件，点击一行增加样式
    45. 				$("tbody>tr").click(function(){
    46. 					//判断行有没有被选中
    47. 					var hasSelected=$(this).hasClass("selected");
    48. 					if (hasSelected){
    49. 						$(this).removeClass("selected").find(":checkbox").attr("checked",false);
    50. 					}else{
    51. 						$(this).addClass("selected").find(":checkbox").attr("checked",true);
    52. 					}
    53. 				})
    54. 				//当鼠标移到某一行上给它加背景
    55. 				//链式操作再绑定一个事件
    56. 				.mouseover(function(){
    57. 					$(this).addClass("over");
    58. 				}).mouseout(function(){
    59. 					$(this).removeClass("over");
    60. 				});
    61. 				
    62. 				//一开始被选中的控件添加背景色
    63. 				$("tbody>tr:has(':checked')").addClass("selected");
    64. 			});
    65. 			
    66. 		script>
    67. 	head>
    68. 	
    69. 	<body>
    70. 		<table>
    71. 			<thead>
    72. 				<th> th>
    73. 				<th>姓名th>
    74. 				<th>性别th>
    75. 				<th>暂住地th>
    76. 			thead>
    77. 			<tbody>
    78. 				<tr>
    79. 					<td><input type="checkbox" name="choice" value="" />td>
    80. 					<td>张三td>
    81. 					<td>男td>
    82. 					<td>浙江宁波td>
    83. 				tr>
    84. 				<tr>
    85. 					<td><input type="checkbox" name="choice" value="" />td>
    86. 					<td>李四td>
    87. 					<td>女td>
    88. 					<td>浙江杭州td>
    89. 				tr>
    90. 				<tr>
    91. 					<td><input type="checkbox" name="choice" value="" checked="checked" />td>
    92. 					<td>王五td>
    93. 					<td>男td>
    94. 					<td>湖南长沙td>
    95. 				tr>
    96. 				<tr>
    97. 					<td><input type="checkbox" name="choice" value="" />td>
    98. 					<td>赵六td>
    99. 					<td>男td>
    100. 					<td>浙江温州td>
    101. 				tr>
    102. 				<tr>
    103. 					<td><input type="checkbox" name="choice" value="" />td>
    104. 					<td>raintd>
    105. 					<td>男td>
    106. 					<td>浙江杭州td>
    107. 				tr>
    108. 				<tr>
    109. 					<td><input type="checkbox" name="choice" value="" />td>
    110. 					<td>maxtd>
    111. 					<td>女td>
    112. 					<td>浙江杭州td>
    113. 				tr>
    114. 			tbody>
    115. 		table>
    116. 	body>
    117. html>

    3、事件触发范围
    对li标签绑定一个click事件，那么点击事件的范围是这个

  • 标签到
    • 标签内的所有空间

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

    hover(enter, leave);

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

    2、toggle()方法
    格式：

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

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

    3、hover.html

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

    4、toggle.html

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

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

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

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

    2、停止事件冒泡.html

    1. <html>
    2. 	<head>
    3. 	<title>停止事件冒泡title>
    4. 		<style type="text/css">
    5. 			* {margin:0; padding:0; }
    6. 			body {font-size:13px; line-height:130%; padding:60px; }
    7. 			#content {width:220px; border:1px solid #0050D0; background:#96E555; }
    8. 			span {width:200px; margin:10px; background:#666666; cursor:pointer; color:white; display:block; }
    9. 			p {width:200px; background:#888; color:white; height:16px; }
    10. 		style>
    11. 		
    12. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    13. 		<script type="text/javascript">
    14. 			$(function(){
    15. 				//为span元素绑定click事件
    16. 				$("span").bind("click",function(){
    17. 					var txt = $("#msg").html() + "
      内层span元素被点击.
      "      ;
    18. 					$("#msg").html(txt);
    19. 					event.stopPropagation();
    20. 				});
    21. 				//为div元素绑定click事件
    22. 				$("#content").bind("click",function(){
    23. 					var txt = $("#msg").html() + "
      外层div元素被点击.
      "      ;
    24. 					$("#msg").html(txt);
    25. 					event.stopPropagation();
    26. 				});
    27. 				//为body元素绑定click事件
    28. 				$("body").bind("click",function(){
    29. 					var txt = $("#msg").html() + "
      body元素被点击.
      "      ;
    30. 					$("#msg").html(txt);
    31. 				});
    32. 				
    33. 			});
    34. 			
    35. 		script>
    36. 	head>
    37. 	
    38. 	<body>
    39. 		<div id="content">
    40. 			外层div元素
    41. 			<span>内层span元素span>
    42. 			外层div元素
    43. 		div>
    44. 		<div id="msg">div>
    45. 	body>
    46. html>

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

    2、阻止默认行为.html

    1. <html>
    2. 	<head>
    3. 	<title>阻止默认行为title>
    4. 		<style type="text/css">
    5. 			
    6. 		style>
    7. 		
    8. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    9. 		<script type="text/javascript">
    10. 			$(function(){
    11. 				$("#sub").bind("click",function(event){
    12. 					var username = $("#username").val();  //获取元素的值
    13. 					if (username=="") {
    14. 						//判断值是否为空
    15. 						$("#msg").html("
      文本框的值不能为空.
      "      );
    16. 						//默认情况下，只要点击了submit，就会提交到action上的地址去
    17. 						//阻止默认行为
    18. 						event.preventDefault();
    19. 					}
    20. 				});
    21. 			});
    22. 			
    23. 		script>
    24. 	head>
    25. 	
    26. 	<body>
    27. 		<form action="http://www.baidu.com">
    28. 		用户名：<input type="text" id="username" />
    29. 		<br/>
    30. 		<input type="submit" value="提交" id="sub" />
    31. 		form>
    32. 		<div id="msg">div>
    33. 	body>
    34. 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：键盘事件中获取按键。

    7、事件对象属性.html

    1. <html>
    2. 	<head>
    3. 	<title>事件对象属性title>
    4. 		<style type="text/css">
    5. 			
    6. 		style>
    7. 		
    8. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    9. 		<script type="text/javascript">
    10. 			$(function(){
    11. 				/*
    12. 				$("a").click(function(event){
    13. 					alert(event.type);  //获取事件类型
    14. 					var tg=event.target;  //获取触发事件的事件源
    15. 					alert(tg.href);  //弹出事件源的href属性
    16. 					alert(event.pageX+"--"+event.pageY);  //获取点击位置在浏览器中的x坐标和y坐标
    17. 					return false;
    18. 				});
    19. 				*/
    20. 				
    21. 				//鼠标按下事件
    22. 				$("a").mousedown(function(event){
    23. 					alert(event.which);
    24. 					return false;
    25. 				});
    26. 				
    27. 				$("input").keyup(function(event){
    28. 					alert(event.which);  //event.which既可以获得鼠标按键，也可以获得键盘按键
    29. 					return false;
    30. 				});
    31. 			});
    32. 			
    33. 		script>
    34. 	head>
    35. 	
    36. 	<body>
    37. 		<a href="http://www.baidu.com">点击我a>
    38. 		<input type="button" value="点击我" />
    39. 	body>
    40. html>

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

    unbind([type], [bind]);

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

    2、解除绑定事件.html

    1. <html>
    2. 	<head>
    3. 	<title>解除绑定事件title>
    4. 		<style type="text/css">
    5. 			* {margin:0; padding:0; }
    6. 			body {font-size:13px; line-height:130%; padding:60px; }
    7. 			p {width:200px; background:#888; color:white; height:16px; }
    8. 		style>
    9. 		
    10. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    11. 		<script type="text/javascript">
    12. 			$(function(){
    13. 				//一个元素可以绑定多个事件
    14. 				$("#btn").bind("click",myfun1=function(){  //指定函数名称
    15. 					$("#test").append("
      我的绑定函数1-click
      "      );
    16. 				}).bind("mouseout",myfun2=function(){
    17. 					$("#test").append("
      我的绑定函数2-mouseout
      "      );
    18. 				}).bind("click",myfun3=function(){
    19. 					$("#test").append("
      我的绑定函数3-click
      "      );
    20. 				});
    21. 				
    22. 				//解除绑定
    23. 				$("#del1").click(function(){
    24. 					//找到这个按钮
    25. 					$("#btn").unbind();
    26. 					//删除之后，再点btn不会有事件绑定！！！相当于bind的代码没有了
    27. 				})
    28. 				
    29. 				$("#del2").click(function(){
    30. 					$("#btn").unbind("mouseout");
    31. 				})
    32. 				
    33. 				$("#del3").click(function(){
    34. 					//删除具有myfun1这个指定函数的click事件
    35. 					$("#btn").unbind("click",myfun1);
    36. 				})
    37. 			});
    38. 			
    39. 		script>
    40. 	head>
    41. 	
    42. 	<body>
    43. 		<button id="btn">点击我button>
    44. 		<div id="test">div>
    45. 		<button id="del1">删除所有事件button>
    46. 		<button id="del2">删除指定的事件button>
    47. 		<button id="del3">删除具有指定处理函数的事件button>
    48. 	body>
    49. html>

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

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

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

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

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

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

    1. $("#btn").bind("myclick",function(event,msg1,msg2){
    2.   $("#test").append("
      "+msg1+msg2+"
      "      );
    3. });
    4. $("#btn").trigger("myclick",["我的自定义","事件"]);

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

    5、trigger.html

    1. <html>
    2. 	<head>
    3. 	<title>triggertitle>
    4. 		<style type="text/css">
    5. 			* {margin:0; padding:0; }
    6. 			body {font-size:13px; line-height:130%; padding:60px; }
    7. 			p {width:200px; background:#888; color:white; height:16px; }
    8. 		style>
    9. 		
    10. 		<script type="text/javascript" src="script/jquery-3.6.0.js">script>
    11. 		<script type="text/javascript">
    12. 			$(function(){
    13. 				/*
    14. 				$("#btn").bind("click",function(){
    15. 					$("#test").append("
      我的绑定函数1-click
      ");
    16. 				}).bind("click",function(){
    17. 					$("#test").append("
      我的绑定函数2-click
      ");
    18. 				}).trigger("click");  //模拟自身的click
    19. 				*/
    20. 				
    21. 				//方式二，简写click()
    22. 				/*
    23. 				$("#btn").bind("click",function(){
    24. 					$("#test").append("
      我的绑定函数1-click
      ");
    25. 				}).bind("click",function(){
    26. 					$("#test").append("
      我的绑定函数2-click
      ");
    27. 				}).click();
    28. 				*/
    29. 				
    30. 				//触发自定义事件
    31. 				/*
    32. 				$("#btn").bind("hao",function(){
    33. 					alert("hello world");
    34. 				}).trigger("hao");
    35. 				*/
    36. 				
    37. 				//传递数据
    38. 				$("#btn").bind("hao",function(event,msg1,msg2){
    39. 					alert(msg1+"---"+msg2);
    40. 				}).trigger("hao",["hello","world"]);
    41. 			});
    42. 			
    43. 		script>
    44. 	head>
    45. 	
    46. 	<body>
    47. 		<button id="btn">点击我button>
    48. 		<div id="test">div>
    49. 	body>
    50. html>

  • 相关阅读:
    git 丢弃修改 回退版本
    【云原生之Docker实战】使用Docker部署Kavita 个人漫画服务器
    【第二章 SQL-DDL（查询、创建、删除、使用数据库）（查询、创建数据库中的表）】
    八种button的hover效果
    互联网医院系统：数字化时代中医疗服务的未来
    OpenGL ES Windows 搭建环境（MFC版本）
    10月9日，每日信息差
    kubernetes网络模型
    socket编程常用API
    Linux服务器线上优化
  • 原文地址：https://blog.csdn.net/csj50/article/details/126603263