jQuery遍历（过滤）

first()返回被选元素的首个元素

$("p").first().css("background-color","yellow");

last()返回被选元素的最后一个元素

$("p").last().css("background-color","yellow");

   $("p").first().css("background-color","yellow");
和 $("p:first").ss("background-color","yellow");
效果一样。

   $("p").last().css("background-color","yellow");
和 $("p:last").css("background-color","yellow");
效果一样。

eq()返回被选元素中带有指定索引号的元素

例子：索引号从 0 开始,选取第二个 <p> 元素（索引号 1）

$("p").eq(1).css("background-color","red");

filter() 方法允许您规定一个标准。

不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

例子：返回带有类名 "url" 的所有 <p> 元素

$("p").filter(".url").css("border","2px solid black");

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

$("p").not(".url").css("border","2px solid blue");

   $("p").not(".url");
和 $("p:not(.url)");
效果一样。

<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script>
			$(document).ready(function() {

				//返回被选元素的首个元素
				$("div p").first().css(
					"background-color", "yellow");

				//返回被选元素的最后一个元素
				$("div p").last().css(
					"background-color", "pink");	

				//返回被选元素中带有指定索引号的元素
				//索引号从 0 开始,选取第二个 <p> 元素（索引号 1）
				$("p").eq(1).css(
					"background-color","red");
				
				//filter() 方法允许您规定一个标准。
				//返回带有类名 "url" 的所有 <p> 元素
				$("p").filter(".url").css(
					"border","2px solid black");
				
				//not() 方法返回不匹配标准的所有元素。
				//提示：not() 方法与 filter() 相反。
				$("p").not(".url").css(
					"border","2px solid blue"
				);

			});
		</script>
	</head>
	<body>

		<h1>欢迎访问我的主页</h1>
		<div>
			<p>首个div元素内部的第一个p元素</p>
		</div>

		<div>
			<p class="url">类名为url的div元素中的p元素</p>
		</div>
		
		<div>
			<p >最后一个div元素中的最后一个p元素</p>
		</div>

		<p>这是一个段落。</p>

	</body>
</html>
posted @ 2020-12-24 14:27  小安不菜  阅读(67)  评论(0)  编辑  收藏  举报