浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异


Posted in Javascript onNovember 12, 2014

今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的。

可是,W3School的解释是这样的:

jQuery 文档操作 - wrap() 方法

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
jQuery 文档操作 - wrapAll() 方法

wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
jQuery 文档操作 - wrapInner() 方法

wrapInner() 方法使用指定的 HTML 内容或元素,来包裹每个被选元素中的所有内容 (inner HTML)。
我读的书少,看见这样的解释不能立即解决我的困惑真的很烦。

还是动手最实际。

这是用来比较的原代码:

<p>我是占位子的。</p>
<p>我是占位子的。</p>
wrap()方法

$("p").wrap("<strong></strong>");

结果:

浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

从图中可以看出strong标签包围了每个匹配的p标签。

wrapAll()方法

$("p").wrapAll("<strong></strong>");

结果:

浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

从图中可以看出strong标签把全部匹配的p标签一下子全都包围了。

wrapInner()方法

$("p").wrapInner("<strong></strong>");

结果:

浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

从图中可以看出strong标签内嵌入每个匹配的p标签里面。

当然,最后看起来,三个方法的效果是一样的。

浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

点到即止。

以上就是个人对于jQuery中 wrap() wrapAll() 与 wrapInner()的差异分析了,仅仅是个人的一些理解,大神请略过。

Javascript 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
js在IE与firefox的差异集锦
Nov 11 #Javascript
超炫的jquery仿flash导航栏特效
Nov 11 #Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 #Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 #Javascript
jQuery 动态云标签插件
Nov 11 #Javascript
javascript 回调函数详解
Nov 11 #Javascript
JSON格式化输出
Nov 10 #Javascript
You might like
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
集体婚礼证婚词
2014/01/13 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
常用的Python代码调试工具总结
2021/06/23 Python
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android