深入理解jQuery3.0的domManip函数

domManip这个函数的历史由来已久，从jQuery 1.0版本开始便存在了，一直到最新的jQuery版本。可谓是元老级工具函数。

domManip的主要功能是为了实现数字正射影像图的插入和替换。具体共为以下5个函数服务

•内部后插入（附加)

•内部前插入（前置)

•外部前插入（之前)

•外部后插入（之后)

•替换元素（替换为，1.9.x之前的版本没有使用domMainp)

而一个每个就生成了另外5个函数：追加、前置、插入前、插入后、替换全部

jQuery。每个({ appendto : ' append '，prependTo: 'prepend '，insertBefore: 'before '，insertAfter: 'after '，replaceAll: 'replaceWith'}，函数(名称，原始){ jQuery。fn[name]=function(selector){ var elems，ret=[]，insert=jQuery(selector)，last=insert.length - 1，I=0；for(；i=最后；i ) { elems=i===最后？这个：这个.克隆(真);jQuery(插入[ i ] )[原件](elems)；//仅支持：安卓=4.0,仅支持PhantomJS 1/.get()因为push.apply(_，arraylike)在古代WebKit push.apply(ret，elems.get())上抛出；}返回这个。PushStack(ret)；};} );如图

内部调用如图

源码

append : function(){ return domManip(this，arguments，function(elem){ if(this。nodetype===1 | |这个。nodetype===11 | |这个。nodetype===9){ var target=operation target(this，elem)；目标。appendchild} } );}，prepend : function(){ return domManip(this，arguments，function(elem){ if(this。nodetype===1 | |这个。nodetype===11 | |这个。nodetype====9){ var target=operation target(this，elem)；target.insertBefore(elem，target。第一个孩子)；} } );}，在：之前的function(){ return domManip(this，arguments，function(elem){ if(this。父节点){ this。父节点。在(elem，this)之前插入；} } );}，在： function(){ return domManip(this，arguments，function(elem){ if(this。父节点){ this。父节点。在(elem，this)之前插入。下一个兄弟)；} } );}，替换为：函数(){ var被忽略=[];//进行更改，用新的内容返回domManip(this，arguments，function(elem){ var parent=this。父节点；如果(jQuery.inArray(这个，忽略)0){ jquery。干净的数据(getAll(this))；if(parent){ parent。替换child(elem，this)；} } //strong制回调调用},忽略);}domManip的实现

domManip的主要功能就是添加数字正射影像图元素，因为添加的位置不同而提供了四个公开函数附加、前置、前置、前置、后置，此外还有一个替换为。简单说domManip就做了两件事

1.先完成数字正射影像图节点添加

2.如果添加的数字正射影像图节点内有脚本标签，需要额外处理下。对于可执行的脚本（通过类型属性判断)则执行其内的脚本代码，其它的则不执行。

domManip依赖的一个重要函数就是构建片段，为数字正射影像图插入提高了性能。

domManip内对脚本节点元素做了特殊处理

1 .脚本无类型属性，默认会执行其内的射流研究…脚本

2 .脚本的type='text/javascript '或type='text/ecmascript '，会执行其内的射流研究…脚本

3 .脚本如果有科学研究委员会属性，会执行$._评估请求远程的射流研究…文件并执行

4.其它不会执行射流研究…脚本，有时我们会用脚本来做超文本标记语言模板，如下划线。js，类型="文本/模板"或类型="文本/纯文本"这种，其内的射流研究…都不会被执行

此外dataPriv.access(节点，' globalEval ')，这一句标示了如果该脚本已经执行过，则不会再次执行。或者说执行后会设置一个globalEval: true的标示。

domManip内部依赖构建片段、恢复脚本、禁用脚本、jQuery。_评估、多评估这几个小函数，而restoreScript、jQuery ._评估也仅在domManip用到。

//替换/恢复安全数字正射影像图操作函数禁用脚本(elem)的脚本元素的类型属性{ elem。type=(elem。GetAttribute(' type ')！==null)'/' elem。类型；返回elem}函数还原脚本(elem){ var match=rscripttypemasked。exec(elem。类型)；if(match){ elem。type=match[1]；} else { elem。移除属性(' type ')；}返回elem}jQuery ._ evalUrl=函数(URL){返回jquery。Ajax({ URL : URL，//使其显式化，因为用户可以通过ajaxSetup (#11264)类型： '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有四个参数；1.3.x ~ 1.9.x是3个参数；2.x只有2个参数；3.x有四个参数

3.

1.9.x之前的版本替换为没有使用domMainp

以上所述是小编给大家介绍的jQuery3.0的domManip函数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！