本文结合W3School的文档,分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异,并给出了图文对比教程,非常的简单实用,有需要的朋友可以参考下

今晚看书的时候发现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>");

结果:

从图中可以看出strong标签包围了每个匹配的p标签。

wrapAll()方法

$("p").wrapAll("<strong></strong>");

结果:

从图中可以看出strong标签把全部匹配的p标签一下子全都包围了。

wrapInner()方法

$("p").wrapInner("<strong></strong>");

结果:

从图中可以看出strong标签内嵌入每个匹配的p标签里面。

当然,最后看起来,三个方法的效果是一样的。

点到即止。

以上就是个人对于jQuery中 wrap() wrapAll() 与 wrapInner()的差异分析了,仅仅是个人的一些理解,大神请略过。

浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异的更多相关文章

  1. jQuery中 wrap() wrapAll() 与 wrapInner()的差异

    wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中.jQuery 文档操作 - wrapAll() 方法 wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素.jQ ...

  2. jQuery中 wrap() wrapAll() 与 wrapInner()的区别

    今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的. 可是 ...

  3. 浅谈jQuery中的Ajax

    浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...

  4. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  5. 浅谈jquery中prop()和attr()

    我们都知道,一般在jquery中设置属性时要用到attr()方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html代码: <input type="checkbox& ...

  6. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式 [转载]

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  7. 浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式

    一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建 ...

  8. 浅谈jQuery中的eq()与DOM中element.[]的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 浅谈jQuery中setInterval()方法

    定义和用法: setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口 ...

随机推荐

  1. lua 类继承和实现

    http://blog.csdn.net/ssihc0/article/details/7742323 Account={balance=}; --新建了一个对像,他有一个属性balance func ...

  2. C++ 实现Trim

    一.字符串去空格(没有处理字符串中间的空格) lTrim:除去字符串开头的空格 eg."    abc123    " --> "abc123    " ...

  3. 新一代分布式任务调度框架:当当elastic-job开源项目的10项特性

    作者简介: 张亮,当当网架构师.当当技术委员会成员.消息中间件组负责人.对架构设计.分布式.优雅代码等领域兴趣浓厚.目前主导当当应用框架ddframe研发,并负责推广及撰写技术白皮书.   一.为什么 ...

  4. 笔记本开通手机WiFI热点

    启用虚拟wifi: netsh wlan set hostednetwork mode=allow ssid=liuyuduen key=liuyuduen 关闭虚拟Wifi: netsh wlan ...

  5. Appium项目搭建 For windows

    1.appium又安装了最新版本,更新了,1.4.16.1,然后整理电脑的时候发现自动更新的时候不是在原来的地方进行覆盖,所以就重新安装了一遍,注意需要看下环境变量是否配置了(用户变量:C:\Appi ...

  6. synchronized关键字的用法

    synchronized用于给方法或者块加锁用的,只有获得该对象或者块的锁的对象才能够执行里面的代码,否则将阻塞在那里,等待该锁被释放,然后获得该锁继续执行.比如下面模拟售票的代码: /** * 模拟 ...

  7. 005 列表以及append,extend方法

    定义一个列表: number=[,'changhao','常浩',5.2] 往这个列表里面添加单一新值(类型无限制),需要使用append方法. 例如: number.append() number. ...

  8. tostring的用法

    ToString()可空参数单独使用,同时可以加一个格式化参数,具体方式如下: . 取中文日期显示_年月 currentTime.ToString("y"); 格式:2007年1月 ...

  9. HDU 4798 - Skycity

    告诉你一幢楼的高度,楼的层数,每层一样高. 每一层的底边是一个圆,下一层的玻璃一定要包括进上一层的底边. 每层玻璃铺成棱柱形,玻璃有最小面积限制. 问你这层楼最小的总玻璃数是多少. 求出每层最小的玻璃 ...

  10. operator 类型转换符

    参考脚本之家的这篇博客   http://www.jb51.net/article/41333.htm 类型转换操作符(type conversion operator)是一种特殊的类成员函数,它定义 ...