版权声明
- 本文原创作者:谷哥的小弟
- 作者博客地址: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
查看评论