JQuery中的wrap、wrapAll、wrapInner、unwrap方法

最新推荐文章于 2022-05-12 22:51:07 发布
最新推荐文章于 2022-05-12 22:51:07 发布
阅读量159 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiangzhogshou/article/details/103304662
版权

一、wrap

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>--abc--</span>
		<a>11111111</a>
		<span>--def--</span>
		<script>
			$("span").wrap("<div></div>");
			//在每个span标签的外部分别包裹div标签
		</script>
	</body>
</html>

包裹前：
初始状态
包裹后：
效果
代码执行效果

二、wrapAll

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>--abc--</span>
		<a>11111111</a>
		<span>--def--</span>
		<script>
			$("span").wrapAll("<div></div>");
			//把所有span标签合并在一个div标签中
		</script>
	</body>
</html>

效果：
效果
代码执行效果：
代码执行效果

三、wrapInner

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>--abc--</span>
		<a>11111111</a>
		<span>--def--</span>
		<script>
			$("span").wrapInner("<div></div>");
			//在所有span标签内部将内容用div标签包裹
		</script>
	</body>
</html>

效果：
效果
代码效果：
内部包裹

四、unwrap

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div>
			<a><span>--abc--</span></a>
		</div>	
		<a>11111111</a>
		<div>
			<span>--def--</span>
		</div>
		<script>
			$("span").unwrap();
			//撤销span标签的第一次层外标签
		</script>
	</body>
</html>

撤销包裹前：
初状态
撤销包裹后：
效果
代码执行效果：只撤销第一层
撤销第一层

