深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器(1/5)

×

目录

前面的话

　　上一篇介绍了过滤选择器中的子元素选择器部分，本文开始介绍极易与之混淆的索引选择器

通用形式

$(':eq(index)')

　　$(':eq(index)')选择器选择索引等于index的元素(index从0开始)，返回单个元素

索引

　　[注意]索引选择器的索引和子元素选择器的索引有明显的不同

　　【1】索引选择器索引从0开始，而子元素选择器索引从1开始

　　【2】索引选择器的索引是指定元素的索引，而子元素选择器的索引是所有子元素的索引

    0
    1
    2
    3

　　如果要选择1元素，若使用子元素选择器，则设置为

//选择父元素为div元素下的第二个子元素，且该子元素是span元素(索引从1开始)$('div span:nth-child(2)').css('color','red');

　　若使用索引选择器，则设置为

//选择父元素为div元素下的最先出现的span元素(索引从0开始)$('div span:eq(0)').css('color','blue');

$('div span:nth-child(2)')
$('div span:eq(0)')

    0
    1
    2
    3

　　在CSS中，与:nth-child(n)选择器相似的选择器是:nth-of-type(n)，:nth-of-type(n)选择器返回索引等于n的元素(索引从1开始)

　　 如果要使用:nth-child(n)选择器选择上述代码中的1元素，则设置为

div span:nth-child(2){color:red;}

　　若使用:nth-of-type(n)选择器，则设置为：

div span:nth-of-type(1){color:blue;}

　　所以CSS选择器:nth-of-type(n)与jQuery中的索引选择器$(':eq(index)')相似，相同的地方是索引是指的指定元素的索引

　　而不同之处有两处

　　【1】CSS选择器:nth-of-type(n)的索引从1开始，而jQuery中的索引选择器$(':eq(index)')的索引从0开始