浅谈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中sort()方法的用法
Nov 04 Javascript
打开超链需要“确认”对话框的方法
Mar 08 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
js中url对象化管理分析
Dec 29 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
在线增减.htpasswd内的用户
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
DEFER怎么用?
2006/07/01 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
python字典DICT类型合并详解
2017/08/17 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python异常处理try except过程解析
2020/02/03 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
内业资料员岗位职责
2014/01/04 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
教师节简报
2015/07/20 职场文书
会议简讯范文
2015/07/20 职场文书
学校少先队工作总结
2015/08/12 职场文书
早恋主题班会
2015/08/14 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
浅谈Redis中的RDB快照
2021/06/29 Redis
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers