jQuery子元素过滤器
| 名称 | 说明 | 举例 |
| :nth-child(index/even/odd/equation) | 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ 可以使用: | 在每个 ul 查找第 2 个li: $("ul li:nth-child(2)") |
| :first-child | 匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找第一个 li: $("ul li:first-child") |
| :last-child | 匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找最后一个 li: $("ul li:last-child") |
| :only-child | 如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。 | 在 ul 中查找是唯一子元素的 li: $("ul li:only-child") |
注：
1、:nth-child(index)从1开始的，而eq(index)是从0开始的，就是说 $("ul li:nth-child(0)").css("color","red")是获取不到相匹配的元素，只能从1开始，即 $("ul li:nth-child(1)").css("color","red")，而eq(0)可以获得，同样都是获得第一个子元素
:nth-child(even)是获得偶数子元素，即第二个，第四个，第六个...,而:even则是从索引0开始，匹配第二个索引，第四个索引...,也就是第一个，第三个，第五个...,看上去貌似都是获得奇数项，同样:nth-child(odd)和:odd同样也是如此
2、 :first-child匹配每个父类的子元素，而:first则是匹配一个子元素， :last-child和last也是这样
3、only-child:匹配某个元素是父元素中唯一的子元素，就是说当前子元素是类中唯一的元素，则匹配！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<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>
</div>
</form>
</body>
</html>
学习ing
这节排版有点乱啊
7年前 添加回复 0