Jquery中DOM节点的操作

1、删除节点empty和remove的区别

empty()   

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

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

remove() 

该节点与该节点所包含的所有后代节点将同时被删除;包括绑定的事件及与该元素相关的jQuery数据。

可有参数：提供传递一个筛选的表达式，删除指定的元素及事件  $("p").remove(":contains('3')")

detach()

临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面

detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

可有参数：同remove 

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

2、克隆节点clone()

如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

详情：https://www.imooc.com/code/10379

3、替换节点replaceWith()

简单来说：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点A

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

返回值：.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是替换后的节点

4、包裹节点  wrap()

将元素用其他元素包裹起来，也就是给它增加一个父元素

<p>p元素</p>

$('p').wrap('<div></div>')

<div>
    <p>p元素</p>
</div>

也可以接受回调函数，拼接字符串或对象

$('a').wrap(function() {
            return '<div class="' + $(this).text() + '" />';
        })、

5、删除父级节点  unwrap()

与wrap()作用相反

6、包裹节点  wrapAll()

无参数时：把匹配的元素作为一个整体，在外边包裹一层

<p>p元素</p>
<p>p元素</p>

$('p').wrapAll('<div></div>')

处理为：

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

加上参数（回调函数）：通过回调的方式可以单独处理每一个元素

$('p').wrapAll(function() {
    return '<div><div/>'; 
})

处理为：
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

7、包裹节点·wrapInner()

给匹配的元素的内部，增加包裹的HTML结构

<div>p元素</div>
<div>p元素</div>

$('div').wrapInner('<p></p>')

处理为：

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

可添加回调函数，效果一样

$('div').wrapInner(function() {
    return '<p></p>'; 
})