009_jQuery链式编程

最新推荐文章于 2022-11-09 12:35:37 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-11-09 12:35:37 发布

阅读量113

点赞数

分类专栏： jQuery学习文章标签： jquery

本文链接：https://blog.csdn.net/aihiao/article/details/109806541

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. jQuery方法链接

1.1. 有一种名为链接(chaining)的技术, 允许我们在相同的元素上运行多条jQuery命令, 一条接着另一条。

1.2. 这样的话, 浏览器就不必多次查找相同的元素。

1.3. 如需链接一个动作, 您只需简单地把该动作追加到之前的动作上。

1.4. 下面的例子, 把fadeOut()、fadeIn()、slideUp()和slideDown()链接在一起。id为"p1"元素首先会隐藏, 然后会显示, 再然后向上滑动, 最后向下滑动:

$("#p1").fadeOut().fadeIn().slideUp().slideDown();

1.5. 当进行链接时, 代码行会变得很差。不过, jQuery在语法上不是很严格; 您可以按照希望的格式来写, 包含折行和缩进。

$("#p1").fadeOut()
	.fadeIn()
  	.slideUp()
  	.slideDown();

2. 例子

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery链式编程</title>
		<meta charset="utf-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("div").hide('normal')
						.show('slow')
						.fadeOut(2000)
						.fadeIn('fast')
						.slideUp()
						.slideDown();
				});
			});
		</script>
	</head>
	<body>
		<button id="btn1">执行多个效果</button><br /><br />
		<div style="background-color: red; width:300px; height: 150px;">
			jQuery链式编程
		</div>
	</body>
</html>

2.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
009_jQuery链式编程

1. jQuery方法链接1.1. 有一种名为链接(chaining)的技术, 允许我们在相同的元素上运行多条jQuery命令, 一条接着另一条。1.2. 这样的话, 浏览器就不必多次查找相同的元素。1.3. 如需链接一个动作, 您只需简单地把该动作追加到之前的动作上。1.4. 下面的例子, 把fadeOut()、fadeIn()、slideUp()和slideDown()链接在一起。id为"p1"元素首先会隐藏, 然后会显示, 再然后向上滑动, 最后向下滑动:$("#p1").fad
复制链接

扫一扫

专栏目录