浅谈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 相关文章推荐
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
纯javascript版日历控件
2016/11/24 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python ftp上传文件
2016/02/13 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python实现Virginia无密钥解密
2019/03/20 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
laravel使用redis队列实例讲解
2021/03/23 PHP
中专毕业生个人职业生涯规划
2014/02/19 职场文书
经销商年会策划方案
2014/05/29 职场文书
十佳青年事迹材料
2014/08/21 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python