014_包裹元素

最新推荐文章于 2024-04-01 19:40:18 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-04-01 19:40:18 发布

阅读量248

点赞数

分类专栏： jQuery学习文章标签： javascript jquery html5

本文链接：https://blog.csdn.net/aihiao/article/details/109967289

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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. 点击使用函数包裹内容按钮

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
014_包裹元素

1. wrap()方法1.1. wrap()方法把每个被选元素放置在指定的html内容或元素中。1.2. 语法$(selector).wrap(wrapper)1.3. 参数1.4. 使用函数来包裹元素1.4.1. 使用函数来规定在每个被选元素周围包裹的内容。1.4.2. 语法$(selector).wrap(function())1.4.3. 参数1.5. 例子1.5.1. 代码<!DOCTYPE html><html&gt
复制链接

扫一扫

专栏目录