写代码，没案例，简直就是耍流氓，为了方便大家学习交流，每个知识点都会配上对应的案例！文章最下边有福利哟....

jQuery节点创建与属性的处理

创建节点：$("<div></div>")

创建为本节点：$("<div>我是文本节点</div>")

创建为属性节点：$("<div id='test' class='aaron'>我是文本节点</div>")

例子：var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

$body.append(div)

DOM内部插入append()与appendTo()

append(content)向每个匹配的元素内部追加内容，这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

appendTo（content） 把所有匹配的元素追加到另一个、指定的元素集合中，实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

DOM外部插入after()与before()

.after(content) 在匹配元素集合中的每个元素后面插入指定内容，作为兄弟节点

.before(content) 在匹配的元素前面插入内容

1、before与after都是用来对相对选中元素外部增加相邻的兄弟节点

2、2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每

个匹配元素的前面或者后面

3、2个方法都支持多个参数传递after(div1,div2,....)

DOM内部插入prepend()与prependTo()

.prepend（） 向每个匹配元素的内部前置内容 和append（）类型

.prependTo（） 把所有匹配的元素前置到另一个指定的元素集合中

四个区别：

append()向每个匹配的元素内部追加内容

prepend()向每个匹配的元素内部前置内容

appendTo()把所有匹配的元素追加到另一个指定元素的集合中

prependTo()把所有匹配的元素前置到另一个指定的元素集合中

DOM外部插入insertAfter()与insertBefore()

insertBefore() 在目标元素前面插入集合中每个匹配的元素（不支持多参数）

insertAfter() 在目标元素后面插入集合中每个匹配的元素（不支持多参数）

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于

before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将

被放在参数里元素的前面

例：$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>')

$('<p style="color:red">测试insertBefore方法增加</p>').insertBefore($(".test1"))

DOM节点删除之empty()

empty()这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本

例：$('.hello').empty() //删除.hello里边的所有内容

DOM节点删除之remove()的有参用法和无参用法

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

例：$('.hello').remove()

$("p").remove(":contains('3')")//找到包含3文本的节点删除

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

detach()让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

例： $("p:first").detach()

DOM拷贝clone()

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

.clone(ture) 表示不仅仅克隆节点，还把附带的数据和事件一并克隆了！

1、clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，

$(this).clone().css('color','red') 表示增加了一个颜色

2、通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上

3、clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据

4、元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个

例： $(".aaron1").on('click', function() {

$(".left").append( $(this).clone().css('color','red') )

})//只克隆节点不克隆事件

DOM替换replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

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

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素 目标和源和replaceWith相反

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

DOM包裹wrap()方法

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构，即增加父元素<p>p元素</p> 增加：$('p').wrap('<div></div>') 变成了<div><p>p元素</p></div>

.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

例:$('p').wrap(function() {

return '<div></div>'; //与第一种类似，只是写法不一样

})

DOM包裹unwrap()方法

unwarp()方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

例：$('p').unwarp(); //删除p的父节点

DOM包裹wrapAll()方法

.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象通过回调的方式可以单独处理每一个元素

例：$('p').wrapAll('<div></div>') 结果：

<div>

<p>p元素</p>

<p>p元素</p>

</div> //给所有的p增加父元素，增加一个，不是每个单独增加父元素

$('p').wrapAll(function() {

return '<div><div/>';

})该方法返回结果是：

<div>

<p>p元素</p>

</div>

<div>

<p>p元素</p>

</div>

什么情况？ 两个例子中的结果为什么不一样呢？小伙伴们自己查查咋回事呢？

注意：.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种

结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

DOM包裹wrapInner()方法

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

例：<div>p元素</div><div>p元素</div> 执行：$('div').wrapInner('<p></p>')变成了：

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

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

.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

例：$('div').wrapInner(function() {

return '<p></p>';

})

学累了吧，来点实惠的？

1+1=？

不要往下看了，下面真的没内容了

.......

.......

哈哈 ，适可而止吧