Jquery源码分析－－-DOM元素（下）

核心提示： domManip的功能不好形容，从名字的意思来看是指是对dom元素的操作，Jquery源码分析－－-DOM元素（下）(2)，其实我们可以理解为它对args参数中的每个元素都传到callback（elem）的回调函数的参数中去，有点像jquery.each(elems,function(i,

domManip的功能不好形容。从名字的意思来看是指是对dom元素的操作。其实我们可以理解为它对args参数中的每个元素都传到callback（elem）的回调函数的参数中去。有点像jquery.each(elems,function(i,elem){})的函数。它的所有的实质的功能都落到回调函数上。与each不一样的是，callback(elem)的this指向每一个jquery对象中的元素。也就是有二个嵌套的each。一个each是对于jquery对象的操作，遍历每一个元素进行回调操作。第二个each在回调函数中，就是对于每个元素再次遍历args参数的元素。进行回调操作。

对于args参数，可以是string，dom元素，(类)数组等，它采用②处的代码把args转换成dom元素组成的数组（对于有的string转换如td，它会自动加上<table><tr>）。②处的转换过程只执行一次。Table参数是指在对表操作时，会不会把追加<tbody>，这个在③处理。①④的代码是为了防止多次同时运行args中的元素引起的冲突。

⑤⑥⑧可以看出，args的参数中的元素支持script和元素内部的script运行。最后统一运行这些script。

Jquery在这些函数之上提供append prepend before after 4种操作。$(A).append(B)实现把B元素插入到A元素内部的尾部。, $(A).prepend(B)实现把B元素插入到A元素内部的开始位。 $(A).before(B)、实现把B元素插入到A元素前面。$(A).after(B) 现把B元素插入到A元素后面。appendTo　prependTo insertBefore ,insertAfter 正好相反，实现把A插入到B元素的尾部、前部、开头，后面。

// ******************************************************************
　　// 该组方法主要是完成把元素插到什么地方，与Ext的DomHelp的功能相似。
　　// 在一个元素之前，之后，元素的开始，结束位置
　　
　　// 向每个匹配的元素内部追加内容。
　　// 这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似
　　//返回还是当前的jquery对象。
　　append : function() {
　　　 //对于当前对象的每一个元素都append arguments中转化的第一个dom对象。
　　　 return this.domManip(arguments, true, false, function(elem) {
　　　　　 if (this.nodeType == 1)
　　　　　 //http://developer.mozilla.org/en/docs/DOM:element.appendChild
　　　　　　　this.appendChild(elem);
　　　 });
　　},
　　// 向每个匹配的元素内部前置内容。
　　// 这是向所有匹配元素内部的开始处插入内容的最佳方式。
　　prepend : function() {// elem =arguments的转化集合中的dom元素
　　　 return this.domManip(arguments, true, true, function(elem) {
　　if (this.nodeType == 1)// this=jQuery对象的每个元素（对于tr之类会修正)
　　　　　　　　　this.insertBefore(elem, this.firstChild);
　　　　　 });
　　},
　　
　　// 在每个匹配的元素之前插入内容。
　　before : function() {
　　　 return this.domManip(arguments, false, false, function(elem) {
　　　　　　 this.parentNode.insertBefore(elem, this);
// this=jQuery对象的每个元素　});
　　},
　　
　　// 在每个匹配的元素之后插入内容
　　after : function() {
　　　 return this.domManip(arguments, false, true, function(elem) {
　　　　　 this.parentNode.insertBefore(elem, this.nextSibling);
　　　 });
　　},
　　
// ***************************************************************
// 为jQuery对象生成appendTo~replaceAll五个代理函数
// 其功能是把当前的jquery对象的每个元素都插入到每个传入的参数(元素）的一个位置：
// 之前，之后，开始，结束,overwrite
//把所有匹配的元素追加到另一个、指定的元素元素集合中。
//实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而//是把A追加到B中。
jQuery.each( {
　　appendTo : "append",
　　prependTo : "prepend",
　　insertBefore : "before",
　　insertAfter : "after",
　　replaceAll : "replaceWith"
}, function(name, original) {
　　jQuery.fn[name] = function() {
　　　 var args = arguments;// 每个参数和每个元素是对应起来的
　　　 // 对当前jQuery中每个元素都进行的操作
　　　 return this.each(function() {
　　　　　 for (var i = 0, length = args.length;i < length; i++)
　　　　　　　jQuery(args[i])[original](this);// 调用original代理工作 this是元素
　　　　　 });
　　};
});