深入理解jQuery3.0的domManip函數(shù)
domManip 這個(gè)函數(shù)的歷史由來(lái)已久,從 jQuery 1.0 版本開(kāi)始便存在了,一直到最新的 jQuery 版本??芍^是元老級(jí)工具函數(shù)。
domManip 的主要功能是為了實(shí)現(xiàn) DOM 的插入和替換。具體共為以下 5 個(gè)函數(shù)服務(wù)
•內(nèi)部后插入(append)
•內(nèi)部前插入(prepend)
•外部前插入(before)
•外部后插入(after)
•替換元素 (replaceWith,1.9.x 之前的版本沒(méi)有使用 domMainp)
而一個(gè) each 就生成了另外 5 個(gè)函數(shù):appendTo、prependTo、insertBefore、insertAfter、replaceAll
jQuery.each( { appendTo: "append", prependTo: "prepend", insertBefore: "before", insertAfter: "after", replaceAll: "replaceWith" }, function( name, original ) { jQuery.fn[ name ] = function( selector ) { var elems, ret = [], insert = jQuery( selector ), last = insert.length - 1, i = 0; for ( ; i <= last; i++ ) { elems = i === last ? this : this.clone( true ); jQuery( insert[ i ] )[ original ]( elems ); // Support: Android <=4.0 only, PhantomJS 1 only // .get() because push.apply(_, arraylike) throws on ancient WebKit push.apply( ret, elems.get() ); } return this.pushStack( ret ); }; } );
如圖
內(nèi)部調(diào)用如圖
源碼
append: function() { return domManip( this, arguments, function( elem ) { if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { var target = manipulationTarget( this, elem ); target.appendChild( elem ); } } ); }, prepend: function() { return domManip( this, arguments, function( elem ) { if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { var target = manipulationTarget( this, elem ); target.insertBefore( elem, target.firstChild ); } } ); }, before: function() { return domManip( this, arguments, function( elem ) { if ( this.parentNode ) { this.parentNode.insertBefore( elem, this ); } } ); }, after: function() { return domManip( this, arguments, function( elem ) { if ( this.parentNode ) { this.parentNode.insertBefore( elem, this.nextSibling ); } } ); }, replaceWith: function() { var ignored = []; // Make the changes, replacing each non-ignored context element with the new content return domManip( this, arguments, function( elem ) { var parent = this.parentNode; if ( jQuery.inArray( this, ignored ) < 0 ) { jQuery.cleanData( getAll( this ) ); if ( parent ) { parent.replaceChild( elem, this ); } } // Force callback invocation }, ignored ); }
domManip 的實(shí)現(xiàn)
domManip 的主要功能就是添加 DOM 元素,因?yàn)樘砑拥奈恢貌煌峁┝怂膫€(gè)公開(kāi)函數(shù) append、prepend、before、after,此外還有一個(gè) replaceWith。簡(jiǎn)單說(shuō) domManip 就做了兩件事
1.先完成 DOM 節(jié)點(diǎn)添加
2.如果添加的 DOM 節(jié)點(diǎn)內(nèi)有 script 標(biāo)簽,需要額外處理下。對(duì)于可執(zhí)行的 script (通過(guò)type屬性判斷)則執(zhí)行其內(nèi)的腳本代碼,其它的則不執(zhí)行。
domManip 依賴(lài)的一個(gè)重要函數(shù)就是 buildFragment,為 DOM 插入提高了性能。
domManip 內(nèi)對(duì) script 節(jié)點(diǎn)元素做了特殊處理
1.script 無(wú) type 屬性,默認(rèn)會(huì)執(zhí)行其內(nèi)的 JS 腳本
2.script 的 type="text/javascript" 或 type="text/ecmascript" ,會(huì)執(zhí)行其內(nèi)的 JS 腳本
3.script 如果有 src 屬性,會(huì)執(zhí)行 $._evalUrl 請(qǐng)求遠(yuǎn)程的 JS 文件并執(zhí)行
4.其它不會(huì)執(zhí)行 JS 腳本,有時(shí)我們會(huì)用 script 來(lái)做 html 模板,如 underscore.js,type="text/template" 或 type="text/plain" 這種,其內(nèi)的 JS 都不會(huì)被執(zhí)行
此外 dataPriv.access( node, "globalEval" ),這一句標(biāo)示了如果該 script 已經(jīng)執(zhí)行過(guò),則不會(huì)再次執(zhí)行?;蛘哒f(shuō)執(zhí)行后會(huì)設(shè)置一個(gè) globalEval: true 的標(biāo)示。
domManip 內(nèi)部依賴(lài) buildFragment、restoreScript、disableScript、jQuery._evalUrl、DOMEval 這幾個(gè)小函數(shù),而 restoreScript、jQuery._evalUrl 也僅在 domManip 用到。
// Replace/restore the type attribute of script elements for safe DOM manipulation function disableScript( elem ) { elem.type = ( elem.getAttribute( "type" ) !== null ) + "/" + elem.type; return elem; } function restoreScript( elem ) { var match = rscriptTypeMasked.exec( elem.type ); if ( match ) { elem.type = match[ 1 ]; } else { elem.removeAttribute( "type" ); } return elem; } jQuery._evalUrl = function( url ) { return jQuery.ajax( { url: url, // Make this explicit, since user can override this through ajaxSetup (#11264) type: "GET", dataType: "script", cache: true, async: false, global: false, "throws": true } ); };
domManip 經(jīng)歷了各個(gè)版本的演變
1.
3.0.x 之前版本的 domManip 函數(shù)是掛在 jQuery 對(duì)象上面的(jQuery.fn.domManip),即通過(guò) $().domManip 方式可以訪問(wèn);3.0.x 后 domManip 是一個(gè)私有函數(shù),外部無(wú)法訪問(wèn)
2.
1.2.x 之前 domManip 有 4 個(gè)參數(shù);1.3.x ~ 1.9.x 是 3 個(gè)參數(shù);2.x 只有 2 個(gè)參數(shù);3.x 有 4 個(gè)參數(shù)
3.
1.9.x 之前的版本 replaceWith 沒(méi)有使用 domMainp
以上所述是小編給大家介紹的jQuery3.0的domManip函數(shù),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery+json實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了如何利用jquery結(jié)合json實(shí)現(xiàn)分頁(yè)效果,感興趣的小伙伴們可以參考一下2016-03-03基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)
一款非常乖巧的人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)效果,在瀏覽器屏幕內(nèi),人物臉龐始終面向鼠標(biāo)轉(zhuǎn)動(dòng),本篇文章給大家介紹基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng),有需要的朋友可以參考下2015-08-08關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧
本篇文章介紹了,關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧。需要的朋友參考下2013-04-04easyUI combobox實(shí)現(xiàn)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了easyUI combobox實(shí)現(xiàn)聯(lián)動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01jquery實(shí)現(xiàn)浮動(dòng)在網(wǎng)頁(yè)右下角的彩票開(kāi)獎(jiǎng)公告窗口代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)浮動(dòng)在網(wǎng)頁(yè)右下角的彩票開(kāi)獎(jiǎng)公告窗口代碼,涉及jquery窗體的彈出及隱藏相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09