深入理解$.each和$(selector).each
來源:易賢網(wǎng) 閱讀:1118 次 日期:2016-06-30 14:45:40
溫馨提示:易賢網(wǎng)小編為您整理了“深入理解$.each和$(selector).each”,方便廣大網(wǎng)友查閱!

下面小編就為大家?guī)硪黄钊肜斫?.each和$(selector).each。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。

$.each:該方法用于遍歷任何集合,包括數(shù)組和對(duì)象

$(selector).each:該方法用于遍歷Jquery對(duì)象

語法:$.each(obj,callback,args)

①遍歷數(shù)組

var arry = ["a","b","c","d",…];

$.each(arry,function(index,value){…})

回調(diào)函數(shù)中:index 代表數(shù)組的索引 ,value 代表數(shù)組中的值

②遍歷Json對(duì)象

var json = {key1:value1, key2:value2, key3:value3}

$.each(json, function(key,value){…})

回調(diào)函數(shù)中:key 代表json對(duì)象中的key, value 代表json對(duì)象中的value

③遍歷Jquery對(duì)象

var doms = $("div");//Jquery對(duì)象本身是一個(gè)集合,通過索引的方式可以將Jquery對(duì)象轉(zhuǎn)換為Dom對(duì)象

$.each(doms, function(index,value){..})

回調(diào)函數(shù)中:index 代表Jquery對(duì)象中的索引, value 代表Jquery對(duì)象中的dom對(duì)象,也可以通過this得到同樣的dom對(duì)象

對(duì)于③還有另外一種寫法就是 $("div").each(function(index,value){…})

對(duì)于$.each方法可以通過在回調(diào)函數(shù)中return false退出循環(huán),如果return true 則相當(dāng)于for循環(huán)中的continue

疑問:為什么$().each回調(diào)函數(shù)中的this不是Jquery對(duì)象 而是Dom對(duì)象

由于$().each方法的本質(zhì)是通過調(diào)用$.each實(shí)現(xiàn)的,通過分析$.each源碼可知,我們可以看到callback.apply(object[i++],args)這段代碼

對(duì)于$().each傳進(jìn)去的object正是Jquery對(duì)象,而object[i++]將Jquery對(duì)象轉(zhuǎn)換為dom對(duì)象,再根據(jù)apply方法劫持對(duì)象的特性,那么回調(diào)函數(shù)中的this就被改變成了dom對(duì)象

我們經(jīng)常在Jquery插件中看到這種寫法,通過上面的分析,我想就應(yīng)該懂了

$.fn.test = function(option){

return this.each(function(){//這個(gè)this是Jquery對(duì)象

alert(this);//而這個(gè)this卻是Dom對(duì)象

})

}

以上這篇深入理解$.each和$(selector).each就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:深入理解$.each和$(selector).each
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn)

版權(quán)所有:易賢網(wǎng)