詳解jQuery中的getAll()和cleanData()
前言:
看 jQuery 源碼的一個(gè)痛點(diǎn)就是調(diào)用一個(gè)函數(shù)時(shí),里面會(huì)調(diào)用 N 個(gè)其他函數(shù),然后這 N 個(gè)函數(shù)里面又會(huì)調(diào)用 M 個(gè)其他其他函數(shù)。。
本篇文章主要是對(duì)detach()/empty()/remove()/unwrap()]()
中兩個(gè)函數(shù) getAll和cleanData() 進(jìn)行解析。
一、getAll(context, tag)
作用:
用來(lái)獲取 context 上的 tag 標(biāo)簽,或者是將 context 和 context 里的 tag 標(biāo)簽的元素合并
源碼:
//一般是傳的node,'script' //應(yīng)該是用來(lái)獲取context上的tag標(biāo)簽,或者是將context和context里的tag標(biāo)簽的元素合并 //源碼4893行 function getAll( context, tag ) { // Support: IE <=9 - 11 only // Use typeof to avoid zero-argument method invocation on host objects (#15151) var ret; console.log(context,typeof context.getElementsByTagName,typeof context.querySelectorAll,'context4894') //如果context存在getElementsByTagName的方法的話 if ( typeof context.getElementsByTagName !== "undefined" ) { //tag:script //從context中獲取script標(biāo)簽的節(jié)點(diǎn) ret = context.getElementsByTagName( tag || "*" ) console.log(tag,ret,'ret4897') } //DocumentFragment沒(méi)有g(shù)etElementsByTagName方法,但有querySelectorAll方法 else if ( typeof context.querySelectorAll !== "undefined" ) { ret = context.querySelectorAll( tag || "*" ); } else { ret = []; } console.log(nodeName( context, tag ),'nodeName4909') //nodeName() 判斷兩個(gè)參數(shù)的nodename是否相等 if ( tag === undefined || tag && nodeName( context, tag ) ) { return jQuery.merge( [ context ], ret ); } return ret; }
注意:DocumentFragment 沒(méi)有g(shù)etElementsByTagName方法,但有querySelectorAll方法!
二、$.merge()
作用:
合并兩個(gè)數(shù)組內(nèi)容到第一個(gè)數(shù)組
源碼:
// Support: Android <=4.0 only, PhantomJS 1 only // push.apply(_, arraylike) throws on ancient WebKit //源碼461行 //將second合并到first后面 merge: function( first, second ) { var len = +second.length, j = 0, i = first.length; //依次將second的item添加到first后面 for ( ; j < len; j++ ) { first[ i++ ] = second[ j ]; } //first可能是類數(shù)組,所以需要更新下length屬性 first.length = i; return first; },
需要注意的是最后的 first.length = i
三、cleanData()
作用:
清除元素節(jié)點(diǎn)上的事件和數(shù)據(jù)
源碼:
//清除elems上的數(shù)據(jù)和事件 //源碼6146行 cleanData: function( elems ) { var data, elem, type, //beforeunload/blur/click/focus/focusin/focusout/ //load/mouseenter/mouseleave/pointerenter/pointerleave special = jQuery.event.special, i = 0; for ( ; ( elem = elems[ i ] ) !== undefined; i++ ) { //允許的節(jié)點(diǎn)類型 if ( acceptData( elem ) ) { //當(dāng)有事件綁定到elem后,jQuery會(huì)給elem一個(gè)屬性dataPriv.expando //該屬性上面就綁定了事件和數(shù)據(jù) if ( ( data = elem[ dataPriv.expando ] ) ) { //如果data上有事件的話 if ( data.events ) { //逐個(gè)列舉data上的事件,比如click for ( type in data.events ) { // 如果special中有data.events上的事件 if ( special[ type ] ) { //調(diào)用jQuery.event.remove方法,移除elem上的event類型 jQuery.event.remove( elem, type ); // This is a shortcut to avoid jQuery.event.remove's overhead } //應(yīng)該是自定義的事件 else { //本質(zhì)即elem.removeEventListener(type,handle) jQuery.removeEvent( elem, type, data.handle ); } } } // Support: Chrome <=35 - 45+ // Assign undefined instead of using delete, see Data#remove //最后將元素的dataPriv.expando屬性置為undefined elem[ dataPriv.expando ] = undefined; } //dataUser應(yīng)該是用戶綁定的事件 if ( elem[ dataUser.expando ] ) { // 將元素的dataUser.expando屬性置為undefined // Support: Chrome <=35 - 45+ // Assign undefined instead of using delete, see Data#remove elem[ dataUser.expando ] = undefined; } } } }
解析:
① 依次判斷 elems[i] 是否是元素節(jié)點(diǎn)/文檔節(jié)點(diǎn)/對(duì)象
② 再判斷 elem 的 dataPriv.expando 屬性是否有 events 屬性
③ 當(dāng) events 里有 jQuery.event.special 指定的 事件類型時(shí),
使用jQuery.event.remove(elem,type)移除事件和數(shù)據(jù)
④ 反之,則使用jQuery.removeEvent(elem,type,data.handle)移除事件和數(shù)據(jù)
⑤ 將 elem[dataPriv.expando]置為 undefined
⑥ 將 elem[dataUser.expando]置為 undefined
四、acceptData()
作用:
判斷是否是指定的節(jié)點(diǎn)類型,返回 true/false
源碼:
//判斷是否是指定的節(jié)點(diǎn)類型 //只接受元素節(jié)點(diǎn)1,文檔節(jié)點(diǎn)9,任意對(duì)象 //返回true/false //源碼4178行 var acceptData = function( owner ) { // Accepts only: // - Node // - Node.ELEMENT_NODE // - Node.DOCUMENT_NODE // - Object // - Any return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType ); }
注意:
Object 類型的 nodeType 是 undefined
五、$.removeEvent()
作用:
移除 elem 上的自定義監(jiān)聽(tīng)事件
源碼:
//移除elem上的自定義監(jiān)聽(tīng)事件 //源碼5599行 //jQuery.removeEvent(elem,type,data.handle) jQuery.removeEvent = function( elem, type, handle ) { // This "if" is needed for plain objects if ( elem.removeEventListener ) { elem.removeEventListener( type, handle ); } }
本質(zhì)即調(diào)用原生JS的removeEventListener()方法
總結(jié)
以上所述是小編給大家介紹的jQuery中的getAll()和cleanData(),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
jQuery和HTML對(duì)某個(gè)標(biāo)簽設(shè)置只讀或者禁用屬性的方式
這篇文章主要介紹了jQuery和HTML對(duì)某個(gè)標(biāo)簽設(shè)置只讀或者禁用屬性的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-06-06jQuery實(shí)現(xiàn)仿騰訊迷你首頁(yè)選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊迷你首頁(yè)選項(xiàng)卡效果代碼,可實(shí)現(xiàn)tab切換按鈕的左右滑動(dòng)顯示及點(diǎn)擊切換效果,涉及jQuery基于鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-09-09淺談struts1 & jquery form 文件異步上傳
下面小編就為大家?guī)?lái)一篇淺談struts1 & jquery form 文件異步上傳。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05jQuery中insertAfter()方法用法實(shí)例
這篇文章主要介紹了jQuery中insertAfter()方法用法,實(shí)例分析了insertAfter()方法的功能、定義及匹配的元素插入到另一個(gè)指定的元素集合后面的使用技巧,需要的朋友可以參考下2015-01-01jQuery ajax serialize()方法的使用以及常見(jiàn)問(wèn)題解決
使用ajax時(shí),常常需要拼裝input數(shù)據(jù)為'name=abc&sex=1'這種形式,用JQuery的serialize方法可以輕松的完成這個(gè)工作接下來(lái)介紹jQuery ajax - serialize() 方法定義和用法,感興趣的朋友可以了解下啊,希望本文對(duì)你有所幫助2013-01-01Tab頁(yè)界面,用jQuery及Ajax技術(shù)實(shí)現(xiàn)
從桌面開(kāi)發(fā)的時(shí)代開(kāi)始,Tab頁(yè)就是一個(gè)優(yōu)異的界面布局形式,兼有菜單的樣式和充分復(fù)用有限的界面的優(yōu)點(diǎn)。2009-09-09