jQuery子元素过滤器的使用方式及含义

最新推荐文章于 2022-01-08 09:51:56 发布

周楚雄

最新推荐文章于 2022-01-08 09:51:56 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/zhouchuxiong/article/details/89330999

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
	</ul>
	<ul>
		<li></li>
	</ul>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("ul li:first-child").css("background","red") 
// :first-child 选取父元素内的第一个子元素

$("ul li:first-of-type").css("background","pink")
// :first-of-type 查找父元素ul的子元素中的第一个li标签

$("ul li:last-child").css("background","red")
// :last-child 选取父元素内的最后一个子元素

$("ul li:last-of-type").css("background","pink")
// :last-of-type 查找父元素ul的子元素中的最后一个li标签

$("ul li:nth-child(2)").css("background","blue")
// :nth-child(2) 选取父元素内正数第二个子元素,child()括号内写几就是正数第几个子元素

$("ul li:nth-last-child(2)").css("background","black")
// :nth-last-child(2) 选取父元素内倒数第二个子元素,child()括号内写几就是倒数第几个子元素

$("ul li:nth-last-of-type(3)").css("background","green")
// :nth-last-of-type(3) 查找父元素ul的子元素中倒数第三个li

$("ul li:nth-last-of-type(3n-2)").css("background","green")
// :nth-last-of-type(3n-2) 查找父元素ul的子元素中倒数顺序符合type()括号内值的li

$("ul li:nth-of-type(2n)").css("background","#009494")
// :nth-of-type(2n) 查找父元素ul的子元素中正数顺序符合type()括号内值的li

$("ul li:only-child").css("background","#445845")
// :only-child 选取父元素ul中只有一个子元素li的

$("ul li:only-of-type").css("background","#235485")
// :only-of-type 查找父元素ul内只有一个子元素li的,如果ul内li有兄弟元素则不匹配
</script>
</html>