jQuery基础 - 筛选器

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_34015860

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量57

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/zhaojunhui/blog/1862412

版权

2019独角兽企业重金招聘Python工程师标准>>>

过滤筛选器

用法	释义
$("div").css	选中所有div类标签
$("div:first") 或 $("div").first()	筛选出第一个
$("div:last") 或 $("div").last()	筛选出最后一个
$("div:eq(1)") 或 $("div").eq(1)	筛选出指定位置标签
$("div:lt(2)")	筛选出指定位置前的所有标签
$("div:gt(1)")	筛选出指定位置后的所有标签
$("div:even()")	筛选掉偶数行，剩下奇数行标签
$("div:odd()")	/筛选掉奇数行，剩下偶数行标签生效

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<div>第一个div标签</div>
	<div>第二个div标签</div>
	<div>第三个div标签</div>
	<div>第四个div标签</div>
<script>
	$("div").css("text-align","center");				//选中所有 div 标签
	$("div").first().css("color","red");				//筛选出第一个
	$("div").last().css("color","green");				//筛选出最后一个
	$("div").eq(1).css("color","blue");					//筛选出指定位置标签(第二个标签)，下标序列以0开始
	$("div:lt(2)").css("width","200px");				//筛选出指定位置前的所有标签生效
	$("div:gt(1)").css("width","300px");				//筛选出指定位置后的所有标签生效
	$("div:even()").css("background-color","#ccc");		//筛选掉偶数行，剩下奇数行标签生效
	$("div:odd()").css("background-color","#CCFFFF");	//筛选掉奇数行，剩下偶数行标签生效

</script>
</body>
</html>

查找筛选器

用法	释义
$("div").children(".test")	指定子级标签
$("div").find(."test")	搜索所有下级标签
$(".test").next()	指定同级下一个标签
$(".test").netxAll()	指定同级以后所有标签
$(".test").nextUntil()	指定同级以后所有至结束点的标签
$("div").prev()	指定同级上一个标签
$("div").prevAll()	指定同级以前所有标签
$("div").prevUntil()	指定同级以前所有至结束点的标签
$(".test").parent()	指定父级标签
$(".test").parents()	指定父级以上所有标签
$(".test").parentUntil()	指定父级以上所有至结束点的标签
$("div").siblings()	指定选中标签元素意外的所有标签

搜索查找-子级标签

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<div>同级上一个div标签</div>
	<div id="div_sty">
		<span> 【一级】 span 标签
			<span> 【二级】 span 标签</span>
			<a> 【二级】 a 标签</a>
		</span>
		<a> 【一级】 a 标签</a>
	</div>
	<div>同级下一个div标签</div>

<script>
	$("#div_sty").children("a").css("background-color","red");				//指定元素的子标签
	$("#div_sty").find("span").css("background-color","green");				//搜索当前级一下所有的指定标签元素
</script>
</body>
</html>

指定选取父级标签

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<div> 一级 div 标签
		<div id="end"> 二级 div 标签
			<ul> ul 标签
				<li class="start"> li 标签 </li>
			</ul>
		</div>
	</div>
<script>
	$(".start").parent().css("color","red");						//指定当前元素和上一级标签元素
	$(".start").parents().css("background-color","pink");			//指定当前元素上级所有标签元素
	$(".start").parentsUntil("#end").css("border-style","solid");	//指定当前元素同级以前结束位置后，包含的所有标签元素
</script>
</body>
</html>

指定同级以后标签

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<ul>
		<li>111</li>
		<li class="start">222</li>
		<li>333</li>
		<li>444</li>
		<li class="end">555</li>
		<li>666</li>
	</ul>
<script>
	$(".start").next().css("color","red");							//指定当前元素同级下一个标签元素
	$(".start").nextAll().css("background-color","yellow");			//指定当前元素同级以后所有标签元素
	$(".start").nextUntil(".end").css("width","40px");				//指定当前元素同级以后结束位置前，包含的所有标签元素
</script>
</body>
</html>

指定同级以前标签

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<ul>
		<li>fff</li>
		<li class="end">eee</li>
		<li>ddd</li>
		<li>ccc</li>
		<li class="start">bbb</li>
		<li>aaa</li>
	</ul>
<script>
	$(".start").prev().css("color","red");							//指定当前元素同级上一个标签元素
	$(".start").prevAll().css("background-color","yellow");			//指定当前元素同级以前所有标签元素
	$(".start").prevUntil(".end").css("width","40px");				//指定当前元素同级以前结束位置前，包含的所有标签元素
</script>
</body>

指定标签外元素

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li class="test">333</li>
		<li>444</li>
		<li>555</li>
	</ul>
<script>
	$(".test").siblings().css("background-color","red");						//指定当前元素外的所有标签元素生效
</script>
</body>
</html>

转载于:https://my.oschina.net/zhaojunhui/blog/1862412