小言_互联网的博客

jQuery前端开发学习指南(12)——jQuery子元素过滤选择器

285人阅读  评论(0)

版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

子元素过滤选择器概述

子元素过滤选择器用于根据子元素在父元素中的顺序来获取子元素。

:nth-child 

根据子元素顺序(顺序从1开始)获取父元素中的子元素。除此以外,也可以根据奇偶来或者倍数进行选择。

:first-child 

选择父元素的第一个子元素

:last-child 

选择父元素的最后一个子元素

:only-child 

如果某个元素是父元素中唯一的子元素,那将会匹配该唯一子元素

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery基础</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
    
				//示例1、设置列表中第2个li字号为40
				$("ul li:nth-child(2)").css("font-size",40);
				
				//示例2、设置列表中第一行字体为红色
				$("ul li:first-child").css("color","red");
				
				//示例3、设置列表中最后一行字体为蓝色	
				$("ul li:last-child").css("color","blue");
				
				//示例4、获取ul下只有一个li的内容
				var content=$("ul li:only-child").html();
				console.log(content);
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>

		<ul>
			<li>Java</li>
			<li>Python</li>
			<li>Android</li>
			<li>JavaScript</li>
		</ul>
		<ul>
			<li>张曼玉</li>
			<li>林青霞</li>
			<li>李嘉欣</li>
			<li>张美霞</li>
		</ul>
		<ul>
			<li>HUAWEI</li>
		</ul>

	</body>
</html>


转载:https://blog.csdn.net/lfdfhl/article/details/115338017
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场