你的位置:首页 > Java教程

[Java教程]深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

×
目录
[1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引

前面的话

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

 

通用形式

$(':eq(index)')

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

索引

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

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

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

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

  如果要选择<span>1<span>元素,若使用子元素选择器,则设置为

//选择父元素为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>0</i>  <span>1</span>  <i>2</i>  <span>3</span></div><script>btn1.onclick = function(){  $('div span:nth-child(2)').css('color','red');}btn2.onclick = function(){  $('div span:eq(0)').css('color','blue');}</script>

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

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

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开始

  【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" >$(':eq(0)')</button><button id="btn2" >$('span:eq(0)')</button><button id="btn3" >$('div span:eq(0)')</button><button id="reset">还原</button><p id="t1">  <i>1.0</i>  <span>1.1</span></p><p id="t2">  <span>2.0</span>  <i>2.1</i></p><div id="t3">  <i>3.0</i>  <span>3.1</span></div><script>reset.onclick = function(){history.go();}//选择第一个索引等于0的元素,结果为<html>。由于字体颜色可以继承,所以所有的子元素的字体颜色都是红色btn1.onclick = function(){$(':eq(0)').css('color','red');}//选择第一个索引等于0的span元素,结果为<span>1.1</span>btn2.onclick = function(){$('span:eq(0)').css('color','blue');}//选择第一个div元素为父元素下索引等于0的span元素,结果是<span>3.1</span>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.1</i>  <span>1.2</span></div><p id="t2">  <span>2.1</span>  <i>2.2</i></p><div id="t3">  <span>3.1</span>  <i>3.2</i></div><script src="jquery-3.1.0.js"></script><script>reset.onclick = function(){history.go();}//匹配最先出现的父元素为div元素的第1个索引元素,结果是1.1btn1.onclick = function(){$('div :first').css('color','red');}//匹配最后出现的父元素为div元素的最后1个索引元素,结果是3.2btn2.onclick = function(){$('div :last').css('color','blue');}//匹配最先出现的父元素为div元素的第1个span索引元素,结果是1.2btn3.onclick = function(){$('div span:first').css('color','green');}//匹配最后出现的父元素为div元素的最后1个span索引元素,结果是3.1btn4.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" >$('div :even')</button><button id="btn2" >$('div :odd')</button><button id="btn3" >$('div span:even')</button><button id="btn4" >$('div span:odd')</button><button id="reset">还原</button><div>  <span>0:span0</span>  <span>1:span1</span>  <span>2:span2</span>  <i>3:i0</i>  <i>4:i1</i>  <i>5:i2</i>  <span>6:span3</span>  <span>7:span4</span></div><script>reset.onclick = function(){history.go();}//匹配父元素为div元素的索引为偶数的元素,结果序号是0、2、4、6btn1.onclick = function(){$('div :even').css('color','red');}//匹配父元素为div元素的索引为奇数的元素,结果序号是1、3、5btn2.onclick = function(){$('div :odd').css('color','blue');}//匹配父元素为div元素的span元素索引为偶数的元素,结果序号是0、2、7btn3.onclick = function(){$('div span:even').css('color','green');}//匹配父元素为div元素的span元素索引为奇数的元素,结果序号是1、6btn4.onclick = function(){$('div span:odd').css('color','pink');}</script>

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

<button id="btn1" >$('div :nth-child(even)')</button><button id="btn2" >$('div :nth-child(odd)')</button><button id="btn3" >$('div span:nth-child(even)')</button><button id="btn4" >$('div span:nth-child(odd)')</button><button id="reset">还原</button><div>  <span>0:span0</span>  <span>1:span1</span>  <span>2:span2</span>  <i>3:i0</i>  <i>4:i1</i>  <i>5:i2</i>  <span>6:span3</span>  <span>7:span4</span></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:span0</span>  <span>1:span1</span>  <span>2:span2</span>  <i>3:i0</i>  <i>4:i1</i>  <i>5:i2</i>  <span>6:span3</span>  <span>7:span4</span></div><script>reset.onclick = function(){history.go();}//匹配父元素为div元素的索引小于4的元素,结果序号是0、1、2、3btn1.onclick = function(){$('div :lt(4)').css('color','red');}//匹配父元素为div元素的span元素的索引小于4的元素,结果序号是0、1、2、6btn2.onclick = function(){$('div span:lt(4)').css('color','blue');}//匹配父元素为div元素的索引大于1的元素,结果序号是2、3、4、5、6、7btn3.onclick = function(){$('div :gt(1)').css('color','green');}//匹配父元素为div元素的span元素的索引大于1的元素,结果序号是2、6、7btn4.onclick = function(){$('div span:gt(1)').css('color','pink');}</script>

 

最后

  索引选择器借鉴于CSS的nth-of-type()选择器,但又有变化和拓展之处。变化表现在索引选择器的索引是指的特定元素的索引顺序,且从0开始。拓展表现在新增了范围索引选择器。还有一点值得注意的是:first、:last和:eq()返回的是单个元素,而其他索引选择器返回的是集合元素

  欢迎交流