共计 4488 个字符，预计需要花费 12 分钟才能阅读完成。
前言：unwrap() 的解析请看 jQuery 源码解析之 replaceWith()/unwrap()empty() 的解析请看 jQuery 之 text()的实现
一、$().empty()
作用：
清除被选元素的所有子节点和内容，包括事件和数据
注意：该方法不会移除被选元素本身或它的属性。
源码：
// 源码 6231 行
empty: function() {
var elem,
i = 0;
for (; ( elem = this[ i] ) != null; i++ ) {
// 如果是元素节点的话
if (elem.nodeType === 1) {
// Prevent memory leaks
// 清空内容和事件，防止内存泄漏
jQuery.cleanData(getAll( elem, false) );
// Remove any remaining nodes
// 清空节点所有内容
elem.textContent = “”;
}
}
return this;
},
简单实现：
$(“#divTwo”).empty()
// 相当于
function customEmpty() {
let elem,
i = 0,array=[]
//DOM 节点集合，querySelectorAll
// 注意 for 循环的写法
for (; (elem = this[i]) != null; i++) {
// 如果是元素节点的话，清空该节点的所有内容
if (elem.nodeType === 1) {
//jQuery.cleanData(getAll( elem, false) );
elem.textContent = “”;
}
}
// 单个 DOM 节点，querySelector
if(this[i]===undefined){
if (this.nodeType === 1) {
//jQuery.cleanData(getAll( elem, false) );
this.textContent = “”;
}
}
return this;
}
customEmpty.call(divTwo)
二、$().remove()
作用：
移除被选元素自身，包括所有的数据、事件和子节点。
源码：
// 移除被选元素，包括所有的文本和子节点，不会保留移除元素的副本
// 源码 6159 行
remove: function(selector) {
return remove(this, selector);
},
解析：
可以看到，$().remove() 方法实际上调用的是外部的大的 remove() 方法，并且只传了两个参数 this、selector
第三个参数是 keepData，即是否保留被移除元素的事件和数据，没有传参即默认 false，在下面的 detach() 方法也是调用的 remove() 方法，并且第三个参数传了 true
detach: function(selector) {
return remove(this, selector, true);
},
1、remove()：
// 源码 6037 行
//$().remove()调用：selector, undefined, undefined
function remove(elem, selector, keepData) {
console.log(elem,selector,’elem6041′)
var node,
//remove()不带参数的话，nodes= 目标元素
//$(“p”).remove(“#pTwo”) elem=$(“p”) selector=#pTwo
nodes = selector ? jQuery.filter(selector, elem) : elem,
i = 0;
console.log(nodes,’nodes6061′)
for (; ( node = nodes[ i] ) != null; i++ ) {
// 如果 keepData 不为 true，并且 node 为元素节点，则清除数据和事件
if (!keepData && node.nodeType === 1) {
jQuery.cleanData(getAll( node) );
}
// 如果父节点存在，则 removeChild
if (node.parentNode) {
if (keepData && jQuery.contains( node.ownerDocument, node) ) {
setGlobalEval(getAll( node, “script”) );
}
node.parentNode.removeChild(node);
}
}
return elem;
}
解析：
① nodes 是经过处理后得到的要被移除的节点集合② 循环 nodes，依次去除 nodes[i] 的事件和数据③ 找到 nodes[i] 的父节点，并调用原生 JS 的 removeChild() 方法，去掉 nodes[i]
简单实现：
// 无参数 ======
$(“#divTwo”).remove()
// 相当于
// jQuery.cleanData(getAll(divTwo))
divTwo.parentNode.removeChild(divTwo)
当 $().remove() 有参数的话 (比如：$(“p”).remove(“#pTwo”))，就会调用 jQuery.filter(selector, elem) 方法
2、$.filter()：
作用：
返回符合一定条件的元素，比如 $(“p”).remove(“#pTwo”)，就是返回所有 <p> 标签中，id=’pTwo’ 的元素节点的集合，filter() 里面最后还调用了 jQuery.find.matchesSelector()和 jQuery.find.matches() 方法，这两个方法内都会调用 Sizzle()方法，而 Sizzle()内调用了 select() 方法，select() 比较复杂，本文暂不贴码解析。
源码：
// 返回符合一定条件的元素
//$(“p”).remove(“#pTwo”) expr=#pTwo elems=$(“p”)
// 源码 2925 行
jQuery.filter = function(expr, elems, not) {
//jQuery 对象转换成 DOM 对象
var elem = elems[0];
if (not) {
expr = “:not(” + expr + “)”;
}
// 目标元素节点只有一个的情况
if (elems.length === 1 && elem.nodeType === 1) {
return jQuery.find.matchesSelector(elem, expr) ? [elem] : [];
}
//elems 标签 p 的集合
//jQuery.grep，返回符合 callback 函数条件的数组，
// 这里就是过滤掉非元素节点
return jQuery.find.matches(expr, jQuery.grep( elems, function( elem) {
return elem.nodeType === 1;
} ) );
};
3、$.grep()
作用：
返回符合 callback 函数条件的数组
源码：
// 返回符合 callback 函数条件的数组
//elems 标签 p 的集合
//callback elems.nodeType===1
//invert 指定是否反转过滤结果，默认是 false
grep: function(elems, callback, invert) {
var callbackInverse,
matches = [],
i = 0,
length = elems.length, //2
callbackExpect = !invert; //true
// Go through the array, only saving the items
// that pass the validator function
// 只保存符合 callback 函数的条件的 elem（elem.nodeType===1）
for (; i < length; i++) {
//false
callbackInverse = !callback(elems[ i], i );
//false true
if (callbackInverse !== callbackExpect) {
matches.push(elems[ i] );
}
}
return matches;
},
4、有参数的 $().remove()的简单实现：
// 有参数 ======
$(“p”).remove(“#pTwo”)
// 相当于
// jQuery.cleanData(getAll(divTwo))
pTwo.parentNode.removeChild(pTwo)
三、$(). detach()
作用：
移除被选元素自身，但保留所有的数据、事件和子节点
注意：该方法在 不久会将删除的元素插入 DOM 的情况下，很有用
源码：
// 移除被选元素，包括所有的文本和子节点，但会保留移除元素的副本，允许它们在以后被重新插入。
// 注意那个 keepData:true
detach: function(selector) {
return remove(this, selector, true);
},
可以看到，与 $().remove() 的区别就是该方法第三个参数传了 true 给大 remove() 方法，即 keepData
function remove(elem, selector, keepData) {
var node,
//remove()不带参数的话，nodes= 目标元素
//$(“p”).remove(“#pTwo”) elem=$(“p”) selector=#pTwo
nodes = selector ? jQuery.filter(selector, elem) : elem,
i = 0;
for (; ( node = nodes[ i] ) != null; i++ ) {
// 如果 keepData 不为 true，并且 node 为元素节点，则清除数据和事件
if (!keepData && node.nodeType === 1) {
jQuery.cleanData(getAll( node) );
}
// 如果父节点存在，则 removeChild
if (node.parentNode) {
//$.contains: 判断指定元素内是否包含另一个元素。即判断另一个 DOM 元素是否是指定 DOM 元素的后代
if (keepData && jQuery.contains( node.ownerDocument, node) ) {
// 把所有的 script 标签标记为已经执行
setGlobalEval(getAll( node, “script”) )
}
node.parentNode.removeChild(node);
}
}
return elem;
}
可以看到，在 keepData=true 的时候，会不执行 jQuery.cleanData(getAll( node) )方法，并且会执行 setGlobalEval(getAll( node, “script”) )
使用：
// 无参数 ======
// 该方法在 不久会将删除的元素插入 DOM 的情况下，很有用
let removeNodeOne=$(“#divTwo”).detach()
// 有参数 ======
let removeNodeTwo=$(“p”).detach(“#pTwo”)
四、关于 getAll()、jQuery.cleanData() 我们下一篇讲。。（有点累）
（完）
