欢迎来到泡脚猪肝的个人创意博客空间

这是我第一次使用博客发文，把我个人的创意和想法分享给大家，希望能帮助到大家，也希望大家能多多指教，相互交流学习！

jQuery wrap&wrapAll&wrapInner方法的区别

wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

蛋黄与蛋白的创意

话不多说，直接上代码！！！

<head>
	<meta charset="UTF-8">
	<title>wrap&wrapAll&wrapInner</title>
</head>
<style type="text/css">
	.yolk {
		width: 200px;
		height: 200px;
		background: yellow;
		border: 1px solid black;
		border-radius: 50%;
		text-align: center;
		line-height: 200px;
	}
	
	.protein {
		width: 300px;
		height: 300px;
		background: white;
		border: 1px solid black;
		border-radius: 50%;
		text-align: center;
	}
</style>

<body>
	<button class="wrap">wrap</button>
	<button class="wrapAll">wrapAll</button>
	<button class="wrapInner">wrapInner</button>
	<div class="yolk">
		蛋黄
	</div>
	<div class="protein">
		蛋白
	</div>
</body>

<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		$(".wrap").click(function() {
			$(".yolk").wrap(".protein");
			$(".protein").eq(1).remove();
			$(".yolk").css("margin", "0 auto")
		})
		$(".wrapAll").click(function() {
			$(".yolk").wrapAll(".protein");
			$(".protein").eq(1).remove();
			$(".yolk").css("margin", "0 auto")
		})
		$(".wrapInner").click(function() {
			$(".yolk").wrapInner(".protein");
			$(".protein").eq(1).remove();
			$(".protein").css("margin", "0 auto")
			$(".yolk").css({
				"width": "500px",
				"height": "500px",
			})
		})
	})
</script>