Jquery-1.9.1源码分析系列（十一）之DOM操作(jquery源码分析笔记)

编辑：rootadmin

推荐整理分享Jquery-1.9.1源码分析系列（十一）之DOM操作(jquery源码分析笔记)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery原理解析,jquery源码分析,jquery.min.js源代码,jquery源码是什么水平,jquery源码是什么水平,jquery.min.js源代码,jquery源码是什么水平,jquery源码实现原理,内容如对您有帮助，希望把文章链接给更多的朋友！

DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。

　　DOM操作函数中后五种方法使用的依然是前面五种方法，源码

　　浏览器原生的插入节点的方法有两个：appendChild和inserBefore，jQuery利用这两个方法拓展了如下方法

　　jQuery.fn.append使用this.appendChild( elem )

　　jQuery.fn.prepend使用this.insertBefore( elem, this.firstChild )

　　jQuery.fn.before使用this.parentNode.insertBefore( elem, this );

　　jQuery.fn.after使用this.parentNode.insertBefore( elem, this.nextSibling );

　　jQuery.fn.replaceWith 使用this.parentNode.insertBefore( elem, this.nextSibling);

　　看一个例子的源码(jQuery.fn.append)

　　根据上面的源码。猜测domManip的作用是遍历当前jQuery对象所匹配的元素，然后每个元素调用传入的回调，并将要插入的节点（如果是字符串那么需要创建文档碎片节点）作为传入的回调的参数；并执行传入的回调。

　　接下来分析domManip,看猜测是否正确。dom即Dom元素，Manip是Manipulate的缩写，连在一起的字面意思就是就是Dom操作。

a. domManip: function( args, table, callback )解析

　　args 待插入的DOM元素或HTML代码

　　table 是否需要修正tbody，这个变量是优化的结果

　　callback 回调函数，执行格式为callback.call( 目标元素即上下文, 待插入文档碎片/单个DOM元素 )

　　先看流程，再看细节

　　第一步，变量初始化。其中iNoClone在后面会用到，如果当前的jQuery对象所匹配的元素不止一个（n > 1）的话，意味着构建出来的文档碎片需要被n用到，则需要被克隆（n-1）次，加上碎片文档本身才够n次使用；value 是第一个参数args的第一个元素，后面会对value是函数做特殊处理；

　　第二步，处理特殊下要将当前jQuery对象所匹配的元素一一调用domManip。这种特殊情况有两种：第一种，如果传入的节点是函数（即value是函数）则需要当前jQuery对象所匹配的每个元素都将函数计算出的值作为节点代入domManip中处理。第二种，webkit下，我们不能克隆文含有checked的文档碎片；克隆的文档不能重复使用，那么只能是当前jQuery对象所匹配的每个元素都调用一次domManip处理。

　　第三步，处理正常情况，使用传入的节点构建文档碎片，并插入文档中。这里面构建的文档碎片就需要重复使用，区别于第二步的处理。这里面需要注意的是如果是script节点需要在加载完成后执行。顺着源码顺序看一下过程

　　构建文档碎片

　　分离出其中的script，这其中有一个函数disableScript更改了script标签的type值以确保安全，原来的type值是"text/javascript"，改成了"true/text/javascript"或"false/text/javascript"

　　文档碎片插入页面

　　执行script，分两种情况，远程的使用ajax来处理，本地的直接执行。

b. dom操作拓展

jQuery.fn.text

　　最终执行value === undefined &#; jQuery.text( this ) : this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );

　　其中jQuery.text = Sizzle.getText;

jQuery.fn.html