浅谈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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
新浪的图片新闻效果
2007/01/13 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js创建对象的方式总结
2015/01/10 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python3基于sax解析xml操作示例
2018/05/22 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Keras loss函数剖析
2020/07/06 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
python statsmodel的使用
2020/12/21 Python
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
演讲主持词
2014/03/18 职场文书
大学生学期个人总结
2015/02/12 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