html中选择器eq,jQuery 选择器之eq是什么意思

GavinZeng

2016-10-27 09:55

已采纳

回复 无所畏惧小小小：

首先指出你问题里面的一个错误：$('.dh span').[3]，这个写法是不对的，没有这种语法

回答：

关于这部分的知识，和CSS选择器的知识是重合的，jQuery在做元素选择上的时候，写法和CSS几乎是一样的，拿jQuery和CSS做对比吧，这样可能容易理解一点。

基于你的代码来做研究：

1. $('.dh span')

这句的意识是：选中 类名为 dh 下的所有后代元素 span，那么我们在写CSS时，要选中这类元素做样式，写法就是：

.dh span { .... }

2. $('.dh span').eq(3)  等价于 $('.dh span:eq(3)')

这个意思已经解释过了，不再赘述，写CSS时，写成：

.dh span:nth-child[4] { ... }

3. .dh span:nth-child(4)

这句的意思是： 选中类名为 dh 下的后代元素 span 集合中的第4个 span 元素，可能你已经看到了，这个写法和第二个CSS选择器的写法是一样的，其实在你的例子中：

$('.dh span:eq(3)') 和 .dh span:nth-child(4)是指向了同一个元素，这两句只是用不同的方式指向了同一个元素而已，理解上是一模一样的。

问题：那么为什么 eq的用了参数3，而nth-child用了参数4呢？

eq使用的是下标值的方式，下标值是从0开始计数的，所以当你要选择第四个元素，就写成3；

nth-child使用的是自然数方式，选择第四个元素，就写成4

最后再扩展一下：$('.dh span').eq(3)  这种写法在课程里面没有出现，那么这么写有什么好处么？

设想一下，给你上面的HTML结构下的span元素依次添加同一个样式(注意这里是一个个的添加样式，不是同时添加)，我们该怎么写？首先考虑的是使用for循环来实现

代码如下：for( var i = 0; i

$('.dh span:eq('+i+')').css("color","red"); //这里使用$('.dh span:eq(3)')的方式来写，必须要使用字符串链接

}

上面的写法很麻烦对吧，要加一堆连接符，那么改成这样for( var i = 0; i

$('.dh span).eq(i).css("color","red"); //简单明了

}