深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器(2/4)

　　nth-child(n)选择器用于选择每个父元素下的第n个子元素(n从1开始)

　　如果要完成同样的上面三个功能，选择器格式分别为：

:nth-child(1){color:red;}
span:nth-child(1){color:blue;}
div span:nth-child(1){color:green;}

　　如果上面的第三个功能要使用javascript实现，则表现如下：

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var firstChild = divs[i].firstElementChild;
        if(firstChild.nodeName == 'SPAN'){
            firstChild.style.color = 'green';
        }
}

参数

　　当然$(':nth-child(index)')选择器作为通用的子元素过滤选择器，可以有多种参数选择

　　【1】$(':nth-child(even)') 选取每个父元素下的索引值为偶数的元素

　　【2】$(':nth-child(odd)') 选取每个父元素下的索引值为奇数的元素

　　【3】$(':nth-child(3n+1)') 选取每个父元素下的索引值为(3n+1)的元素

$(':nth-child(even)')
$(':nth-child(odd)')
$(':nth-child(3n+1)')
还原

    
1
    
2
    
3
    
4
    
5

首尾子元素

　　为了方便，jQuery还定义了第一个子元素和最后一个子元素的获取方式

$(':first-child')

　　$(':first-child')选择器是$(':nth-child(1)')选择器的简写形式，选取每个父元素的第1个子元素

$(':last-child')

　　类似地，$(':last-child')选择器选取每个父元素的最后1个子元素

$('div :first-child')
$('div :last-child')
$('div span:first-child')
$('div span:last-child')
还原

    1.1
    1.2


    2.1
    2.2


    3.1
    3.2

　　首尾子元素选择器分别对应于CSS中的:first-child和:last-child

　　如果要完成同样的功能，选择器格式分别为：