JQuery之基本筛选选择器简介（一部分）

最新推荐文章于 2024-05-06 00:10:39 发布

caterpillar tail

最新推荐文章于 2024-05-06 00:10:39 发布

阅读量298

点赞数

分类专栏： web前端文章标签：语言 JQuery

本文链接：https://blog.csdn.net/dongxingpeng/article/details/55509287

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

		更多请访问
		<title>JQuery对象之基本筛选器</title>
	</head>
	<body>
		<div class="div">
			<p>第一个</p>
			<p>第一个---</p>
		</div>
		<div class="div">
			<p>第二个</p>
			<p>第二个---</p>
		</div>
		<div class="div">
			<p>第三个</p>
			<p>第三个---</p>
		</div>
		<div class="div">
			<p>第四个</p>
			<p>第四个---</p>
		</div>
		<div class="div">
			<p>第五个</p>
			<p>第五个---</p>
		</div>
		<script type="text/javascript">
		//筛选第一个元素，格式：$("pre:first") 筛选pre的第一个元素
			$(".div:first").css("color","blue");
		//筛选最后一个元素,格式：$("pre:last") 筛选pre的最后一个元素	
			$(".div:last").css("color","red");
		//筛选索引值为偶数的元素 个数：$("pre:even") 筛选pre索引值为偶数行的元素
		//索引值从0开始计数
			$(".div:even").css("background-color","aquamarine");
		//筛选索引值为奇数的元素 个数：$("pre:odd") 筛选pre索引值为奇数行的元素
		//索引值从0开始计数	
			$(".div:odd").css("background-color","royalblue");
		</script>
		<hr />
		<!--   -------------------     这是分界线         ----------------------                                    -->
		<div class="div1">
			<p>div1第一个</p>
			<p>div1第一个---</p>
		</div>
		<div class="div1">
			<p>div1第二个</p>
			<p>div1第二个---</p>
		</div>
		<div class="div1">
			<p>div1第三个</p>
			<p>div1第三个---</p>
		</div>
		<div class="div1">
			<p>div1第四个</p>
			<p>div1第四个---</p>
		</div>
		<div class="div1">
			<p>div1第五个</p>
			<p>div1第五个---</p>
		</div>
		<script type="text/javascript">
		//选择索引值大于2的元素。
		//格式：$("pre:gt(x)") 选择pre元素中索引值大于x的元素。
			$(".div1:gt(2)").css("background","chartreuse");
		//选择索引值小于2的元素。
		//格式：$("pre:lt(x)") 选择pre元素中索引值小于x的元素。
			$(".div1:lt(2)").css("background","#A52A2A");
		//选择索引值等于2的元素。
		//格式：$("pre:eq(x)") 选择pre元素中索引值等于x的元素。
			$(".div1:eq(2)").css("background","aqua");	
		</script>
		<hr />
		<!------------------------------------这是分界线 ----------------------------->
		<div>
			<input type="checkbox" name="a" value="" />
			<p>第一个</p>
		</div>
		<div>
			<input type="checkbox" name="b" value="" />
			<p>第一个</p>
		</div>
		<div>
			<input type="checkbox" name="c" value=""  checked="checked"/>
			<p>第一个</p>
		</div>
		<script type="text/javascript">
		//选择input中没有checked属性的之后的紧邻的P元素的背景色。
		//格式$("pre:not(:X)") 选择pre元素中没有X属性的其他元素。
			$("input:not(:checked)+p").css("background-color","chocolate");
		</script>
	</body>
</html>

caterpillar tail

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery之基本筛选选择器简介（一部分）

JQuery对象之基本筛选器第一个第一个--- 第二个第二个--- 第三个第三个--- 第四个第四个--- 第五个第五个--- //筛选第一个元素，格式：$("pre:first") 筛选pre的第一个元素 $(".div:first").cs
复制链接

扫一扫

专栏目录