jQuery选择器之子元素选择器
2024-08-30 11:55:24
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>子元素筛选选择器</h2>
<h3>:first-child、:last-child、:only-child</h3>
<div class="left first-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
</div> <script type="text/javascript">
//查找class="first-div"下的第一个a元素
//针对所有父级下的第一个
$(".first-div a:first-child").css("color", "#CD00CD");
</script> <script type="text/javascript">
//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话,last也是第一个元素
$(".first-div a:last-child").css("color", "red");
</script> <script type="text/javascript">
//查找class="first-div"下的只有一个子元素的a元素
$(".first-div a:only-child").css("color", "blue");
</script> <h3>:nth-child、:nth-last-child</h3>
<div class="left last-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>第三个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>第三个元素</a>
<a>:last-child</a>
</div>
</div> <script type="text/javascript">
//查找class="last-div"下的第二个a元素
$(".last-div a:nth-child(2)").css("color", "#CD00CD");
</script> <script type="text/javascript">
//查找class="last-div"下的倒数第二个a元素
$(".last-div a:nth-last-child(2)").css("color", "red");
</script> </body> </html>
注意:
jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
最新文章
- 一分钟读懂MySQL分布式消息的处理
- android操作线程各种方法解析
- Does Lamda expression return value?
- IOS 去掉导航栏(UINavigationBar)下方的横线
- DampView阻尼效果
- system.io.file创建
- Qt多工程多目录的编译案例
- lpad函数
- [Swift]LeetCode921.使括号有效的最少添加 | Minimum Add to Make Parentheses Valid
- Cocos Creator (webgl模式下怎么让canvas背景透明)
- 剑指offer【06】- 旋转数组的最小数字(java)
- 最长公共子序列-LCS问题 (LCS与LIS在特殊条件下的转换) [洛谷1439]
- Selenium2+python自动化73-定位的坑:class属性有空格
- Haskell语言学习笔记(81)Data.Typeable
- ThinkPHP框架知识(比较全的知识)
- shiro双realm验证
- hex string 换转
- 对于DQN的三大改进 - 这篇讲的好些
- python-标识符(Identifiers)和关键字(keywords)
- Spring,Struts2,MyBatis,Activiti,Maven,H2,Tomcat集成(四)——Activiti集成