1. wrap()方法
1.1. wrap(wrapper)方法把每一个匹配元素分别放置在html元素中(一个匹配元素对应一个html父元素)。
1.2. 语法
$(selector).wrap(wrapper)
1.3. 参数
1.4. 使用函数来包裹元素
1.4.1. wrap(function(index, origHtml))方法使用函数把所有匹配元素中指定下标的元素放置在html元素中。
1.4.2. 语法
$(selector).wrap(function(index, origHtml))
1.4.3. 参数
1.5. wrap()方法使用已有的元素包裹匹配元素, 会复制已有元素副本来包裹匹配元素, 已有元素不动。
2. unwrap()方法
2.1. unwrap()方法删除每一个匹配元素的父元素。
2.2. 语法
$(selector).unwrap()
2.3. 例子
2.3.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>wrap包裹元素和unwrap每一个匹配元素的父元素</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$('p').wrap('<div style="background-color: red; width: 600px; height: 120px;"></div>');
});
$('#btn2').click(function(){
$('p').unwrap();
});
$('#btn3').click(function(){
$('p').wrap(function(index, origHtml){
return $('h2');
});
});
});
</script>
<style type="text/css">
p {
background-color: pink;
padding-left: 50px;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h2 style="background-color: green; width: 600px; height: 180px;">wrap包裹元素和unwrap每一个匹配元素的父元素</h2>
<p>wrap(wrapper)方法把每一个匹配元素分别放置在html元素中(一个匹配元素对应一个html父元素)。</p>
<p>wrap(function(index, origHtml))方法使用函数把所有匹配元素中指定下标的元素放置在html元素中。</p><br />
<button id="btn1">包裹元素</button> <button id="btn2">删除被选元素的父元素</button>
<button id="btn3">使用函数来包裹元素</button>
</body>
</html>
2.3.2. 运行效果图
2.3.3. 点击包裹元素按钮
2.3.4. 点击删除被选元素的父元素按钮
2.3.5. 点击使用函数来包裹元素按钮
3. wrapAll()方法
3.1. wrapAll(wrapper)方法在指定的html元素中放置所有匹配元素。
3.2. 语法
$(selector).wrapAll(wrapper)
3.3. 参数
3.4. 例子
3.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>wrapAll包裹所有匹配元素</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(index, origHtml){
$('p').wrapAll('<div style="background-color: red; width: 600px; height: 150px;"></div>');
});
$('#btn2').click(function(index, origHtml){
$('p').wrapAll($('h2'));
});
});
</script>
<style type="text/css">
p {background-color: pink; width: 500px;}
</style>
</head>
<body>
<h2 style="background-color: red; width: 600px; height: 180px;">wrapAll包裹所有匹配元素</h2>
<p>wrapAll(wrapper)方法在指定的html元素中放置所有匹配元素。</p>
<p>语法: $(selector).wrapAll(wrapper)</p><br /><br />
<button id="btn1">包裹所有匹配元素</button> <button id="btn2">已有元素包裹</button>
</body>
</html>
3.4.2. 运行效果图
3.4.3. 点击包裹所有匹配元素按钮
3.4.4. 重新运行, 点击已有元素包裹按钮
4. wrapInner()方法
4.1. wrapInner(wrapper)方法使用指定的html元素, 来包裹每一个匹配元素中的所有内容(inner html)。
4.2. 语法
$(selector).wrapInner(wrapper)
4.3. 参数
4.4. 使用函数包裹内容
4.4.1. wrapInner(function(index, origHtml))方法使用函数, 来规定指定的html元素, 包裹所有匹配元素中指定下标元素的所有内容(inner html)。
4.4.2. 语法
$(selector).wrapInner(function(index, origHtml))
4.4.3. 参数
4.4. 例子
4.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>wrapInner包裹内容</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$('p').wrapInner('<span></span>');
});
$('#btn2').click(function(){
$('p').wrapInner(function(index, origHtml){
if(index == 0) return '<span style="background-color: green;"></span>';
});
});
});
</script>
<style type="text/css">
p {
background-color: pink;
padding-left: 50px;
width: 500px;
height: 80px;
}
span {background-color: red;}
</style>
</head>
<body>
<p>wrapInner(wrapper)方法使用指定的html元素, 来包裹每一个匹配元素中的所有内容(inner html)。</p>
<p>wrapInner(function(index, origHtml))方法使用函数, 来规定指定的html元素, 包裹所有匹配元素中指定下标元素的所有内容(inner html)。</p>
<button id="btn1">包裹内容</button> <button id="btn2">使用函数包裹内容</button>
</body>
</html>
4.4.2. 运行效果图
4.4.3. 点击包裹内容按钮
4.4.4. 点击使用函数包裹内容按钮