Jquery里面三个文档操作方法比较-empty(),detach()和remove

     Jquery里面有三种常用的文档操作方法去控制一个标签内容在DOM里面消失，分别是empty（），detach（）和remove（）。对于每个方法运用后的表面效果是一样的，但是实际上的每个方法对DOM操作以后产生的影响各不相同。下面小编结合实例对三个方法一一说明。为了配合说明，下面是整个操作对象-DOM文件

一、empty(),detach()和remove()用法介绍

1、empty()      

     empty()是一种删除标签内容方式，但是保留标签，w3School上面的解释如下：

定义和用法

empty() 方法从被选元素移除所有内容，包括所有文本和子节点。

语法

$(selector).empty()

2、detach（）

detach（）方法，不仅删除标签的内容，也删除了DOM中标签本身，但是其绑定的事件，数据等仍然保留在DOM中，你可以在删除其内容后继续进行对象操作。

定义和用法

detach() 方法移除被选元素，包括所有文本和子节点。

这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。

detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

语法

$(selector).detach()

3、remove()

remove()方法，不仅删除标签的内容，也删除了DOM中标签本身，同样其绑定的事件，数据等都被删除。

定义和用法

remove() 方法移除被选元素，包括所有文本和子节点。

该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

语法

$(selector).remove()

二、实例比较

1、删除效果比较

（1）empty():

点击按钮之后效果自然不用说了，h2被移动到在第一个p（内容已被删除，所以h2上面没有内容）和第二个p之后

（2）detach()和remove()对于删除效果是一样的：

点击按钮后，效果就是将h2只移动到第二个P（this....）后面，第一个p已经完全不存在DOM中了。

2、remove()和detach()对其绑定的事件和数据影响的比较

对h2标签添加字体变大效果，观察其被移出后，事件是否还被绑定

（1）remove()

明显在h2上单击仍然可以实现放大字体的效果。下面看remove()方法的效果：

单击h2以后并不能实现字体放大效果