jQuery子元素选择器

最新推荐文章于 2024-05-12 11:31:09 发布

恋恋玫瑰花

最新推荐文章于 2024-05-12 11:31:09 发布

阅读量1.1k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42923643/article/details/81590864

版权

jQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery子元素选择器</title>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// li的父元素的第一个子元素
			// $('li:first-child').css('background','red');
			// $('li:last-child').css('background','red');
			// 注意:li的父元素的第二个元素,不是li,因此不渲染
			// $('li:nth-child(2)').css('background','red');
			// n=0,1,2,3,4
			//0,2,4,6,8
			// $('li:nth-child(2n)').css('background','red');
			//1,3,5,7,9
			// $('li:nth-child(2n+1)').css('background','red');

			// even偶数,0,2,4,6,8
			// $('li:nth-child(even)').css('background','red');
			//odd奇数1,3,5,7,9
			// $('li:nth-child(odd)').css('background','red');
			//父元素的唯一li子元素
			$('li:only-child').css('background','red');
		});

		
	</script>
</head>
<body>
	<ul>
		<!-- 多了span标签,不是唯一子li标签,不渲染 -->
		<!-- <span>brother</span> -->
		<li>only child</li>
	</ul>
	<ul>
		<li>静夜思</li>
		<span>唐朝</span>
		<li>李白</li>
		<li>床前明月光</li>
		<li>疑是地上霜</li>
		<li>举头望明月</li>
		<li>低头思故乡</li>
	</ul>
</body>
</html>

恋恋玫瑰花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery子元素选择器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery子元素选择器&lt;/title&gt; &lt;script type="text/javascript" src=&quot
复制链接

扫一扫

专栏目录