jQuery ---[jQuery事件之 ready事件,绑定事件,合成事件,其他常用事件]

Posted 2021-08-15 小智RE0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery ---[jQuery事件之 ready事件,绑定事件,合成事件,其他常用事件]相关的知识，希望对你有一定的参考价值。

ready事件

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
ready( ) 函数作为当 ready 事件发生时执行的代码。
ready( ) 函数仅能用于当前文档，因此无需选择器。

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的。响应速度。

语法：

$(document).ready(匿名函数);
$(document).ready(function(){ 在这里写你的代码... });

简单写法：在这里直接写匿名函数；效果相同；

$(fucntion(){
在这里写你的代码...
})

也是等同于window.onload事件;

window.onload=function(){
	要执行的代码;
}

ready事件也就是jquery封装onload事件在网页内容加载后,才执行ready事件里面的内容;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				alert("后执行");
			});
			alert("先执行");
		</script>
	</head>
	<body>
	</body>
</html>

常用的方式为简写方式;在$()中直接写匿名函数

绑定事件

使用jQuery语法的好处,不用循环也能批量的实现为选中的标签全部绑定事件.

单击

事件	注释
click([[data],fn])	点击时;触发每一个匹配元素的click事件;`这个函数会调用执行绑定到click事件的所有函数`

事件参数	类型	注释
fn	Function	`在每一个匹配元素的click事件中绑定的处理函数`
[data],fn	String,Function	`data:click([Data], fn) 可传入data供函数fn处理; fn:在每一个匹配元素的click事件中绑定的处理函数`

这里参数中使用的是匿名函数

案例:click事件 ;为操作按钮绑定处理函数 ;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//绑定按钮点击事件;
				$("#btn_ID").click(function(){
					alert("点击按钮就会触发");
				});
			});
		</script>
	</head>
	<body>
		<input type="button"  value="操作按钮" id="btn_ID"/>
	</body>
</html>

在这里插入图片描述

若将alert函数中的参数换为alert(this);则点击annual,会得到此按钮的DOM对象;

在这里插入图片描述

双击

事件	注释
dblclick([[data],fn])	当双击元素时，会发生 dblclick 事件。`当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次双击 click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。`

事件参数	类型	注释
fn	Function	`在每一个匹配元素的dblclick事件中绑定的处理函数`
[data],fn	String,Function	`data:dblclick([Data], fn) 可传入data供函数fn处理; fn:在每一个匹配元素的dblclick事件中绑定的处理函数`

案例;dblclick事件;为操作按钮绑定处理函数

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//绑定按钮双击事件;
				$("#btn_ID").dblclick(function(){
					alert(this);
				});
			});
		</script>
	</head>
	<body>
		<input type="button"  value="操作按钮" id="btn_ID"/>
	</body>
</html>

双击按钮,触发函数;

在这里插入图片描述

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。

