为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery 选择器之eq是什么意思

代码如下,请问各位大神,eq选择器的正确用法,并且如何使用如下代码中用到的三种选择方法获得相同的对象   

    <div class="dh">
                <span>第一页</span>
                <span>第二页</span>
                <span>第三页</span>
                <span>第四页</span>
                <span>第五页</span>
            </div>
            <script type="text/javascript">
                var $btn = $('.dh span');
                var $no3=$('.dh span:eq(3)');
                var $no_3=$('.dh span:nth-child(4)');    
                console.log($btn[2]);
                console.log($no3);
                console.log($no_3);   
</script>


正在回答

代码语言

4 回答

回复 无所畏惧小小小:

首先指出你问题里面的一个错误:$('.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').lenght; i++){
    $('.dh span:eq('+i+')').css("color","red"); //这里使用$('.dh span:eq(3)')的方式来写,必须要使用字符串链接
}

上面的写法很麻烦对吧,要加一堆连接符,那么改成这样

for( var i = 0; i<$('.dh span').lenght; i++){
    $('.dh span).eq(i).css("color","red"); //简单明了
}


0 回复 有任何疑惑可以回复我~
#1

无所畏惧小小小 提问者

非常感谢!
2016-10-27 回复 有任何疑惑可以回复我~
#2

无所畏惧小小小 提问者

理解了,谢谢
2016-10-27 回复 有任何疑惑可以回复我~

$('.dh span:eq(3)')

选择类名为 .dh 的元素的后代元素 中标签名称为 span 元素的 索引值为3 的元素(即:.dh元素的第4个span子元素)

上面的写法等价于:

$('.dh span').eq(3)

写成这样是不是比较好理解?

0 回复 有任何疑惑可以回复我~
#1

无所畏惧小小小 提问者

你说的这样我理解了,谢谢。不过能解释下$('.dh span').eq(3)、$('.dh span').[3]、.dh span:nth-child(4) 的区别?
2016-10-26 回复 有任何疑惑可以回复我~

eq(index):索引到index+1的位置上

0 回复 有任何疑惑可以回复我~
#1

无所畏惧小小小 提问者

谢谢你,问题解决了
2016-10-27 回复 有任何疑惑可以回复我~

如eq(index).css;

索引到index位置上,给特定位置添加样式;

0 回复 有任何疑惑可以回复我~
#1

无所畏惧小小小 提问者

谢谢,问题已经解决
2016-10-27 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

jQuery 选择器之eq是什么意思

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信