浅谈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 相关文章推荐
解密效果
Jun 23 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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 开发环境配置(测试开发环境)
2010/04/28 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
调整PHP的性能
2013/10/30 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
php实现简易计算器
2020/08/28 PHP
Javascript之文件操作
2007/03/07 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python 求10个数的平均数实例
2019/12/16 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
学校十一活动方案
2014/02/01 职场文书
综合实践活动总结
2014/05/05 职场文书
力学专业求职信
2014/07/23 职场文书
化学工程专业求职信
2014/08/10 职场文书
环卫工人节活动总结
2014/08/29 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
学习保证书100字
2015/02/26 职场文书
民事辩护词范文
2015/05/21 职场文书
无保留意见审计报告
2015/06/05 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
MySQL查询日期时间
2022/05/15 MySQL