浅谈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设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python控制台显示时钟的示例
2014/02/24 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
pandas去除重复列的实现方法
2019/01/29 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python挖矿算力测试程序详解
2019/07/03 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
详解Python绘图Turtle库
2019/10/12 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
央视元宵晚会主持串词
2014/03/25 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers