jQuery中wrap方法，wrapAll方法，wrapInner方法以及unwrap方法

最新推荐文章于 2020-11-28 14:37:10 发布
最新推荐文章于 2020-11-28 14:37:10 发布
阅读量249 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faithinmyheart/article/details/103000841
版权

wrap方法：将匹配到的标签逐个进行包裹起来

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

wrapAll方法：是将匹配到的标签统一包裹起来

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

wrapInner方法：是将匹配到的标签中的内容统一添加标签

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

unwrap方法：移除离匹配到的标签最近的一个标签

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

 

离弃。
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中wrap()方法、warpAll()方法、warpInner()方法与unwarp()方法
Liuxiaoyang1999的博客
11-10 878
目录 一、wrap()方法： 二、wrapAll()方法： 三、wrapInner()方法： 四、unwrap() 方法： 一、wrap()方法： wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。 代码示例： <!DOCTYPE html> <html> <head> <meta chars...
jQuery 文档操作方法
07-21
jQuery 文档操作方法详解 jQuery 文档操作方法是 jQuery 库中的一组强大且实用的函数，用于操作 HTML 和 XML 文档中的元素。这些方法可以帮助开发者快速高效地操作文档结构，提高开发效率和代码质量。本文将对 ...
11.使用wrap()和wrapInner()方法包裹元素和内容
weixin_34409741的博客
03-11 105
wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为： $(selector).wrap(wrapper)和$(selector).wrapInner(wrapper) 参数selector为被包裹的元素，wrapper参数为包裹元素的格式。 例如，调用wrap()方法，将<span>用<di...
jQuery中的wrap、wrapAll、wrapInner、unwrap方法
low1101的博客
12-01 209
wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></...
jquery之wrap(),wrap(),unwrap()方法详解
weixin_33694172的博客
10-16 243
【注】wrap()：为每个匹配元素外面添加指定的HTML结构， 　　wrapAll(): 为所有匹配元素（作为一个整体）外面添加一个指定的HTML结构     原文地址：http://www.365mini.com/page/jquery-wrap.htm   wrap()函数用于在每个匹配元素外部包裹指定的HTML结构。 与该函数相对的是unwrap()函数，用于当前匹配元素的父元...
jQuery中wrap方法
myy_llc的博客
11-15 602
wrap()：把所有匹配的元素用其他元素的结构化标记包裹起来。 wrapAll() ：将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹。 wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来. unwrap() ：移出匹配元素的父元素，用于取消 .wrap()方法的效果。 代码如下： wrap()方法： <!DOCTYP...
JQuery新版中文手册
05-14
JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...
用法jQuery中的wrap()函数操作HTML元素的教程_.docx
10-10
**jQuery中的wrap()函数详解** 在jQuery库中，`wrap()`函数是一个强大的工具，它允许开发者将HTML元素包裹在一个新的容器元素中。这个功能在构建动态网页和处理DOM元素时非常有用，尤其在布局调整、内容封装以及...
jQuery 1.4.1 中文参考
07-15
6.3.4 unwrap() 100 6.3.5 wrapAll(html) 100 6.3.6 wrapAll(elem) 101 6.3.7 wrapInner(html) 101 6.3.8 wrapInner(elem) 102 6.3.9 wrapInner(fn) 102 6.4 替换 103 6.4.1 replaceWith(content) 103 6.4.2 ...
jQuery详细教程
04-25
jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中： 实例 ...
jQuery中的wrap()方法
kongjunchao159的博客
11-18 500
jQuery中wrap()、wrapAll()和wrapInner()的区别 (使用指定的HTML元素来包裹被选元素) 例子： 原代码： 段落1 段落2 wrap()方法： $('p').wrap(''); 结果： 段落1 段落2 wrapAll()方法： $('p').wrap(''); 结果： 段落1 段落2 wr
jq wrap方法
记录点滴
06-04 634
wrap ( ): 给每一个被选中的元素加上一个父级； eg：给每一个p标签加上类名为wrapper的div父级 <p class="box">1</p> <p class="box">2</p> <script> $(".box").wrap($("<div class='wrapper'&gt...
31. jQuery- 使用wrap（）和wrapInner（）方法包裹元素节点
LiGuogang
12-22 232
1. 效果图 2. html代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;使用wrap（）和wrapInner（）方法包裹元素节点&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css
014_包裹元素
aihiao的专栏
11-28 240
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
jQuery--包裹节点（wrap()、wrapAll()、wrapInner()），取消包裹节点（unwrap()）详解
吴声子夜歌的博客
10-02 1982
包裹节点 所谓包裹节点，是指在现有节点的外围包裹一层其他元素标签，使当前节点称为新元素的子节点。jQuery提供了wrap()和wrapAll()等方法用于实现节点的包裹。 1. wrap()方法： wrap()方法用于将所匹配的元素通过指定的HTML标签包裹起来，其语法格式如下： $(selector).wrap(htnml) $(selector).wrap(element) $(sele...
原生替代jquery方案
chenglinzi2356的博客
06-26 830
Query Selector 常用的 class、id、属性 选择器都可以使用document.querySelector或document.querySelectorAll替代。区别是 document.querySelector返回第一个匹配的 Element d...
jquery的unwrap wrap wrapAll wrapInner的区别跟总结
tony19890820的专栏
06-16 1070
unwrap 移除直接父元素 wrap 在外层包裹一层标签 wrapAll 把选择到的所有元素统一包到一个指定的标签里 wrapInner 让指定的元素的内部所有内容包到一个指定的标签里
DOM包裹unwrap()方法
qq_37036642的博客
08-03 519
DOM包裹unwrap()方法 我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ? jQuery提供了一个unwrap()方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。 看一段简单案例： p元素 我要删除这段代码中的div，一般常
jQuery中wrap、wrapAll、wrapInner、unwrap方法
ANFO的博客
11-10 443
1.wrap() 该方法的作用是把所有匹配的元素用指定标签包裹起来，这里要注意它的效果是将匹配的每一个元素各用一个指定标签包裹，代码示例如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script sr...
wrapALL在jquery中
最新发布
05-25
在 jQuery 中，`wrapAll()` 方法可以将一个元素的所有子元素包裹在一个指定的元素中。 具体来说，`wrapAll()` 方法会在被选元素的父元素中插入指定的 HTML 内容或 DOM 元素，并将被选元素的所有子元素包裹在其中。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值