jquery索引选择器

$(‘:eq(index)’)

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

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

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

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

<div>
    <i>0i>
    <span>1span>
    <i>2i>
    <span>3span>
div>

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

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

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

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

<button id='btn1'>$('div span:nth-child(2)')button>
<button id='btn2'>$('div span:eq(0)')button>
<div>
    <i>0i>
    <span>1span>
    <i>2i>
    <span>3span>
div>
<script>
btn1.onclick = function(){
    $('div span:nth-child(2)').css('color','red');
}
btn2.onclick = function(){
    $('div span:eq(0)').css('color','blue');
}
script>

如果要使用: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中的索引选择器 ( ‘ : e q ( i n d e x ) ′ ) 相 似 ， 相 同 的 地 方 是 索 引 是 指 的 指 定 元 素 的 索 引 而 不 同 之 处 有 两 处 1 ) C S S 选 择 器 : n t h − o f − t y p e ( n ) 的 索 引 从 1 开 始 ， 而 j Q u e r y 中 的 索 引 选 择 器 (‘:eq(index)’)的索引从0开始 2)CSS选择器:nth-of-type(n)返回多个元素，而jQuery中的索引选择器$(‘:eq(index)’)返回的是单个元素

$(':eq(0)') //选择第一个索引等于0的元素

$('span:eq(0)') //选择第一个索引等于0的span元素

$('div span:eq(0)') //选择第一个div元素为父元素下索引等于0的span元素

<button id="btn1" style="color: red;">$(':eq(0)')button>
<button id="btn2" style="color: blue;">$('span:eq(0)')button>
<button id="btn3" style="color: green;">$('div span:eq(0)')button>
<button id="reset">还原button>
<p id="t1">
    <i>1.0i>
    <span>1.1span>
p>
<p  id="t2">
    <span>2.0span>
    <i>2.1i>
p>
<div id="t3">
    <i>3.0i>
    <span>3.1span>
div>
<script>
reset.onclick = function(){history.go();}
//选择第一个索引等于0的元素，结果为。由于字体颜色可以继承，所以所有的子元素的字体颜色都是红色
btn1.onclick = function(){$(':eq(0)').css('color','red');}

//选择第一个索引等于0的span元素，结果为1.1
btn2.onclick = function(){$('span:eq(0)').css('color','blue');}

//选择第一个div元素为父元素下索引等于0的span元素，结果是3.1
btn3.onclick = function(){$('div span:eq(0)').css('color','green');}
script>

首尾索引元素选择器

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

$(‘:first’)

$(‘:first’)选择器选择最先出现的第1个索引元素，返回单个元素　

$(‘:last’)

$(‘:last’)选择器选择最后出现的最后1个索引元素，返回单个元素

<button id="btn1" style="color: red;">$('div :first')button>
<button id="btn2" style="color: blue;">$('div :last')button>
<button id="btn3" style="color: green;">$('div span:first')button>
<button id="btn4" style="color: pink;">$('div span:last')button>
<button id="reset">还原button>
<div id="t1">
    <i>1.1i>
    <span>1.2span>
div>
<p  id="t2">
    <span>2.1span>
    <i>2.2i>
p>
<div id="t3">
    <span>3.1span>
    <i>3.2i>
div>
<script src="jquery-3.1.0.js">script>
<script>
reset.onclick = function(){history.go();}
//匹配最先出现的父元素为div元素的第1个索引元素，结果是1.1
btn1.onclick = function(){$('div :first').css('color','red');}

//匹配最后出现的父元素为div元素的最后1个索引元素，结果是3.2
btn2.onclick = function(){$('div :last').css('color','blue');}

//匹配最先出现的父元素为div元素的第1个span索引元素，结果是1.2
btn3.onclick = function(){$('div span:first').css('color','green');}

//匹配最后出现的父元素为div元素的最后1个span索引元素，结果是3.1
btn4.onclick = function(){$('div span:last').css('color','pink');}
script>

首尾索引选择器并不对应于CSS中的:first-of-type和:last-of-type。因为首尾索引选择器只选择单个元素，而CSS选择器会选择多个元素

如果要使用javascript实现类似$(‘div span:last’).css(‘color’,’pink’)的功能

var divs = document.getElementsByTagName('div');
for(var i = divs.length-1; i>-1;i--){
    var spans = divs[i].getElementsByTagName('span');
    if(spans){
        spans[spans.length-1].style.color = 'pink';
        break;
    }    
}

奇偶索引元素选择器

