jQuery.each({
    appendTo: "append",
    prependTo: "prepend",
    insertBefore: "before",
    insertAfter: "after",
    replaceAll: "replaceWith"
  }, function( name, original ) {
    jQuery.fn[ name ] = function( selector ) {
      var elems,
      i = 0,
      ret = [],
      insert = jQuery( selector ),
      last = insert.length - 1;
      for ( ; i <= last; i++ ) {
        elems = i === last "htmlcode">

  append: function() {
      return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
          this.appendChild( elem );
        }
      });
    }


　　根据上面的源码。猜测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是函数做特殊处理；


var first, node, hasScripts,
  scripts, doc, fragment,
  i = 0,
  l = this.length,
  set = this,
  iNoClone = l - 1,
  value = args[0],
  isFunction = jQuery.isFunction( value );


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


//webkit下，我们不能克隆文含有checked的档碎片
if ( isFunction || !( l <= 1 || typeof value !== "string" || jQuery.support.checkClone || !rchecked.test( value ) ) ) {
  return this.each(function( index ) {
    var self = set.eq( index );
    //如果args[0]是函数，则执行函数返回结果替换原来的args[0]
    if ( isFunction ) {
      args[0] = value.call( this, index, table "htmlcode">

fragment = jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, this );
first = fragment.firstChild;
if ( fragment.childNodes.length === 1 ) {
  fragment = first;
}


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


scripts = jQuery.map( getAll( fragment, "script" ), disableScript );
hasScripts = scripts.length;


　　文档碎片插入页面


for ( ; i < l; i++ ) {
  node = fragment;
  if ( i !== iNoClone ) {
    node = jQuery.clone( node, true, true );
    // Keep references to cloned scripts for later restoration
    if ( hasScripts ) {
      jQuery.merge( scripts, getAll( node, "script" ) );
    }
  }
  callback.call(
    table && jQuery.nodeName( this[i], "table" ) "tbody" ) :
    this[i],
    node,
    i
    );
}


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


if ( hasScripts ) {
  doc = scripts[ scripts.length - 1 ].ownerDocument;
  // Reenable scripts
  jQuery.map( scripts, restoreScript );
  //在第一个文档插入使执行可执行脚本
  for ( i = 0; i < hasScripts; i++ ) {
    node = scripts[ i ];
    if ( rscriptType.test( node.type || "" ) &&
      !jQuery._data( node, "globalEval" ) && jQuery.contains( doc, node ) ) {
      if ( node.src ) {
        // Hope ajax is available...
        jQuery.ajax({
          url: node.src,
          type: "GET",
          dataType: "script",
          async: false,
          global: false,
          "throws": true
        });
      } else {
        jQuery.globalEval( ( node.text || node.textContent || node.innerHTML || "" ).replace( rcleanScript, "" ) );
      }
    }
  }
}


b. dom操作拓展
jQuery.fn.text


jQuery.fn.text: function( value ) {
  return jQuery.access( this, function( value ) {
    return value === undefined "htmlcode">

  jQuery.fn.html: function( value ) {
      return jQuery.access( this, function( value ) {...}, null, value, arguments.length );
    }


　　如果没有参数表示是取值


if ( value === undefined ) {
  return elem.nodeType === 1 "" ) :
  undefined;
}


　　否则看是否能用innerHTML添加内容。点击参考兼容问题


//看看我们是否可以走了一条捷径，只需使用的innerHTML
//需要执行的代码script|style|link等不能使用innerHTML
//htmlSerialize:确保link节点能使用innerHTML正确序列化,这就需要在IE浏览器的包装元素
//leadingWhitespace:IE strips使用.innerHTML需要以空白开头
//不是需要额外添加结束标签或外围包装标签的元素
if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
  ( jQuery.support.htmlSerialize || !rnoshimcache.test( value ) ) &&
  ( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
  !wrapMap[ ( rtagName.exec( value ) || ["", ""] )[1].toLowerCase() ] ) {
  value = value.replace( rxhtmlTag, "<$1></$2>" );
  try {
    for (; i < l; i++ ) {
        //移除元素节点和缓存，阻止内存泄漏
        elem = this[i] || {};
        if ( elem.nodeType === 1 ) {
          jQuery.cleanData( getAll( elem, false ) );
          elem.innerHTML = value;
        }
      }
      elem = 0;
    //如果使用innerHTML抛出异常,使用备用方法
  } catch(e) {}
}


　　如果不能使用innerHTML或使用不成功（抛出异常）,则使用备用方法append


//备用方法，使用append添加节点
if ( elem ) {
  this.empty().append( value );
}
　　
jQuery.fn.wrapAll（用单个标签将所有匹配元素包裹起来）
 　　处理步骤：
　　传入参数是函数则将函数结果传入
if ( jQuery.isFunction( html ) ) {
　　return this.each(function(i) {
　　　　jQuery(this).wrapAll( html.call(this, i) );
　　});
}
　　创建包裹层
//获得包裹标签 The elements to wrap the target around
var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
if ( this[0].parentNode ) {
　　wrap.insertBefore( this[0] );
}


　　用包裹裹住当前jQuery对象


wrap.map(function() {
　　var elem = this;
　　while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
　　　　elem = elem.firstChild;
　　}
 　　return elem;
}).append( this );


　　注意：当前jQuery对象匹配的元素最好只有一个，如果有多个的话不推荐使用，这种情况慎用，后面举例可以看到。
　　简单的例子,原DOM为(后面都使用这个例子)


<div id='center' class="center">
  <div id='ss' class="center">
    <input type='submit' id='left' class="left">
  </div>
</div>
<div class="right">我是right</div>
　　$('#center').wrapAll("<p></p>")后，dom变成了
<p>
　　<div id="center" class="center">
　　　　<div id="ss" class="center">
　　　　　　<input type="submit" id="left" class="left">
　　　　</div>
　　</div>
</p>
<div class="right">我是right</div>


　　慎用：如果当前jQuery所匹配的元素不止一个，例如原DOM执行$('div').wrapAll(“<p></p>”)后结果DOM变成


<p>
　　<div id="center" class="center"></div>
　　<div id="ss" class="center">
    <input type="submit" id="left" class="left">
  </div>
　　<div class="right">我是right</div>
</p>


　　看到结果了吧，本来#center是#ss的父节点，结果变成了#ss的兄弟节点。
jQuery.fn.wrapInner（在每个匹配元素的所有子节点外部包裹指定的HTML结构）
　　处理步骤：
　　传入参数是函数则将函数结果传入


if ( jQuery.isFunction( html ) ) {
  return this.each(function(i) {
    jQuery(this).wrapInner( html.call(this, i) );
  });
}


　　遍历jQuery对象数组，获取每个元素包含的内容（所有子节点）contents，然后使用warpAll包裹住contents


return this.each(function() {
  var self = jQuery( this ),
  contents = self.contents();

  if ( contents.length ) {
    contents.wrapAll( html );

  } else {
    self.append( html );
  }
});


　　还是使用上面的例子中的原DOM,执行$('div').wrapInner('<p></p>')后结果DOM变成


<div id="center" class="center">
　　<p>
　　　　<div id="ss" class="center">
　　　　　　<p>
　　　　　　　　<input type="submit" id="left" class="left">
　　　　　　</p>
　　　　</div>
　　</p>
</div>
<div class="right">
　　<p>
　　　　我是right
　　</p>
</div>


jQuery.fn.wrap（在每个匹配元素外部包裹指定的HTML结构）
　　对jQuery的每个元素分别使用wrapAll包裹一下


return this.each(function(i) {
  jQuery( this ).wrapAll( isFunction "htmlcode">

<p>
　　<div id="center" class="center">
　　　　<p>
　　　　　　<div id="ss" class="center">
　　　　　　　　<input type="submit" id="left" class="left">
　　　　　　</div>
　　　　</p>
　　</div>
</p>
<p>
　　<div class="right">我是right</div>
</p>


 jQuery.fn.unwrap（移除每个匹配元素的父元素）
　　使用replaceWith用匹配元素父节点的所有子节点替换匹配元素的父节点。当然了父节点是body/html/document肯定是移除不了的


return this.parent().each(function() {
  if ( !jQuery.nodeName( this, "body" ) ) {
    jQuery( this ).replaceWith( this.childNodes );
  }
}).end();
　　执行$('div').wrap()后结果DOM变成
<div id="ss" class="center">
　　<input type="submit" id="left" class="left">
</div>
<div class="right">我是right</div>

　　
jQuery.fn.remove(从文档中移除匹配的元素)
　　你还可以使用选择器进一步缩小移除的范围，只移除当前匹配元素中符合指定选择器的部分元素。
　　与detach()相比，remove()函数会同时移除与元素关联绑定的附加数据( data()函数 )和事件处理器等(detach()会保留)。


for ( ; (elem = this[i]) != null; i++ ) {
  if ( !selector || jQuery.filter( selector, [ elem ] ).length > 0 ) {
    // detach传入的参数keepData为true，不删除缓存
    if ( !keepData && elem.nodeType === 1 ) {
      //清除缓存
      jQuery.cleanData( getAll( elem ) );
    }
    if ( elem.parentNode ) {
      if ( keepData && jQuery.contains( elem.ownerDocument, elem ) ) {
        setGlobalEval( getAll( elem, "script" ) );
      }
      elem.parentNode.removeChild( elem );
    }
  }
}


　　可以看到其中有一个重要的函数cleanData，该方法是用来清除缓存：遍历每一个节点元素，对每一个节点元素做一下处理：
1.获取当前元素对应的缓存


id = elem[ internalKey ];
data = id && cache[ id ];


2.如果有绑定事件，则遍历解绑事件


if ( data.events ) {
  for ( type in data.events ) {
    if ( special[ type ] ) {
      jQuery.event.remove( elem, type );
    //这是一个快捷方式，以避免jQuery.event.remove的开销
    } else {
      jQuery.removeEvent( elem, type, data.handle );
    }
  }
}


3.如果jQuery.event.remove没有移除cache，则手动移除cache。其中IE需要做一些兼容处理，而且最终会将删除历史保存如core_deletedIds中


//当jQuery.event.remove没有移除cache的时候，移除cache
if ( cache[ id ] ) {
  delete cache[ id ];
  //IE不允许从节点使用delete删除expando特征,
  //也能对文件节点使用removeAttribute函数;
  //我们必须处理所有这些情况下，
  if ( deleteExpando ) {
    delete elem[ internalKey ];
  } else if ( typeof elem.removeAttribute !== core_strundefined ) {
    elem.removeAttribute( internalKey );
  } else {
    elem[ internalKey ] = null;
  }
  core_deletedIds.push( id );
}


jQuery.fn.detach


detach: function( selector ) {
      return this.remove( selector, true );
    },




jQuery.fn.empty（清空每个匹配元素内的所有内容（所有子节点））
　　函数将会移除每个匹配元素的所有子节点(包括文本节点、注释节点等所有类型的节点),会清空相应的缓存数据。


for ( ; (elem = this[i]) != null; i++ ) {
  //防止内存泄漏移除元素节点缓存
  if ( elem.nodeType === 1 ) {
    jQuery.cleanData( getAll( elem, false ) );
  }
  //移除所有子节点
  while ( elem.firstChild ) {
    elem.removeChild( elem.firstChild );
  }
  // IE<9，select节点需要将option置空
  if ( elem.options && jQuery.nodeName( elem, "select" ) ) {
    elem.options.length = 0;
  }
}


                                
                                

                                    jquery,1.9.1,jquery_dom 
                                
华山资源网 Design By www.eoogi.com