jquery：简单的dom操作1

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>

需要注意的是后三者的区别，在实现效果中，读者应该可以看出区别，我就不多解释了

jquery：简单的dom操作1

猜你喜欢