jQuery遍历（过滤）

2020-12-24 14:32:16 阅读：150 来源： 互联网

标签：jQuery 遍历 color 元素 yellow url 过滤 background css

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>

标签：jQuery,遍历,color,元素,yellow,url,过滤,background,css
来源： https://www.cnblogs.com/xiaoanbucai/p/14183898.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery遍历（过滤）