注意事项：在使用的时候需要特别注意下

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素

2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

.wrap 每个人加个爸爸
之前的：
.append 最后面加个兄弟 (结合appendTo()来记)
.prepend 最前面加个兄弟(prependTo()来记)
.before 我的前面加个兄弟(结合insertBefore来记)
.after我的后面加个兄弟(结合insertAfter()来记)
.detach() 隐身
.remove 自杀
.empty 身体被掏空
.clone 复制 （true全复制 false 浅复制，无事件）
.replaceWith 删除并替换节点（结合.replaceAll()来记）

remove会删除匹配元素的所有内容包括本身（包括绑定的事件，使用的数据等）

DOM节点删除之保留数据的删除操作detach()

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理

detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

来看看jquery官方文档的解释：

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。 $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

参考右边的代码区域，通过 $("p").detach()把所有的P元素删除后，再通过append把删除的p元素放到页面上，通过点击文字，可以证明事件没有丢失

.children() 找儿子
之前的：
.detach() 隐身
.remove 自杀
.empty 身体被掏空
.clone 复制 （true全复制 false 浅复制，无事件）
.replaceWith 删除并替换节点（结合.replaceAll()来记）
.wrap 每个人加个爸爸
.unwrap 爸爸没了
.wrapAll 所有人加个爸爸
.wrapAll（function）每个人加个爸爸
.wrapInner 加个儿子

为什么要去重？
因为如果不去重，当你点击btn1后，再点一次btn1，它会把空内容赋给p，然后再点击btn2是没有内容出现。

$("p").remove(":contains('3')")
$("p").filter(":contains('3')").remove();
$("p:contains('3')").remove();
这三种方式结果是一样的，不过处理方式不一样

这里要注意,.wrapAll(function(){return ""}),通过此方式进行的处理等 同于wrap()方法，是对匹配的每个元素都单独包裹。

wrapAll是对匹配的所有元素作为一个整体 进行最外层的包裹。

querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。

注意： querySelector() 方法只返回匹配指定选择器的第一个元素。如果你要返回所有匹配元素，请使用querySelectorAll() 方法替代。

语法

element.querySelector(CSS 选择器)

参数值

document.addEventListener() 方法用于向文档添加事件句柄。

提示： 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

提示：使用 element.addEventListener() 方法为指定元素添加事件句柄。

参数值

.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别 .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序 .replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用 返回的jQuery对象引用的是被删除的节点，而不是通过replaceWith/replaceAll方法替换的节点

clone浅拷贝 只克隆节点 不克隆事件 clone()

clone深拷贝,可以继续触发事件 克隆节点 克隆事件 clone(true)

remove：移除节点

• 无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据

• 有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点

• 移除的处理与remove一致

• 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

• 例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

empty方法与remove方法的比较

empty方法

• 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

• empty不能删除自己本身这个节点

remove方法

• 该节点与该节点所包含的所有后代节点将同时被删除

• 提供传递一个筛选的表达式，删除指定合集中的元素