浅谈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对select动态添加和删除OPTION示例代码
Aug 12 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
轮播的简单实现方法
Jul 28 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
微信小程序实现滚动加载更多的代码
Dec 06 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查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Python多进程写入同一文件的方法
2019/01/14 Python
简单了解python关系(比较)运算符
2019/07/08 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
出纳工作岗位责任制
2014/02/02 职场文书
环境保护建议书
2014/08/26 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
道德与公民自我评价
2015/03/09 职场文书
优秀团员自我评价
2015/03/10 职场文书
雾霾停课通知
2015/04/24 职场文书
放飞理想主题班会
2015/08/14 职场文书
2016年重阳节慰问信
2015/12/01 职场文书