jQuery_DOM操作

1.append()与appendTo()

两者反向

2.创建标签

直接写即可，如：
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))；

3.在兄弟节点前后插入

.after()与.before()，insertAfter()与insertBefore()方向不同。

注：insertAfter()与insertBefore()不支持多参数操作。

4.prepend()与prependTo()

append（）是插到最后一个子元素后面，prepend是插到第一个子元素前面。

5.删除子节点.empty（）

可以删除指定元素中所有子元素。会清空内存，无法再次调用相应对象，函数。

如:

<div class="hello"><p>hhh</p></div>

$(".hello").empty();这将删去<p>hhh</p>

6.更加厉害的remove方法

它不仅能将元素自身移除，还可以移除元素内部一切，包括绑定的事件及相关元素的jQuery数据，可以有效防止内存泄漏。

也能实现传入参数，从而过滤删除：

$("p").remove(":contains('hh')")
$("p").filter(":contains('hh')").remove();
$("p:contains('hh')").remove();

7.稍微温和的删除方法，detach

此方法可以保留jQuery对象，事件等。

官方文档的解释：

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

三种删除方法：remove与empty不会保留内存中jQ对象、绑定事件等，detach虽然也能删去节点自身，但会在内存中保存绑定事件等信息。

8.拷贝操作clone()

HTML部分<p>Oh,Trump!</p>JavaScript部分$("p").on('mouseover', function() {//执行操作})//clone 浅拷贝$("p").clone()   //只克隆了结构，事件丢失//clone 深拷贝//通过传入参数true来克隆对应的事件等$("p").clone(true) //结构、事件与数据都克隆

9.替换操作replaceAll()与replaceWith()

功能类似，都是替换，都会删除相关联的绑定事件与数据，但是目标与源相反，而且replaceWith方法返回被替换节点的jQ对象。

$("p:eq(1)").replaceWith('<a style="color:red">hhh</a>')

$('<a style="color:red">hhh</a>').replaceAll("p:eq(1)");

10.包裹方法，为元素增加父元素

wrap方法，为所有匹配元素都加一个父元素

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

.$('p').wrap('<div/>')  都可以，还可以用回调函数传入父元素参数

wrapAll方法，为所有匹配元素加一个共同的父元素。

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

<div>    <p>p元素</p>    <p>p元素</p>  //所有匹配元素会被当为整体</div>

若被匹配元素间有间隔呢？如下：

<p>p元素</p><a>ss</a><p>p元素</p>

那么用wrapAll会将a标签内元素挤出。如下图

但是，若通过回调函数方法，wrapAll也可以实现wrap的每个匹配元素都赋予父元素的功能。

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

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

11.包裹方法，为元素删除父元素

若用remove、detach会删除子元素，当我们只删除父元素时，就用unwrap()

12.wrapInner()   与warp相反，指定子元素

$("div").wrapInner("<p></p>") 这个意思是将div内部元素打包，作为<p></p>的子元素。

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

当然也可以用回调函数实现一样的功能