clone()：复制一个dom节点;
unwrap:将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
wrap:在每个匹配的元素外层包上一个html元素;
wrapall:在所有匹配元素外面包一层HTML结构。
wrapinner:在匹配元素里的内容外包一层结构。
基础篇，不多解释，直接代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: #FF0000;width: 200px;height: 200px;" class="div"><span>这个是要被克隆的对象</span></div>
<div class="parent_div" style="width: 200px;height: 200px;background-color: #FF0000;">
<div class="operation_div wrap_all" style="width: 100px;height: 100px;background-color: #00ff00;">
<div class="children_div" style="width: 50px;height: 50px;background-color: yellow"></div>
</div>
<div class="sibling_div wrap_all" style="width: 100px;height: 100px;background-color: #0000ff;"></div>
</div>
<button class="clone">clone</button>
<button class="unwrap">unwrap</button>
<button class="wrap">wrap</button>
<button class="warpall">wrapall</button>
<button class="wrapInner">wrapInner</button>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
//clone： 创建一个匹配的元素集合的深度拷贝副本
$("body").on("click", ".clone", function() {
var str = $(".div").clone();
console.log(str);
str.find("span").text("这个是被复制出来的元素");
$("body").append(str);
});
//unwrap：将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
$("body").on("click", ".unwrap", function() {
$(".operation_div").unwrap();
});
// wrap:在每个匹配的元素外层包上一个html元素。
$("body").on("click", ".wrap", function() {
$(".wrap_all").wrap("<div style='background-color:red;'></div>");
});
// wrapall:在每个匹配的元素外层包上一个html元素。
$("body").on("click", ".warpall", function() {
$(".wrap_all").wrapAll("<div style='background-color:green;'></div>");
});
// wrapall:在每个匹配的元素外层包上一个html元素。
$("body").on("click", ".wrapInner", function() {
$(".wrap_all").wrapInner("<div style='background-color:blue;'></div>");
});
</script>
</html>需要注意的是后三者的区别，在实现效果中，读者应该可以看出区别，我就不多解释了
1903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
