domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本。可谓是元老级工具函数。
domManip 的主要功能是为了实现 DOM 的插入和替换。具体共为以下 5 个函数服务
•内部后插入(append)
•内部前插入(prepend)
•外部前插入(before)
•外部后插入(after)
•替换元素 (replaceWith,1.9.x 之前的版本没有使用 domMainp)
而一个 each 就生成了另外 5 个函数: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 ); }; } );
如图
内部调用如图
源码
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 的实现
domManip 的主要功能就是添加 DOM 元素,因为添加的位置不同而提供了四个公开函数 append、prepend、before、after,此外还有一个 replaceWith。简单说 domManip 就做了两件事
1.先完成 DOM 节点添加
2.如果添加的 DOM 节点内有 script 标签,需要额外处理下。对于可执行的 script (通过type属性判断)则执行其内的脚本代码,其它的则不执行。
domManip 依赖的一个重要函数就是 buildFragment,为 DOM 插入提高了性能。
domManip 内对 script 节点元素做了特殊处理
1.script 无 type 属性,默认会执行其内的 JS 脚本
2.script 的 type="text/javascript" 或 type="text/ecmascript" ,会执行其内的 JS 脚本
3.script 如果有 src 属性,会执行 $._evalUrl 请求远程的 JS 文件并执行
4.其它不会执行 JS 脚本,有时我们会用 script 来做 html 模板,如 underscore.js,type="text/template" 或 type="text/plain" 这种,其内的 JS 都不会被执行
此外 dataPriv.access( node, "globalEval" ),这一句标示了如果该 script 已经执行过,则不会再次执行。或者说执行后会设置一个 globalEval: true 的标示。
domManip 内部依赖 buildFragment、restoreScript、disableScript、jQuery._evalUrl、DOMEval 这几个小函数,而 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 经历了各个版本的演变
1.
3.0.x 之前版本的 domManip 函数是挂在 jQuery 对象上面的(jQuery.fn.domManip),即通过 $().domManip 方式可以访问;3.0.x 后 domManip 是一个私有函数,外部无法访问
2.
1.2.x 之前 domManip 有 4 个参数;1.3.x ~ 1.9.x 是 3 个参数;2.x 只有 2 个参数;3.x 有 4 个参数
3.
1.9.x 之前的版本 replaceWith 没有使用 domMainp
以上所述是小编给大家介绍的jQuery3.0的domManip函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍深入理解JS addLoadEvent函数,包括了深入理解JS addLoadEvent函数的使用技巧和注意事项,需要的朋友参考一下 首先是addLoadEvent函数的代码清单: 理解起来就是: 1.把现有的window.onload事件处理函数的值存入变量 oldonload; 2.如果在这个处理函数上还没有绑定任何函数,就像平常那样把新函数添加给它; 3.如果在这个处理函数上已
本文向大家介绍深入理解vue Render函数,包括了深入理解vue Render函数的使用技巧和注意事项,需要的朋友参考一下 最近在学习vue,正好今日留个笔记,我自己还在摸索学习中,现整理出来以作记录。 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶 首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态,对实例
让我们深入研究一下箭头函数。 箭头函数不仅仅是编写简洁代码的“捷径”。它还具有非常特殊且有用的特性。 JavaScript 充满了我们需要编写在其他地方执行的小函数的情况。 例如: arr.forEach(func) —— forEach 对每个数组元素都执行 func。 setTimeout(func) —— func 由内建调度器执行。 ……还有更多。 JavaScript 的精髓在于创建一个
本文向大家介绍jQuery3.0中的buildFragment私有函数详解,包括了jQuery3.0中的buildFragment私有函数详解的使用技巧和注意事项,需要的朋友参考一下 时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本。有两个版本 jQuery compat 3.0 和 jQuery 3.0。 jQuery compat 3.0 对应之前的 1.x, 兼容更多的
本文向大家介绍JS回调函数深入理解,包括了JS回调函数深入理解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS回调函数。分享给大家供大家参考,具体如下: 一、前奏 在谈回调函数之前,先看下下面两段代码: 不妨猜测一下代码的结果。 如果你测试了,就会发现: 只写变量名 say 返回的将会是 say方法本身,以字符串的形式表现出来。 而在变量名后加()如say()返回的就会使say方
第 5 章 深入理解函数 目录 1. return语句 2. 增量式开发 3. 递归
本文向大家介绍深入理解setTimeout函数和setInterval函数,包括了深入理解setTimeout函数和setInterval函数的使用技巧和注意事项,需要的朋友参考一下 前几天学了js,看到了两个非常有趣的函数,他们分别是setTimeout函数和setInterval函数,这两个函数能使网页呈现非常一些网页中比较常见的效果,比如说图片轮播,等一些非常好玩的效果。下面就来一起来了解
本文向大家介绍深入理解swift变量和函数,包括了深入理解swift变量和函数的使用技巧和注意事项,需要的朋友参考一下 Swift 函数用来完成特定任务的独立的代码块。 Swift使用一个统一的语法来表示简单的C语言风格的函数到复杂的Objective-C语言风格的方法。 函数声明: 告诉编译器函数的名字,返回类型及参数。 函数定义: 提供了函数的实体。 swift 申明变量 var name =