jQuery子元素过滤器


名称说明举例
:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

可以使用: 
nth-child(even) 
:nth-child(odd) 
:nth-child(3n) 
:nth-child(2) 
:nth-child(3n+1) 
:nth-child(3n+2)

在每个 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>


继续学习
||
<!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> </head> <script> $(function(){ // 1选取父元素下索引值是偶数的子元素的索引值(索引值从1开始的) //找到当前元素的父元素,在找他下面的子元素 $("span.child:nth-child(even)").css("fontSize","30px"); //2选取父元素下,索引值是奇数的元素(索引值从1开始) $("span.child:nth-child(odd)").css("color","red"); //3匹配每个父元素下,索引值为xx的子元素,索引从1开始 $("span.child:nth-child(1)").css("color","blue"); //4匹配每个父元素的第一个子元素 $("span.child:first-child").css("fontSize","50px"); //5匹配每个父元素的第一个子元素 $("span.child:last-child").css("fontSize","50px"); }) </script> <body> <div class="parent"> <span class="child">1</span> <span class="child">2</span> <span class="child">3</span> <span class="child">4</span> <span class="child">5</span> </div> </body> </html>
提交重置代码