浅谈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的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
Java中Timer的用法详解
Oct 21 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
webpack的pitching loader详解
Sep 23 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数据缓存的使用说明
2013/05/10 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python while 循环使用的简单实例
2016/06/08 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python实现自动解数独小程序
2019/01/21 Python
学习python的前途 python挣钱
2019/02/27 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
就业自荐信
2013/12/04 职场文书
在校学生职业规划范文
2014/01/08 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
看上去很美观后感
2015/06/10 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python