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>
2016-10-27
回復 無所畏懼小小小:
首先指出你問題里面的一個錯誤:$('.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循環來實現
代碼如下:
上面的寫法很麻煩對吧,要加一堆連接符,那么改成這樣
2016-10-24
$('.dh span:eq(3)')
選擇類名為 .dh 的元素的后代元素 中標簽名稱為 span 元素的 索引值為3 的元素(即:.dh元素的第4個span子元素)
上面的寫法等價于:
$('.dh span').eq(3)
寫成這樣是不是比較好理解?
2016-10-22
eq(index):索引到index+1的位置上
2016-10-22
如eq(index).css;
索引到index位置上,給特定位置添加樣式;