深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器
前面的话
上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器
通用形式
$(':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选择器系列第三篇——过滤选择器之索引选择器的更多相关文章
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...
- 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器
× 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- 深入理解javascript函数系列第三篇——属性和方法
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...
- 深入理解javascript作用域系列第三篇——声明提升(hoisting)
× 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javasc ...
- Webpack系列-第三篇流程杂记
系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 本文章个人理解, 只是为了理清webpack流程, 没有关注内部过多细节 ...
随机推荐
- 半吊子学习Swift--天气预报程序-获取天气信息
昨天申请的彩云天气Api开发者今天上午已审核通过  饭后运动过后就马不停蹄的来测试接口,接口是采用经纬度的方式来获取天气信息,接口地址如下 https://api.caiyunapp.com/v2/ ...
- 简述TCP连接的建立与释放(三次握手、四次挥手)
在介绍TCP连接的建立与释放之前,先回顾一下相关知识. TCP是面向连接的运输层协议,它提供可靠交付的.全双工的.面向字节流的点对点服务.HTTP协议便是基于TCP协议实现的.(虽然作为应用层协议,H ...
- bzoj2243树链剖分+染色段数
终于做了一道不是一眼出思路的代码题(⊙o⊙) 之前没有接触过这种关于染色段数的题目(其实上课好像讲过),于是百度了一下(现在思维能力好弱) 实际上每一段有用的信息就是总共有几段和两段各是什么颜色,在开 ...
- BZOJ‘s Usaco 奶牛题集锦
1230 线段树 1231 状压DP 1232 最小生成树 1527 贪心 1600 打表找规律 1601 最小生成树 1602 prime 1606 DP 1607 筛法 1609 DP 1610 ...
- android开发中使不同的listview同时联动
在做一个Android程序时,需要在一个屏幕上显示两个不同的listview,开始用< linearlayout>包裹这两个listview在<ScrollView >设置时, ...
- django _meta方法
models.Book._meta.'concrete_model': <class 'books.models.Book'> models.Book._meta.'related_fke ...
- php 迭代器使用
/** * 执行入口 * @author tianyunchong * Time: 4:48 pm * @return null */ public function run() { /** 遍历下所 ...
- pythonchallenge 解谜 Level 2
好吧,赶紧贴一下. #-*- coding:utf-8 -*- #代码版本均为python 3.5.1 #Level 2 import re file = open("Level 2.txt ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- C代码实现数组
直接上代码,没有什么说的 # include <stdio.h> # include <malloc.h> # include <stdlib.h> //用C实现数 ...