上次某深夜跟 @乱码 研究怎么快速高效使用jQuery移除页面中元素呢? 起因是因为看到某度的一小代码片段, 如:

$li.off().find('.file-panel').off().end().remove();

都感觉不是很好, 于是果断翻起jQuery的源码, 如下:

// keepData is for internal use only--do not document
remove: function(selector, keepData) { // selector 为选择器, keepData为是否保留数据
 var elem,
 elems = selector ? jQuery.filter(selector, this) : this, //如果有选择器则过滤她
 i = 0;
 for (;
 (elem = elems[i]) != null; i++) { //遍历当前选择器下所有数组
 if (!keepData && elem.nodeType === 1) { //如果不用保留数据 且 必须为元素
 jQuery.cleanData(getAll(elem)); //执行统一清除数据, getAll() 是获取当前元素下所有子元素, 注意的是: 且包含本身
 }
 if (elem.parentNode) { //她有老大才行
 if (keepData && jQuery.contains(elem.ownerDocument, elem)) { //如果要保留数据
 setGlobalEval(getAll(elem, "script")); //把js代码保留下来, 不是很明白, 没有细分析
 }
 elem.parentNode.removeChild(elem); //移除
 }
 }
 return this;
}
empty: function() {
 var elem,
 i = 0;
 for (;
 (elem = this[i]) != null; i++) { //遍历当前选择器下所有数组
 // Remove element nodes and prevent memory leaks
 if (elem.nodeType === 1) { //如果为元素
 jQuery.cleanData(getAll(elem, false)); //清除下面所有子的数据, 要注意的是: 这个getAll 方法, 如果第二个参数为 false 则不返回自己, 也就是说只删除子的数据
 }
 // Remove any remaining nodes
 while (elem.firstChild) {
 elem.removeChild(elem.firstChild);
 }
 // If this is a select, ensure that it displays empty (#12336)
 // Support: IE<9
 if (elem.options && jQuery.nodeName(elem, "select")) {
 elem.options.length = 0;
 }
 }
 return this;
}
detach: function(selector) {
 return this.remove(selector, true);
}

注: 代码片段取自 jQuery-1.10.2, 这里的数据包括 事件缓存, 数据缓存

经看代码你会现如果想要清空/移除某个元素,只需要 $(ele).remove/empty()即可,不用同志off,find什么, 因为cleanData已经解决了问题, 经看 《js框架设计》 里说 ele.innerHTML = ''; 是用 removeChild的20倍, 但使用jQuery的我们不能这么干,(除非你的元素子里面没有任何数据你可以这么干)

而$.fn.html 设置HTML更为复杂, 过程为:各种正则判断是否为正确的HTML结构, 比如 tbody,td啥的, 并试图修正她, 然后清除里面的数据(类似empty), 并写入html, 这个过程是漫长的

总结

1. 如果要删除dom则直接: $(dom).remove(); 所有事件,缓存一率干掉
2. 如果要清空dom并删除数据: $(dom).empty();
3. 如果只是单纯的改变下简单的html, 可以用: $(dom).empty()[0).innerHTML = 'say'; 当然如果你就知道里面没有数据 可以直接 innerHTML, 当然如果是复杂的结构还是建议使用html()
4. 如果要大量操作dom属性,可以这样: var $div = $(dom).remove(); $div.css().attr().data().appendTo(); 事先从dom中删除, 操作大量东东后再插入, 可以相对提高效率
5. 如果只是单纯的删除dom而不删除数据才用 detach

发表于 2014年04月24日 16:26:01 ,添加在分类 前端技术 下 ,并被添加「 jquery 」标签 ,最后修改于 2017年03月29日 21:32:20