今晚看书的时候发现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. bzoj3545: [ONTAK2010]Peaks

    Description 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问,每组询问询 ...

  2. [dts]DTS实例分析

    此篇源文件arch/arm/boot/dts/imx6sx.dtsi 1. dts和dtsi完成的功能 以下是两段较为常见的dtsi和dts代码 uart5: serial@021f4000 { co ...

  3. SVN并行开发管理策略

    总的原则:trunk保证相对稳定.分支合并到主干时将冲突降至最低. (1)       trunk用于集成.测试.发布,可以提交fixbug代码,但不允许直接提交新特性. (2)       特性在分 ...

  4. 黄聪：360浏览器、Chrome调试(debugger)JS总是进入paused in debugger状态

    在通过Chrome浏览器进行web前端开发时,我们会经常用到Chrome自带的debugger工具,但是经常按完快捷键(F12)后,页面会进入paused in debugger状态,需要点击右上角的 ...

  5. linux 定时器编程实例(完善中).....

    最近在写linux 下的定时器编程实验,测试发现 usleep函数在 x86 架构下的定时还是比较准确的,在arm9下 就不太准了. 今天用linux 下的setitimer()函数进行了定时 器的测 ...

  6. 使用 Entity Framework

    ORM 和 EF 当我们要开发一个应用程序,就要考虑怎样展示数据,怎样持久化数据.考虑这个问题时我们所要关心的东西,最重要的莫过于程序的性能.开发的简易性和代码的可维护.可扩展性. 持久化(Persi ...

  7. 获取OpenCV中RotatedRect的绝对角度

    opencv中RotatedRect的angle这个成员变量总是诡异的不同寻常(http://stackoverflow.com/questions/15956124/minarearect-angl ...

  8. RAC_Oracle集群服务安装RAC（案例）

    2015-01-23 Created By BaoXinjian Thanks and Regards

  9. PLSQL_性能优化系列11_Oracle Bulk Collect批处理

    2014-10-04 Created By BaoXinjian

  10. 编写第一个java程序

    安装了一个编辑器,Notepad++,这个编辑器以前在写PHP的时候就喜欢用,呵呵,现在写java也先沿用这个这个编辑器吧. 代码: public class Test{ public static ...