浅谈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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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 实例化类的一点摘记
2008/03/23 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
smarty简单应用实例
2015/11/03 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
python中re模块知识点总结
2021/01/17 Python
法律专业应届本科毕业生求职信
2013/10/25 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
化学教学随笔感言
2014/02/19 职场文书
代理人委托书
2014/08/01 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript