代码如下,请问各位大神,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>
回复 无所畏惧小小小:
首先指出你问题里面的一个错误:$('.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"); //简单明了 }
$('.dh span:eq(3)')
选择类名为 .dh 的元素的后代元素 中标签名称为 span 元素的 索引值为3 的元素(即:.dh元素的第4个span子元素)
上面的写法等价于:
$('.dh span').eq(3)
写成这样是不是比较好理解?
eq(index):索引到index+1的位置上
如eq(index).css;
索引到index位置上,给特定位置添加样式;