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

核心提示： 当我们调用remove的方法时，先执行⑧处对每一个元素都进行①的回调函数的调用 ，Jquery源码分析－－-DOM元素（下）(4)，selector就是筛选当前元素是否可以要进行remove，一般都要的， return this;},// 将每一个匹配的元素的子内容(包括文本节点)用一个H

当我们调用remove的方法时，先执行⑧处对每一个元素都进行①的回调函数的调用 。selector就是筛选当前元素是否可以要进行remove，一般都要的。之后就是找到元素本身及所有的后代元素组合集合。之后对集合中的每一个元素都去掉事件和捆绑的事件。最后通过parentNode.removeChild除去节点。

Empty与remove不同的地方在于empty只是除去所有的后代节点（不包含本身），而remove包含自身。⑥处采用remove方法就是除去所有的子节点。⑦处是确保所有的子节点（后代节点）都给去掉了。

5.3.5 wrap

Jquery的wrap的系列的函数可以说是dom元素操作中较为复杂的方法。它提供,wrapAll,wrapInner,wrap三种方法。

wrapAll是把jquery对象中所有元素都包裹在给定的元素最内部元素中(firstChild)。这个包裹之后的元素在jquery对象第一个元素的位置之前。同时会把所有其它位置的元素都去掉。也就是说wrapAll最好是不要多个元素。因为多个元素就不太像wrapAll。

　　// ***************************************************************
　　// 一组用于元素标签包裹操作的函数
　　
　　// 将所有匹配的元素用单个元素包裹起来
　　// 这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
　　// 这于 '.wrap()' 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。
　　wrapAll : function(html) {
　　　 if (this[0])
　　/*
　　 * html的内容：<p>Hello</p> xxxxxx <p>cruel</p> xxxxxxx <p>World</p>。
　　 * $("p").wrapAll("<div><b></b></div>");它调用wrapAll（）。
* 当前jQuery对象(称为A，$("p"))的集合有三个元素：<p>Hello</p>、
* <p>cruel</p>、<p>World</p>
　　 * 开始：jQuery(html, this[0].ownerDocument)把html生成Dom对象
* (通过调用clean)。
　　 * 第一步:复制生成一个jQuery对象(称为B)。B的集合中有一个元素，其为：
* <div><b></b></div>的元素。
　　 * 第二步：把B所有的元素都插在A[0]元素Dom结构之前，A[0]元素没有变，
* 新的DOm:<div><b></b></div><p>Hello</p>
　　 * 第三步：找到B对象中所有元素的最内面的节点，如<div><b></b></div>。
* <b></b>是B中元素最inner Node;
　　 * 第四步：向所有innerNode内部插入A对象的所有元素,得到
* <div><b><p>Hello</p><p>cruel</p><p>World</p></b></div>
　　 *
　　 * 如果是html是selector的话，那就只能是一个元素了。如果是传入的参数是数组，
* jquery对象，那么可能会有多个元素了。
　　 * 比如 $("p").wrapAll($("td"));那就是在所有td元素的最内部节点插入：
* <p>Hello</p><p>cruel</p><p>World</p>
　　 * If child is a reference to an existing node in the document,
　　 * appendChild moves it from its current position to the new position 。
　　 *
　　 * 对元素进行wrap，最好还是只有this[0].因为如果有多个不同的引用，
* 会导致其它地方的元素的move。
　　　　　　*/　　
　　jQuery(html, this[0].ownerDocument).clone().insertBefore(this[0])
　　　 .map(function() {// 找到当前元素的最下层的子节点，map新构成jquery对象。
　　　　　　　　　　 var elem = this;
　　　　　　　　　　 while (elem.firstChild)
　　　　　　　　　　　　 elem = elem.firstChild;
　　　　　　　　　　 return elem;
　　　　　　　　　}).append(this);// this指是调用wrapAll的jQuery对象。
　　　 return this;
　　},
　　
　　// 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
　　wrapInner : function(html) {
　　　 /*
　　　　* <p>Hello</p><p>cruel</p><p>World</p>
　　　　* $("p").wrapInner("<b></b>");
　　　　* <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
　　　　*/
　　　 return this.each(function() {
// 这里包裹的对象是每个元素的对象的contents()
　　　　　　　　　//每一个元素的所有的子节点，且构建于jquery对象。
　　　　　　　　　jQuery(this).contents().wrapAll(html);
　　　　　　　});
　　},
　　
　　// 对于当前的jquery对象的每个元素都执行wrapAll(html)
　　wrap : function(html) {
　　　 //与inner不同的是当前的节点。
　　　 return this.each(function() {// 这里包裹的对象是每个元素的对象
　　　　　　　　　jQuery(this).wrapAll(html);
　　　　　　　});
　　　 },