JQuery事件学习

最新推荐文章于 2022-03-05 15:27:20 发布

Remoa

最新推荐文章于 2022-03-05 15:27:20 发布

阅读量814

点赞数 7

分类专栏：前端开发文章标签： jquery jQuery事件鼠标事件文档窗口事件文档就绪事件

本文链接：https://blog.csdn.net/Remoa_Dengqinyi/article/details/52330962

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JQuery事件学习

目录：

1、jQuery事件：

jQuery是一个快速，小，和功能丰富的JavaScript库。

它使得诸如HTML文档遍历和操作、事件处理、动画和Ajax的一个易于使用的API，可以在众多的浏览器更简单。

1、jQuery事件：

页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。

在jQuery中，大多数DOM（Document Object Model，文档对象模型，定义访问和处理HTML文档的标准语法。）

常用的jQuery事件方法：

（1）文档就绪事件：

防止文档在完全加载之前运行jQuery代码。

①标准形式：

$(document).ready(function(){
<span style="white-space:pre">	</span>//开始写jquery代码
});

②简单形式：

$((function(){
<span style="white-space:pre">	</span>//开始写jquery代码
});

以上两种方式实现文档就绪后执行jQuery方法。

（2）鼠标事件：

①click：点击元素时

②dbclick：双击元素时

③mouseenter：鼠标指针穿过元素

④mouseleave：鼠标指针离开元素

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#button1").click(function(){
					$("#paragraph1").slideToggle();
				});
				$("h3").dblclick(function(){
					$(this).hide();
				});
				$("#button2").click(function(){
					$("#paragraph2").mouseenter();
				});
				$("#button3").click(function(){
					$("#paragraph2").mouseleave();
				});
				$("#paragraph2").mouseleave(function(){
					$("#paragraph2").css("background-color","#D5D5D5");
				});
				$("#paragraph2").mouseenter(function(){
					$("#paragraph2").css("background-color","red");
				});
			});
			
		</script>	
	</head>
	<body>
		<button id="button1">切换</button>
		<p id="paragraph1">click方法测试</p>
		<hr />
		<h3>当前标题双击隐藏</h3>
		<hr />
		<p id="paragraph2" style="background-color:#D5D5D5">把指针移到这背景会变红</p>
		<button id="button2">点击此处触发mouseenter事件</button></br>
		<button id="button3">点击此处出发mouseleave事件</button>
	</body>
</html>

运行结果：

图1.1 截图1

（3）键盘事件：

完整的key press过程包括两部分，按键被按下，然后按键被松开并复位。

①keypress：每插入一个字符。就会发生keypress事件。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。

②keydown：按钮被按下

③keyup：按钮被松开

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1</title>
		<script type="text/javascript" src="js/jquery-3.1.0.js" ></script>
		<script type="text/javascript">
			var i = 0;
			$(document).ready(function(){
				$("input").keypress(function(){
					$("span").text(i+=1);
				});
				
				$("input").keydown(function(){
					$("input").css("background-color","yellow");
				});
				$("input").keyup(function(){
					$("input").css("background-color","cyan");
				});
				$("#button1").click(function(){
					$("input").keydown();
				});
				$("#button2").click(function(){
					$("input").keyup();
				});
			});
		</script> 
	</head>
	<body>
		<label>Enter your name:</label>
		<input type="text" name="name" />
		<p>Keypresses:<span>0</span></p>
		<p>当发生keydown和keyup时，输入框会变色</p>
		<button id="button1">keydown按钮</button>
		<button id="button2">keyup按钮</button>
	</body>
</html>

运行结果：

图1.2 截图2

（4）表单事件：

①blur：当元素失去焦点时

②change：仅适用于文本域（text field），textarea和select元素，当元素的值发生改变时，会发生change事件。

③focus：当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点。

④submit：当提交表单时

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单事件学习</title>
		<script type="text/javascript" src="js/jquery-3.1.0.js" ></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("form").submit(function(e){
					alert("提交成功");
				});
				$("#myinput").focus(function(){
					$("#myinput").css("background-color","cyan");
				});
				$("#myinput").blur(function(){
					$("#myinput").css("background-color","red");
				});
			});
		</script>
	</head>
	<body>
		<form>
			账号：<input type="text" id="myinput"/><br />
			密码：<input type="password" /><br>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

运行结果：

图1.3 截图3

（5）文档、窗口事件：

①load：当指定的元素已加载时，会发生load（）事件。适用于任何带有URL的元素。

②resize：调整浏览器窗口的大小时

③scroll：当用户滚动指定的元素时

④unload：当用户离开页面时，包括：点击某个离开页面的链接，在地址栏键入了新的URL，使用前进或后退按钮，关闭浏览器，重新加载页面。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文档、窗口事件学习</title>
		<script type="text/javascript" src="js/jquery-3.1.0.js" ></script>
		<script type="text/javascript">
			var i=0; 
			var j=0;
			$(document).ready(function(){
//	  			$("img").load(function(){
//	    			$("#loaddiv").text("图像已加载");
//	  			});
	  			$("#scroll").scroll(function(){
	  				$("#span1").text(i+=1); 
	  			});
	  			$(window).resize(function(){
	  				$("#span2").text(j+=1);
	  			})
			});
		</script>
	</head>
	<body>
		<img src="img/case1.jpg" />
		<div id="loaddiv">图像正在加载中 ...</div>
		<p><b>注释：</b>根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。</p> 
		<p>请试着滚动 DIV 中的文本：</p>
		<div id="scroll" style="width:200px;height:100px; overflow:scroll;">
			text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. 
		<br /><br />
		text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.
		</div>
		<p>滚动了 <span id="span1">0</span> 次。</p>
		<hr />
		<p>调整浏览器大小</p>
		<p>调整了<span id="span2">0</span>次</p>
	</body>
</html>

运行结果：