前面的话

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

通用形式

$(':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" 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.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.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: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、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: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、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>

最后

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

　　欢迎交流

深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器的更多相关文章

  1. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  2. 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

    × 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...

  3. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  4. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  5. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  6. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  7. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  8. 深入理解javascript作用域系列第三篇——声明提升(hoisting)

    × 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javasc ...

  9. Webpack系列-第三篇流程杂记

    系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 本文章个人理解, 只是为了理清webpack流程, 没有关注内部过多细节 ...

随机推荐

  1. BZOJ‘s Usaco 奶牛题集锦

    1230 线段树 1231 状压DP 1232 最小生成树 1527 贪心 1600 打表找规律 1601 最小生成树 1602 prime 1606 DP 1607 筛法 1609 DP 1610 ...

  2. C语言中函数声明实现的位置

    在学习C语言的时候我遇到了这么个事情,因为之前先学习的C#,在C#编译器中,函数的声明位置不会影响编译的结果,但是在C语言中却发生了错误 先看一段代码: #include <stdio.h> ...

  3. java基础3_循环语句，数组

    java中的循环: Java中提供了3中循环结构:  while  do-while  for ① 循环结构的作用? 可以不断重复执行循环结构中的代码: ② 上面的3个循环结构功能都是一样的,只是结构 ...

  4. 有状态Bean和无状态Bean的定义

    有状态会话bean :每个用户有自己特有的一个实例,在用户的生存期内,bean保持了用户的信息,即“有状态”:一旦用户灭亡(调用结束或实例结束),bean的生命期也告结束.即每个用户最初都会得到一个初 ...

  5. java实现PDF转HTML

    问题场景: 在使用PB嵌入HTML页面时发现调不起查看PDF的插件 解决方法: 将PDF转换为HTML来展示 解决步骤: 1.下载PDF转换工具.exe 下载地址:http://pan.baidu.c ...

  6. Ubuntu安装c++编译器

    打开终端输入sudo apt-get install build-essential 安装gcc和一些库函数.提供C/C++的编译环境 注意编译c++程序要用g++

  7. （翻译）开始iOS 7中自动布局教程(二)

    这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学 ...

  8. C语言中的栈和堆

    原文出处<http://blog.csdn.net/xiayufeng520/article/details/45956305#t0> 栈内存由编译器分配和释放,堆内存由程序分配和释放. ...

  9. 从阿里巴巴IPO联想到创始人和资方关系

    [小九的学堂,致力于以平凡的语言描述不平凡的技术.如要转载,请注明来源:小九的学堂.cnblogs.com/xfuture] 5月7日,阿里巴巴于今日向美国证券交易委员会(SEC)提交了IPO(首次公 ...

  10. Unicode编码解码在线转换工具

    // Unicode编码解码在线转换工具 Unicode 是基于通用字符集(Universal Character Set)的标准来发展,并且同时也以书本的形式(The Unicode Standar ...