简述jQuery中warp，wrapAll和wrapInner方法

最新推荐文章于 2022-05-12 22:51:07 发布

肥胖的企鹅

最新推荐文章于 2022-05-12 22:51:07 发布

阅读量326

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript jQuery

本文链接：https://blog.csdn.net/weixin_43457668/article/details/103000821

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

介绍

wrap()	把所有匹配的元素用其他元素的结构化标记包裹起来
wrapAll()	将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹
wrapInner()	将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来

区分

1、wrap()方法

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
	<span>百度</span>
	<span>百度</span>
	<span>百度</span>
	<script>
	    $("span").wrap("<a href='http://www.baidu.com'></a>");
	</script>
    </body>
</html>

页面结果为：

可见每个span标签都已被a标签包裹。

2、wrapAll()方法

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
	<span>百度</span>
	<span>百度</span>
	<span>百度</span>
	<script>
	    $("span").wrapAll("<a href='http://www.baidu.com'></a>");
	</script>
    </body>
</html>

结果如下：

一个a标签包裹了所有指定标签。

3、wrapInner()方法

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
	<div>百度</div>
	<script>
	    $("div").wrapAll("<a href='http://www.baidu.com'></a>");
	</script>
    </body>
</html>

结果如下：

可见wrapInner方法是针对选中标签的内容，在原标签内部将其内容包裹。

*4、unwrap()方法

作用：移出匹配元素的父元素，用于取消 .wrap()方法的效果

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
	<div>
	    <a href="http://www.baidu.com"><span id="link">百度</span></a>
	</div>
	<script>
	    $("#link").unwrap();//div标签不会去掉
	</script>
    </body>
</html>

肥胖的企鹅

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简述jQuery中warp，wrapAll和wrapInner方法

介绍wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来 wrapAll() 将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹 wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来区分1、wrap()方法<!DOCTYPE html><html>...
复制链接

扫一扫