参数	类型	注释
type,[data],function(eventObject)	String,Object,Function	`type: 含有一个或多个事件类型的字符串，由空格分隔多个事件`。比如"click"或"submit"，还可以是自定义事件名。data:作为event.data属性值传递给事件对象的额外数据对象; `fn:绑定到每个匹配元素的事件上面的处理函数
type,[data],false	String,Object,bool	false: 将第三个参数设置为false会使默认的动作失效。
events	String	一个或多个事件类型的字符串和函数的数据映射来执行。

案例: 用bind事件处理为按钮的单击事件绑定事件;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//用bind事件处理 为按钮的单击事件绑定事件
				$("#btn_ID").bind("click",function(){
					//单击得到此按钮的DOM对象;
					alert(this);
				});
			});
		</script>
	</head>
	<body>
		<input type="button"  value="操作按钮" id="btn_ID"/>
	</body>
</html>

单击按钮:触发函数;

在这里插入图片描述

unbind(type,[data|fn]]) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。
可以将使用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数	类型	注释
type,[fn]	String,Function	type:删除元素的一个或多个事件,由空格分隔多个事件值。fn:要从每个匹配元素的事件中反绑定的事件处理函数
type,false	String,bool	type:删除元素的一个或多个事件,由空格分隔多个事件值false:设置为false会使默认的动作失效。
eventObj	String	事件对象。这个 eventObj 参数来自事件绑定函数

案例:解除操作按钮的绑定事件;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//用bind事件处理 为按钮的单击事件绑定事件
				$("#btn_ID").bind("click",function(){
					//单击得到此按钮的DOM对象;
					alert(this);
				});
				//解除绑定事件;
				$("#btn_ID").unbind("click");
			});
		</script>
	</head>
	<body>
		<input type="button"  value="操作按钮" id="btn_ID"/>
	</body>
</html>

事件	注释
click([[data],fn])	单击元素时;触发每一个匹配元素的click事件;`这个函数会调用执行绑定到click事件的所有函数`
dblclick([[data],fn])	当双击元素时触发。`当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次双击 click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。`
bind(type,[data],fn)	为每个匹配元素的特定事件绑定事件处理函数。
unbind(type,[data`\|`fn]])	bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
blur([[data],fn])	当元素失去焦点时触发 ;`这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为;可以通过返回false来防止触发浏览器的默认行为;blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的`
change([[data],fn])	当元素的值发生改变时触发。`该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。`
error([[data],fn])	当元素遇到错误（没有正确载入）时触发. `这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发`
focus([[data],fn])	当元素获得焦点时触发. `可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法`
focusin([data],fn)	当元素获得焦点时触发;`注意：focusin事件可以在父元素上检测子元素获取焦点的情况`
focusout([data],fn)	当元素失去焦点时触发;`注意: focusout事件在父元素上检测子元素失去焦点的情况`
keydown([[data],fn])	当键盘或按钮被按下时触发。`注意：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生`
keypress([[data],fn])	当键盘或按钮被按下时触发. `keypress事件与keydown事件类似,当按钮被按下时,会发生该事件.它发生在当前获得焦点的元素上,与 keydown事件不同,每插入一个字符,就会发生 keypress 事件。注释：如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生.`
keyup([[data],fn])	当按钮被松开时触发。发生在当前获得焦点的元素上.`注意：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生`
mousedown([[data],fn])	当鼠标指针移动到元素上方，并按下鼠标按键时触发。mousedown 与 click 事件不同，`mousedown 事件仅需要按键被按下，而不需要松开即可发生`
mouseenter([[data],fn])	当鼠标指针穿过元素时触发;该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，`只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件`;如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave([[data],fn])	当鼠标指针离开元素时触发。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，`只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件`。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
mousemove([[data],fn])	当鼠标指针在指定的元素中移动时触发. mousemove事件处理函数会被传递一个变量——事件对象，其`.clientX 和 .clientY 属性代表鼠标的坐标`
mouseover([[data],fn])	当鼠标指针位于元素上方时触发。该事件大多数时候会与 mouseout 事件一起使用。注意：与 mouseenter 事件不同，`不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件`。
mouseup([[data],fn])	当在元素上放松鼠标按钮时触发。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
resize([[data],fn])	当调整浏览器窗口的大小时触发
scroll([[data],fn])	当用户滚动指定的元素时触发。scroll 事件`适用于所有可滚动的元素和 window 对象（浏览器窗口）`
select([[data],fn])	当 textarea 或文本类型的 input 元素中的文本被选择时触发。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。`可通过在某个绑定的函数中返回false来防止触发浏览器的默认行为`
submit([[data],fn])	当提交表单时触发;该事件`只适用于表单元素`。
unload([[data],fn])	当用户离开页面时触发。

合成事件

hover([over,]out)
注释:一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

参数	类型	注释
over,out	Function,Function	over:鼠标移到元素上要触发的函数 ; out:鼠标移出元素要触发的函数
out	Object	当鼠标移到元素上或移出元素时触发执行的事件函数

语法:

 $(“选择器").hover( fn1,fn2);

案例:定义一段蓝色的字体段落;当鼠标移入段落时,就显示为红色;当鼠标移出时,段落文字显示为绿色;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//定义hover方法切换事件;
				$("p").hover(function(){
					//当鼠标移动到 p标签 上时;显示为红色;
					$(this).css("color","red");
				},function(){
					//当鼠标移出 p标签时;显示绿色;
					$(this).css("color","green");
				});
			});
		</script>
	</head>
	<body>
		<!-- 定义蓝色的段落p标签 -->
		<p style="color: blue;">这是一个段落</p>
	</body>
</html>

效果:

在这里插入图片描述

toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

参数	类型	注释
fn,fn2,[fn3,fn4,…]	Function,…	fn:第一数次点击时要执行的函数。fn2:第二数次点击时要执行的函数。fn3,fn4,…:更多次点击时要执行的函数。
[speed] ,[fn]	String,Function	`speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast "`fn:在动画完成时执行的函数，每个元素执行一次。
[speed], [easing ], [fn ]	String,String,Function	easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
switch	Boolean	用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素

案例:使用toggle方法实现点击切换文本三种不同的颜色,且轮流执行;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//ready事件;
			$(function(){
				//为操作按钮定义toggle方法;
				$("#btn_ID").toggle(
				function(){
					//单击按钮时触发第一个函数;div文本变为红色;
					$("div").css("background-color","red");
				},function(){
					//单击按钮时触发第二个函数;div文本变为绿色;
					$("div").css("background-color","green");
				},function(){
					//单击按钮时触发第三个函数;div文本变为紫色;
					$("div").css("background-color","#FF00FF");
				});
			});
		</script>
	</head>
	<body>
		<div style="background-color: cadetblue;">
			toggle方法;不但可以绑定多个处理函数;还可以实现切换隐藏和显示;
		</div>
		<input type="button" value="操作按钮" id="btn_ID" />
	</body>
</html>

当点击三次操作按钮后,再次点击,又回到第一次点击触发的函数;变为红色;

在这里插入图片描述

案例:使用toggle方法实现显示与隐藏文本;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				//设置行级div标签的属性;
				width: 100px;
				height: 100px;
			}
		</style>
		<script type="text/javascript">
			//ready事件;
			$(function(){
			//操作显示到隐藏切换的函数;
			$("#btn"<以上是关于jQuery ---[jQuery事件之 ready事件,绑定事件,合成事件,其他常用事件]的主要内容，如果未能解决你的问题，请参考以下文章 
 课外阅读课外阅读Read001-Read100
 “File.read”和“IO.read”有啥区别？
 leetcode 157. Read N Characters Given Read4  利用read4实现read --------- java
 生物信息里PE reads是啥意思？
 DataInputStream.read() 与 DataInputStream.readFully()
 R语言读取excel文件实战（read.xlsx函数read_excel函数read.xlsx函数Write函数）

jQuery ---[jQuery事件之 ready事件,绑定事件,合成事件,其他常用事件]

目录

ready事件

绑定事件

合成事件