1、DOM拷贝clone()
//clone处理一
$("div").clone() //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆
使用克隆的我们需要额外知道的细节：
clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如 $(this).clone().css('color','red') 增加了一个颜色
通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上
clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据
元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个
http://js.jirengu.com/necamexopa/1/
2、DOM替换replaceWith()和replaceAll()
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
通过jQuery筛选出第二个p元素，调用replaceWith进行替换，结果如下
<div>
<p>第一段</p>
<a style="color:red">替换第二段的内容</a>'
<p>第三段</p>
</div>
.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理
$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
http://js.jirengu.com/vavariname/1/
3、DOM包裹wrap()方法
http://js.jirengu.com/didibupija/1/
4、DOM包裹unwrap()方法
http://js.jirengu.com/veloqojama/1/
5、DOM包裹wrapAll()方法
wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法
http://js.jirengu.com/woxevotufe/1/
.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构
简单的看一段代码：
<p>p元素</p>
<p>p元素</p>
给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')
最后的结构，2个P元素都增加了一个父div的结构
<div>
<p>p元素</p>
<p>p元素</p>
</div>
.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
通过回调的方式可以单独处理每一个元素
以上面案例为例，
$('p').wrapAll(function() {
return '<div><div/>';
})
以上的写法的结果如下，等同于warp的处理了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
注意：
.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。
6、DOM包裹wrapInner()方法
<div>p元素</div>
<div>p元素</div>
给所有元素增加一个p包裹
$('div').wrapInner('<p></p>')
最后的结构，匹配的di元素的内部元素被p给包裹了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容
以上面案例为例，
$('div').wrapInner(function() {
return '<p></p>';
})
以上的写法的结果如下，等同于第一种处理了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
网友评论