浅谈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 相关文章推荐
理解Javascript_09_Function与Object
Oct 16 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
js获取域名的方法
Jan 27 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
react ant Design手动设置表单的值操作
Oct 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
用文本作数据处理
2006/10/09 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
南京某软件公司的.net面试题
2015/11/30 面试题
医学院护理专业应届生求职信
2013/11/12 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
连带责任保证书
2014/04/29 职场文书
爱护公物标语
2014/06/24 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
怎样写家长意见
2015/06/04 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python