<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>13.7jQuery节点的包裹方法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1 wrap():将某个节点用其他标记包裹起来(将所有元素进行单独包装)
$('#btn1').click(function(){
//执行前代码:<p>苹果</p><p>香蕉</p>
//执行.wrap()方法
$('#one p').wrap('<b></b>');
//执行后代码:<b><p>苹果</p></b> <b><p>香蕉</p></b>
});
//2 wrapAll():将所有匹配元素用一个元素来包裹
$('#btn2').click(function(){
//执行前代码:<p>苹果</p><p>香蕉</p>
//执行.wrapAll()方法
$('#two p').wrapAll('<b></b>');
//执行后代码:<b><p>苹果</p><p>香蕉</p></b>
});
//3 wrapInner():将每一个匹配元素的子内容用其他结构化标记包裹起来
$('#btn3').click(function(){
//执行前代码:<p>苹果</p><p>香蕉</p>
//执行.wrapInner()方法
$('#three p').wrapInner('<b></b>');
//执行后代码:<p><b>苹果</b></p><p><b>香蕉</b></p>
});
//unwrap()删除直接的父元素
$('#btn4').click(function(){
$('p').unwrap();
});
});
</script>
<style>
*{
padding:0;
margin:0;
}
div{
width:100px;
height:100px;
border:solid 2px red;
margin:10px;
}
p{
height:30px;
width:80px;
line-height:30px;
padding:5px;
margin:5px;
background-color:#CCC;
text-align:center;
border:1px solid #0F0;
}
</style>
</head>
<body>
<div id="one">
<p>苹果</p>
<p>香蕉</p>
</div>
<div id="two">
<p>苹果</p>
<p>香蕉</p>
</div>
<div id="three">
<p>苹果</p>
<p>香蕉</p>
</div>
<input type="button" id="btn1" value="wrap()"><br>
<input type="button" id="btn2" value="wrapAll()"><br>
<input type="button" id="btn3" value="wrapInner()"><br>
<input type="button" id="btn4" value="unwrap()"><br>
</body>
</html>
效果图
单击三个按钮后
单击最后一个按钮
