023_遍历过滤

最新推荐文章于 2022-08-02 09:24:36 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-08-02 09:24:36 发布

阅读量147

点赞数

分类专栏： jQuery学习文章标签： css javascript html5

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

版权

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

1. first()方法

1.1. first()方法将匹配元素集合缩减为集合中的第一个元素。

1.2. 语法

$(selector).first()

1.3. 例子

1.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>first()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("li").first().css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors ul
			{
				width: 300px; 
				float: left;
			}
			.ancestors ul, .ancestors ul *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<ul>
		  	<li>list item 1</li>
		  	<li>list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
		<ul>
		  	<li>list item 1</li>
		  	<li class="myLi">list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
  		<span style="display: block; clear: left;">
  			<button id="btn1">第一个元素</button>
  		</span>
	</body>
</html>

1.3.2. 效果图

2. last()方法

2.1. last()方法将匹配元素集合缩减为集合中的最后一个元素。

2.2. 语法

$(selector).last()

2.3. 例子

2.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>last()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("li").last().css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors ul
			{
				width: 300px; 
				float: left;
			}
			.ancestors ul, .ancestors ul *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<ul>
		  	<li>list item 1</li>
		  	<li>list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
		<ul>
		  	<li>list item 1</li>
		  	<li class="myLi">list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
  		<span style="display: block; clear: left;">
  			<button id="btn1">最后一个元素</button>
  		</span>
	</body>
</html>

2.3.2. 效果图

3. eq()方法

3.1. eq()方法将匹配元素集缩减值指定index上的一个。

3.2. 语法

$(selector).eq(index)

3.3. 参数

3.4. 负数索引

3.4.1. 如果提供负数, 则指示从集合结尾开始的位置, 而不是从开头开始。

3.4.2. 例如:

<ul>
  	<li>list item 1</li>
  	<li>list item 2</li>
  	<li>list item 3</li>
  	<li>list item 4</li>
  	<li>list item 5</li>
</ul>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('li').eq(-2).css('background-color', 'red');
	});
</script>

3.4.3. 项目4的背景变为红色, 这是因为它是集合结尾开始的第二个。

3.5. 如果无法根据指定的index参数找到元素, 则该方法构造带有空集的jQuery对象, length属性为0。

3.6. 例子

3.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>eq()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("li").eq(6).css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("li").eq(-6).css({"color":"blue","border":"2px solid blue"});
				});
				$('#btn3').click(function(){
					$("li").eq(16).css({"color":"green","border":"2px solid green"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors ul
			{
				width: 300px; 
				float: left;
			}
			.ancestors ul, .ancestors ul *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<ul>
		  	<li>list item 1</li>
		  	<li>list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
		<ul>
		  	<li>list item 1</li>
		  	<li class="myLi">list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
  		<span style="display: block; clear: left;">
  			<button id="btn1">索引元素</button> <button id="btn2">负数索引元素</button> <button id="btn3">无法找到的索引</button>
  		</span>
	</body>
</html>

3.6.2. 效果图

4. filter()方法

4.1. filter()方法将匹配元素集合缩减为匹配指定选择器的元素。

4.2. 语法 1

$(selector).filter(selector)

4.3. 通过函数而不是选择器来筛选元素。对于每个元素, 如果该函数返回true, 则元素会被包含在已筛选集合中; 否则, 会排除这个元素。

4.4. 参数

4.5. 语法 2

$(selector).filter(function(index))

4.6. 参数

4.7. 例子

4.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>filter()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("li").filter(".myLi").css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("li").filter(function(index) {
  						return $(this).hasClass('myLi');
					}).css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors ul
			{
				width: 300px; 
				float: left;
			}
			.ancestors ul, .ancestors ul *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<ul>
		  	<li>list item 1</li>
		  	<li class="myLi">list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
		<ul>
		  	<li>list item 1</li>
		  	<li class="myLi">list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
  		<span style="display: block; clear: left;">
  			<button id="btn1">过滤元素</button> <button id="btn2">函数过滤元素</button>
  		</span>
	</body>
</html>

4.7.2. 效果图

5. not()方法

5.1. not()方法返回不匹配标准的所有元素。

5.2. not()方法与filter()相反。

5.3. 语法 1

$(selector).not(selector)

5.4. 参数

5.5. 语法 2

$(selector).not(element)

5.6. 参数

5.7. 语法 3

$(selector).not(function(index))

5.8. 参数

5.9. 例子

5.9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>not()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("li").not(".myLi").css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("li").not($(".myLi")).css({"color":"red","border":"2px solid red"});
				});
				$('#btn3').click(function(){
					$("li").not(document.getElementsByClassName("myLi")).css({"color":"red","border":"2px solid red"});
				});
				$('#btn4').click(function(){
					$("li").not(function(index){
						return index > 4;
					}).css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors ul
			{
				width: 300px; 
				float: left;
			}
			.ancestors ul, .ancestors ul *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
  		<ul>
		  	<li>list item 1</li>
		  	<li class="myLi">list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
		<ul>
		  	<li>list item 1</li>
		  	<li class="myLi">list item 2</li>
		  	<li>list item 3</li>
		  	<li>list item 4</li>
		  	<li>list item 5</li>
		</ul>
  		<span style="display: block; clear: left;">
  			<button id="btn1">不匹配元素</button> <button id="btn2">不匹配元素(jQuery对象)</button>
  			<button id="btn3">不匹配元素(DOM节点)</button> <button id="btn4">不匹配元素(函数)</button>
  		</span>
	</body>
</html>

5.9.2. 效果图