浅谈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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
Javascript 继承机制实例
2009/08/12 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
使用python实现生成用户信息
2017/03/20 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python实现烟花小程序
2019/01/30 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python 模拟登陆github的示例
2020/12/04 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
应届生煤化工求职信
2013/10/21 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
银行服务感言
2014/03/01 职场文书
新春联欢会主持词
2014/03/24 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
颐和园的导游词
2015/01/30 职场文书
家装业务员岗位职责
2015/04/03 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS