亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號