qiangzhogshou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中wrap()方法、warpAll()方法、warpInner()方法与unwarp()方法
Liuxiaoyang1999的博客
11-10 882
目录 一、wrap()方法： 二、wrapAll()方法： 三、wrapInner()方法： 四、unwrap() 方法： 一、wrap()方法： wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。 代码示例： <!DOCTYPE html> <html> <head> <meta chars...
轻松掌握jQuery中wrap()与unwrap()函数的用法
11-23
总结来说，`wrap()`、`wrapAll()`、`wrapInner()`和`unwrap()`是jQuery中用于处理元素包裹和解包的强大工具，它们帮助开发者更方便地构建和调整DOM结构。理解并熟练运用这些函数，能够极大地提升前端开发的效率。
jQuery方法wrapAll()
weixin_33790053的博客
08-04 187
在慕课网学习jQuery时，看到教程在讲述wrapAll()时说道：.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象通过回调的方式可以单独处理每一个元素。简单的看一段代码：&lt;p&gt;p元素&lt;/p&gt; &lt;p&gt;p元素&lt;/p&gt;$('p').wrapAll(function() { re...
jQuery中 wrap() wrapAll() 与 wrapInner()的区别
删库跑路
02-16 300
今晚看书的时候发现jQuery有三个包裹节点的方法，百度了一下jQuery wrap() / wrapAll() / wrapInner()，果然搜索结果 W3School的文档说明是排第一的。可是，W3School的解释是这样的：jQuery 文档操作 - wrap() 方法wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。jQuery 文档操作 - wrapAll() 方法w
jQuery wrap()、wrapAll()、wrapInner()
qq_44971038的博客
11-29 133
wrap() <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script> </head> <body...
jQuery源码分析之wrap,wrapInner,wrapAll,unwrap方法
高山上的鱼
10-12 1229
首先我们回忆一下each实例方法的用法： $(document).ready(function(){ $("button").click(function(){ $("li").each(function(i,elem){ //首先这个each实例函数中，第一个参数是调用对象下标，第二个参数是调用对象DOM元素 //this指的是调用对象的DOM元素!
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 文档操作方法
07-21
jQuery 文档操作方法详解 jQuery 文档操作方法是 jQuery 库中的一组强大且实用的函数，用于操作 HTML 和 XML 文档中的元素。这些方法可以帮助开发者快速高效地操作文档结构，提高开发效率和代码质量。本文将对 ...
用法jQuery中的wrap()函数操作HTML元素的教程_.docx
10-10
**jQuery中的wrap()函数详解** 在jQuery库中，`wrap()`函数是一个强大的工具，它允许开发者将HTML元素包裹在一个新的容器元素中。这个功能在构建动态网页和处理DOM元素时非常有用，尤其在布局调整、内容封装以及...
jQuery常见面试题之DOM操作详析
10-19
- 插入节点：`append()`, `prepend()`, `before()`, `after()`, `appendTo()`, `prependTo()`, `insertBefore()`, `insertAfter()`等方法用于在DOM中插入新元素。 - 删除节点：`remove()`移除元素及其绑定的事件，`...
jQuery中的wrap()、unwrap()
halfsking的博客
12-20 210
jQuery中包装dom，如需要美化，给checkbox包装一个&lt;div class='checkbox'&gt;，以下是用法：   删除所有 checkbox 元素的父元素：（即删除包装dom） $("button").click(function(){   $("input[type='checkbox']").unwrap(); });     给 checkbox ...
【jQuery】wrap()、wrapAll()、wrapInner()和unwrap()
景谦Nice的博客
11-29 145
wrap(html|ele|fn)：把所有匹配的元素逐个用指定的结构化标记包裹起来 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wrap()</title> <script src="js/jquery-3.3.1.js">&...
jquery的unwrap wrap wrapAll wrapInner的区别跟总结
tony19890820的专栏
06-16 1070
unwrap 移除直接父元素 wrap 在外层包裹一层标签 wrapAll 把选择到的所有元素统一包到一个指定的标签里 wrapInner 让指定的元素的内部所有内容包到一个指定的标签里
Jquery中的wrap wrapAll wrapInner实战代码
大-LOVE-辉~的博客
12-22 288
wrap(); wrap $(function(){ $('p').wrap("") }) 第一段 第一段 第一段 上面这个代码,根据p这个节点进行操作,那么wrap()这个方法操作之后网页会
jQuery中warp与warpInner以及warpAll的简单应用
m0_52228992的博客
05-12 478
warp，warpInner相对于append，prepend内部追加而言，是将元素包裹起来（就是成为它的父元素包裹或是子元素包裹），也是比较常用的方法 下面简单解释用法及应用 元素1.warp（标签）：用标签包裹元素1 元素2.warpInner（标签）：用标签包裹元素2内部 元素3.warpAll(标签)：所有元素3均被一个标签包裹 举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta ch
jQuery--包裹节点（wrap()、wrapAll()、wrapInner()），取消包裹节点（unwrap()）详解
吴声子夜歌的博客
10-02 1997
包裹节点 所谓包裹节点，是指在现有节点的外围包裹一层其他元素标签，使当前节点称为新元素的子节点。jQuery提供了wrap()和wrapAll()等方法用于实现节点的包裹。 1. wrap()方法： wrap()方法用于将所匹配的元素通过指定的HTML标签包裹起来，其语法格式如下： $(selector).wrap(htnml) $(selector).wrap(element) $(sele...
jQuery——wrap、unwrap、wrapALL、wrapinner介绍
qq_43469862的博客
02-21 127
<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.1.1.min.js"></script> </head> <body> <script&gt...
jquery的包裹节点的简单理解 wrap() wrapAll() wrapInner()的用法及其区别
weixin_45846805的博客
05-23 1240
在jQuery中有三总包裹节点的方法 1.wrap()：将每一个匹配到的子元素进行包裹(一对一 单独包裹，直接添加父元素) 2.wrapInner()： 给一堆同级别的元素添加父元素 3.wrapAll(): 给一堆元素添加同一个父元素 三者中比较好理解的就是wrap()和wrapInner() 例如： body中存在1个hello world！ 此时分别执行$(‘em’).wrap(’’); $(‘em’).wrapInner(’’); 得到的结果： 从html结构可以看出：wrap是在选定元素外面包
numpy的unwrap函数
热门推荐
李树花开，风中摇曳
12-15 1万+
最近处理相位角的时候用到了这个函数,所以在这里稍稍用一点篇幅来记录一下我的理解.unwrap函数究竟是用来是用来干什么的呢?它是用来解卷绕的.至于什么是卷绕,网上的说法是: 要计算一个系统相频特性，就要用到反正切函数，计算机中反正切函数规定，在一、二象限中的角度为0～pi，三四象限的角度为0～-pi。 若一个角度从0变到2pi，但实际得到的结果是0～pi，再由-pi～0，在w=pi处发生跳
jQuery包裹节点技巧：wrap, wrapAll与wrapInner详解
本文档是对jQuery库中包裹节点功能的详细总结，重点介绍了三个关键方法：`wrap()`，`wrapAll()` 和 `wrapInner()`。jQuery作为一款流行的JavaScript库，其设计理念是“写得少，做得多”，提供轻量级、强大选择器、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值