jQuery wrap&wrapAll&wrapInner方法【蛋白·蛋黄】【创意写法】
欢迎来到泡脚猪肝的个人创意博客空间
这是我第一次使用博客发文,把我个人的创意和想法分享给大家,希望能帮助到大家,也希望大家能多多指教,相互交流学习!
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>
效果截图展示
运行结果如下:
1.初步运行:
2.单击按钮wrap后:
3.刷新并单击按钮wrapAll后:
4.刷新并单击按钮wrapInner后:
######## 一段完美的代码,一个不完美的文章结尾,我会努力学习的撸好我的代码,写好我的文章,向博客的大佬们致敬!