浅谈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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
JavaScript入门学习书籍推荐
Jun 12 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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数据缓存的使用说明
2013/05/10 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
微信小程序实现留言板
2018/10/31 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python实现下载文件的三种方法
2017/02/09 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
Python字符串对象实现原理详解
2019/07/01 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Python中Selenium模块的使用详解
2020/10/09 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
weblogic面试题
2016/03/07 面试题
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
电子商务个人自荐信
2013/12/12 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
档案管理员岗位职责
2015/02/12 职场文书
安全伴我行主题班会
2015/08/13 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python