　　除了前面介绍的:eq(index)、:first和:last之外，其他的索引元素选择器返回的都是集合元素。接下来介绍奇偶索引元素选择器

:even
:even选取索引是偶数的所有元素，返回集合元素
:odd
:odd选取索引是奇数的所有元素，返回集合元素

<button id="btn1" style="color: red;">$('div :even')button>
<button id="btn2" style="color: blue;">$('div :odd')button>
<button id="btn3" style="color: green;">$('div span:even')button>
<button id="btn4" style="color: pink;">$('div span:odd')button>
<button id="reset">还原button>
<div>
    <span>0:span0span>
    <span>1:span1span>
    <span>2:span2span>
    <i>3:i0i>
    <i>4:i1i>
    <i>5:i2i>
    <span>6:span3span>
    <span>7:span4span>
div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素为div元素的索引为偶数的元素，结果序号是0、2、4、6
btn1.onclick = function(){$('div :even').css('color','red');}

//匹配父元素为div元素的索引为奇数的元素，结果序号是1、3、5
btn2.onclick = function(){$('div :odd').css('color','blue');}

//匹配父元素为div元素的span元素索引为偶数的元素，结果序号是0、2、7
btn3.onclick = function(){$('div span:even').css('color','green');}

//匹配父元素为div元素的span元素索引为奇数的元素，结果序号是1、6
btn4.onclick = function(){$('div span:odd').css('color','pink');}
script>

子元素过滤选择器中也存在类似的奇偶选择器，分别是:nth-child(even)和:nth-child(odd)。由于它们的索引开始不同，索引表示也不同，所以类似的表示，结果却不同

<button id="btn1" style="color: red;">$('div :nth-child(even)')button>
<button id="btn2" style="color: blue;">$('div :nth-child(odd)')button>
<button id="btn3" style="color: green;">$('div span:nth-child(even)')button>
<button id="btn4" style="color: pink;">$('div span:nth-child(odd)')button>
<button id="reset">还原button>
<div>
    <span>0:span0span>
    <span>1:span1span>
    <span>2:span2span>
    <i>3:i0i>
    <i>4:i1i>
    <i>5:i2i>
    <span>6:span3span>
    <span>7:span4span>
div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素为div元素的索引为偶数的元素，因为索引是从1开始的，结果序号是1、3、5、7(对应的索引是2、4、6、8)
btn1.onclick = function(){$('div :nth-child(even)').css('color','red');}

//匹配父元素为div元素的索引为奇数的元素，因为索引是从1开始的，结果序号是0、2、4、6(对应的索引是1、3、5、7)
btn2.onclick = function(){$('div :nth-child(odd)').css('color','blue');}

//匹配父元素为div元素的索引为偶数的元素，且该元素是span元素，结果序号是1、5(对应的索引是2、6)
btn3.onclick = function(){$('div span:nth-child(even)').css('color','green');}

//匹配父元素为div元素的索引为奇数的元素，且该元素是span元素，结果序号是0、2、6(对应的索引是1、3、7)
btn4.onclick = function(){$('div span:nth-child(odd)').css('color','pink');}
script>

范围索引元素选择器

:lt(index)
:lt(index)选择器选取索引小于index的元素，返回集合元素
:gt(index)
:gt(index)选择器选取索引大于index的元素，返回集合元素

<button id="btn1" style="color: red;">$('div :lt(4)')button>
<button id="btn2" style="color: blue;">$('div span:lt(4)')button>
<button id="btn3" style="color: green;">$('div gt(3)')button>
<button id="btn4" style="color: pink;">$('div span:gt(3)')button>
<button id="reset">还原button>
<div>
    <span>0:span0span>
    <span>1:span1span>
    <span>2:span2span>
    <i>3:i0i>
    <i>4:i1i>
    <i>5:i2i>
    <span>6:span3span>
    <span>7:span4span>
div>
<script>
reset.onclick = function(){history.go();}
//匹配父元素为div元素的索引小于4的元素，结果序号是0、1、2、3
btn1.onclick = function(){$('div :lt(4)').css('color','red');}

//匹配父元素为div元素的span元素的索引小于4的元素，结果序号是0、1、2、6
btn2.onclick = function(){$('div span:lt(4)').css('color','blue');}

//匹配父元素为div元素的索引大于1的元素，结果序号是2、3、4、5、6、7
btn3.onclick = function(){$('div :gt(1)').css('color','green');}

//匹配父元素为div元素的span元素的索引大于1的元素，结果序号是2、6、7
btn4.onclick = function(){$('div span:gt(1)').css('color','pink');}
script>