jQuery高级应用（下篇）

最新推荐文章于 2019-07-30 15:37:42 发布

原创最新推荐文章于 2019-07-30 15:37:42 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了jQuery的事件处理机制，包括页面加载、事件绑定、切换事件等，并演示了常见键盘与鼠标操作事件的使用方法。此外，还探讨了jQuery提供的功能函数及插件开发方法。

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

jQuery的事件处理

脚本语言有了事件就有了“灵魂”，可见事件对于脚本语言是多么的重要。这是因为事件使得页面具有动态性和响应性。如果没有事件，将很难完成页面与用户之间的交互。
jQuery有效地简化了JavaScript的编程。jQuery的事件机制是事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

什么是jQuery的事件机制：
jQuery的事件机制在jQuery框架中起着重要的作用。jQuery的事件处理方法是jQuery中的核心函数。通过jQuery的事件处理机制，可以创造自定义的行为，比如改变样式、效果显示、提交等，使网页效果更加丰富。
jQuery的事件处理机制包括页面加载、事件绑定、事件委派、事件切换四种机制。

-切换事件：

在一个元素上绑定了两个以上的事件，在各个事件之间进行的切换动作。
如：当鼠标放置在图片上时触发一个事件，当鼠标单击后又触发一个事件，可以用切换事件来实现。
在jQuery中，有两种方法用于事件的切换：hover()、toggle()。
当需要设置在鼠标悬停和鼠标移出的事件中进行切换时，使用Hover（）方法。

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
        	$(document).ready(function(){
        		$(".div1").hover(function(){
        			$(".clsContent").show();
        		});
        	});
        	

       		
        </script>
    </head>
    <body>
    	<div class="clsContent" style="display: none;">陌上人如玉</div>
    	<div class="div1" style="background: blueviolet;height: 100px;width: 200px;position: absolute;"></div>
    </body>
</html>

网页显示效果为：
在这里插入图片描述图1

切换事件可以绑定两个或更多函数。当指定元素被点击时，在两个或多个函数之间轮流切换。
如果规定了两个以上的函数，则toggle()方法将切换所有函数。例如：如果存在三个韩顺，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数，以此类推。

页面加载响应事件：
jQuery中的$(document).ready()事件是页面加载响应事件。ready（）是jQuery事件模块中最重要的一个函数。这个方法可以看作是对window.onload注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪时立刻调用所绑定的函数，而几乎所有的JavaScript函数都需要在那一刻执行。ready()函数仅能用于当前文档，因此无需选择器。
ready()函数的语法格式有如下三种：
$(document).ready(function);
$().ready(function);
$(fucntion);

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".btn1").click(function(){
					$("p").slideToggle();
				});
			});
		</script>
	</head>

	<body>
		<p>陌上人如玉</p>
		<button class="btn1">点击</button>
	</body>

</html>

网页显示效果为：
在这里插入图片描述图2

jQuery中的事件函数
日常开发中常见的键盘操作包括
keydown() 按下键盘上某个按键时触发
keyup() 按下某个按键并产生字符时触发
keypress() 释放某个按键时触发
完整的按键过程应该分为两步：首先按键被按下；然后按键被释放并复位。

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("input").keydown(function(){
					$("input").css("background-color","yellow");
				});
				$("input").keyup(function(){
					$("input").css("background-color","red");
				});
			});
		</script>
	</head>

	<body>
		Enter your name:<input type="text" />
		<p>当发生keydown和keyup事件时，输入域会 改变颜色。</p>
	</body>

</html>

网页显示效果为：
在这里插入图片描述图3

keypress()事件与keydown()事件类似。当按键被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与Keydown事件不同，每插入一个字符，就会发生keypress()事件。keypress()方法触发keypress()事件，或规定当发生keypress事件时运行的函数。

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			var i=0;
			$(document).ready(function() {
				$("input").keypress(function(){
					$("span").text(i+=1);
				});
			});
		</script>
	</head>

	<body>
		Enter your name:<input type="text" />
		<p>Keypresses:<span>0</span></p>
	</body>

</html>

网页显示效果为：
在这里插入图片描述图4

鼠标操作事件：

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			var i=0;
			$(document).ready(function(){
				$(document).mousemove(function(e) {
					$("span").text( "(" + e.pageX + "," + e.pageY + ")");
				});
			});
		</script>
	</head>

	<body>
		<p>鼠标当前坐标:<span></span>.</p>
	</body>

</html>

网页显示效果为：
在这里插入图片描述图5

使用mouseover和mouseout函数：

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("p").mouseover(function() {
					$("p").css("background-color","yellow");
				});
				$("p").mouseout(function(){
					$("p").css("background-color","#E9E9E4")
				});
			});
		</script>
	</head>

	<body>
		<p style="background-color: #E9E9E4;">请把鼠标指针移动到这个段落上</p>
	</body>

</html>

网页显示效果为：
在这里插入图片描述图6

click()单击事件
dblclick()双击事件

jQuery的功能函数

jQuery提供了对元素进行遍历、筛选、合并等操作的函数。

<!DOCTYPE html>
<html>
	<head>
		<title>合并数组</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var first = ['A','B','C','D'];
				var second = ['E','F','G','H'];
				$("p:eq(0)").text("数组a:" + first.join());
				$("p:eq(1)").text("数组b:" + second.join());
				$("p:eq(2)").text("合并数组：" + ($.merge($.merge([],first),second)).join());
			});
		</script>
	</head>
	<body>
		<p></p><p></p><p></p>
	</body>
</html>

网页显示效果为：
在这里插入图片描述图7

对于数组和对象的操作，主要包含元素的遍历、筛选、合并。
(1) each()方法用于为每个匹配元素规定运行的函数。可以使用each()方法来遍历数组和对象。

<!DOCTYPE html>
<html>
	<head>
		<title>合并数组</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("button").click(function(){
					$("li").each(function(){
						alert($(this).text());
					});
				});
			});
		</script>
	</head>
	<body>
		<button>输出每个列表项的值</button>
		<ul>
			<li>123</li>
			<li>789</li>
			<li>345</li>
			<li>wrt</li>
		</ul>
	</body>
</html>

网页显示效果为：
在这里插入图片描述图8

(2) grep()方法用于数组元素过滤筛选。
grep(array,fn,invert)
array：待过滤数组。
fn：过滤函数。

<!DOCTYPE html>
<html>
	<head>
		<title>合并数组</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			var Array = [1,2,3,4,5,6,7];
			var Result = $.grep(Array,function(value){
				return (value>2);
			});
			document.write("原数组：" + Array.join() + "<br>");
			document.write("筛选大于2的结果：" + Result.join());
		</script>
	</head>
	<body>
	</body>
</html>

网页显示效果为：
在这里插入图片描述图9

jQuery插件的开发与使用

编写插件的目的是给已有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护。
jQuery插件就是JS包。
拖动方块插件：

<!DOCTYPE html>
<html>
	<head>
		<title>合并数组</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="jquery-ui.js"></script>
		<style type="text/css">
			.block{
				border: 2px solid #760022;
				background-color: #ffb5bb;
				width: 80px;
				height: 25px;
				margin: 5px;
				float: left;
				padding: 20px;
				text-align: center;
				font-size: 14px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				for(var i=0; i<2; i++){
					$(document.body).append($("<div class='block'>拖块" + i.toString() + "</div>").css("opacity",0.6));
				}
				$(".block").draggable();
			});
		</script>
	</head>
	<body>
	</body>
</html>

网页显示效果为：
在这里插入图片描述
图10