024_堆栈元素

最新推荐文章于 2022-01-17 12:48:00 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-01-17 12:48:00 发布

阅读量137

点赞数

分类专栏： jQuery学习文章标签： jQuery end()方法筛选操作元素集链式操作

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/112385782

版权

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

1. 大多数jQuery的遍历方法会操作一个jQuery对象实例, 并生成一个匹配不同DOM元素集的新对象。当发生这种情况时, 应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。

2. end()方法

2.1. end()方法结束当前链条中的最近的筛选操作, 并将匹配元素集还原为之前的状态。

2.2. 语法

$(selector).end()

2.3. 例子

2.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>end()方法</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					// 在第一个查找操作完成后, 没有end操作, 第二次查找的结果不会放进堆栈中
					$('ul').find('.foo').css('background-color', 'red').find('.bar').css('background-color', 'green');
				});
				$('#btn2').click(function(){
					$('ul').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');
				});
			});
		</script>
	</head>
	<body> 
		列表1:
		<ul class="first">
		   <li class="foo">list item 1</li>
		   <li>list item 2</li>
		   <li class="bar">list item 3</li>
		</ul>
		列表2:
		<ul class="second">
		   <li class="foo">list item 1</li>
		   <li>list item 2</li>
		   <li class="bar">list item 3</li>
		</ul>

		<button id="btn1">无end()方法</button> <button id="btn2">end()方法</button>
	</body>
</html>

2.3.2. 效果图