浅谈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 技巧小结
Apr 02 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
编译问题
2006/10/09 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
浅说js变量
2011/05/25 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
javascript 构造函数方式定义对象
2015/01/02 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
用Python编写web API的教程
2015/04/30 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python实现flappy bird小游戏
2018/12/24 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
什么时候需要进行强制类型转换
2016/09/03 面试题
实习生自我评价
2014/01/18 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
护士先进个人总结
2015/02/13 职场文书
办公室主任个人总结
2015/02/28 职场文书
主题班会开场白
2015/06/01 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python