浅谈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实现self的resend
Jul 22 Javascript
jQuery技巧总结
Jan 01 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
node实现的爬虫功能示例
May 04 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
基于mysql的bbs设计(五)
2006/10/09 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
在javascript中关于节点内容加强
2013/04/11 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python学生信息管理系统实现代码
2019/12/17 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
Linux常见面试题
2016/10/04 面试题
最受欢迎的自我评价
2013/12/22 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
出国留学导师推荐信
2015/03/26 职场文书
六年级数学教学反思
2016/02/16 职场文书
redis lua限流算法实现示例
2022/07/15 Redis