今晚看书的时候发现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标签。

再看一个HTML：

    <table>

        <tr>

            <td>11</td>

            <td>11</td>

        </tr>

        <tr>

            <td>22</td>

            <td>22</td>

        </tr>

        <tr>

            <td>33</td>

            <td>33</td>

        </tr>

    </table>

    <div>div</div>

我希望通过jQuery控制得到下面的结构：

<body>

    <table>

        <tr>

            <td>11</td>

            <td>11</td>

        </tr>

        <tr>

            <td>22</td>

            <td>22</td>

        </tr>

        <tr>

            <td>33</td>

            <td>33</td>

        </tr>

        <tr>

            <td>

                <div>div</div>

            </td>

        </tr>

    </table>

</body>

jQuery怎样写呢

    <script type="text/javascript">

        $(function () {

            $("tr").eq(2).after($("div"));

            $("div").wrap("<tr></tr>").wrap("<td></td>");

        })

    </script>

按F12可以看到HTML结构：

$("div").wrap("<tr></tr>").wrap("<td></td>");

这一句话是先把选中的div用<tr>包含起来：

<tr><div>div</div><tr/>

再把选中的div用<td>包含起来

<tr><td><div>div</div></td><tr/>

如果jQuery写成这样：

$("div").wrap("<td></td>").wrap("<tr></tr>");

则结果将会变成：

<td><tr><div>div</div></tr><td/>

wrapAll()方法

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

结果：

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

wrapInner()方法

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

结果：

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

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

出处：http://segmentfault.com/a/1190000000780313

jQuery中 wrap() wrapAll() 与 wrapInner()的区别的更多相关文章

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

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

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

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

  3. [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

    原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul>   <li title='苹果'>苹果</li>   ...

  4. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  5. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

  6. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  7. jquery中的$().each和$.each的区别

    jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...

  8. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  9. jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）

    jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性  ...

随机推荐

  1. python学习-day11-内建函数

    python-内建函数 -int:将字符串转换为数字 a = " print(type(a),a) b = int(a) print(type(b),b) num = " v = ...

  2. SQL语句技巧_索引的优化_慢查询日志开启_root密码的破解

    1.正则表达式的使用 regexp例:select name,email from t where email regexp '@163[.,]com$'使用like方式查询selct name,em ...

  3. Cpk

    CPK:Complex Process Capability index 的缩写,是现代企业用于表示制程能力的指标.制程能力是过程性能的允许最大变化范围与过程的正常偏差的比值.制程能力研究在於确认这些 ...

  4. Instant Run

    http://tools.android.com/tech-docs/instant-run N Developer Preview users: Instant Run is currently i ...

  5. 关于List泛型的强制转换

    当我们从数据库中查询出一些数据,有时返回的结果可能是List<Object>类型,而我们清楚的知道它的准确类型是List<User>,可能我们想直接的去进行类型的转换,你可能会 ...

  6. SOA_环境安装系列1_Oracle SOA Suite11g安装总括（案例）

    2015-01-01 Created By BaoXinjian

  7. php 信号量

    一些理论基础: 信号量:又称为信号灯.旗语 用来解决进程(线程同步的问题),类似于一把锁,访问前获取锁(获取不到则等待),访问后释放锁. 临界资源:每次仅允许一个进程访问的资源. 临界区:每个进程中访 ...

  8. RabbitMQ介绍4 - 编程（C#客户端示例）

    C#终端的说明文档: http://www.rabbitmq.com/dotnet-api-guide.html 这里介绍使用RabbitMQ的几种典型场景. 1. 简单direct模式( http: ...

  9. WCF服务在高并发情况下报目标积极拒绝的异常处理 z

    http://www.cnblogs.com/kklldog/p/5037006.html wcf的监控服务,偶尔监控到目标服务会报一个目标积极拒绝的错误.一开始以为服务停止了,上服务器检查目标服务好 ...

  10. RESTful Api 身份认证中的安全性设计探讨

    REST 是一种软件架构风格.RESTful Api 是基于 HTTP 协议的 Api,是无状态传输.它的核心是将所有的 Api 都理解为一个网络资源.将所有的客户端和服务器的状态转移(动作)封装到 ...