今晚看书的时候发现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. Learning Puppet — Resource Ordering

    Learning Puppet — Resource Ordering Learn about dependencies and refresh events, manage the relation ...

  2. [Freescale]Freescale L3.14.52_1.1.0 yocto build

    可参照:http://blog.csdn.net/wince_lover/article/details/51456745 1. Refer to <基于i.mx6处理器的Yocto项目及Lin ...

  3. activiti自定义流程之Spring整合activiti-modeler5.16实例（八）：完成个人任务

    注:(1)环境搭建:activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建        (2)创建流程模型:activiti自定义流程之Spring ...

  4. 浅谈Redis数据库的键值设计(转)

    丰富的数据结构使得redis的设计非常的有趣.不像关系型数据库那样,DEV和DBA需要深度沟通,review每行sql语句,也不像memcached那样,不需要DBA的参与.redis的DBA需要熟悉 ...

  5. Hibernate中get和load的区别

    get获取的对象立即执行sql查询数据库中当前实体表中的数据,如果外键关联的其他实体表如果配置了懒加载关闭,则也会查询出外键关联的其他实体表中的数据,否则外键关联的其他实体表则以代理对象表示(称其为代 ...

  6. Python 结巴分词（1）分词

    利用结巴分词来进行词频的统计,并输出到文件中. 结巴分词github地址:结巴分词 结巴分词的特点: 支持三种分词模式: 精确模式,试图将句子最精确地切开,适合文本分析: 全模式,把句子中所有的可以成 ...

  7. JAVA坏境变量中的JAVA_HOME path classpath 的设置与作用。

    在把jdk安装到计算机中之后,我们来进行设置使java环境能够使用. 首先右键点我的电脑.打开属性.然后选择“高级”里面的“环境变量”,在新的打开界面中的系统变量需要设置三个属性“JAVA_HOME” ...

  8. CEO应向软件工程师学习的7个技能

    软件工程师的哪些技能是值得CEO学习的?显然,软件工程师是逻辑的,高效的,注重细节的,有计划的,并且大多数CEO也是如此.但是,软件工程师还有一些更微妙,甚至是令人懊恼的品质,那么CEO是否可以从中学 ...

  9. c#图片上绘制半透明矩形

    p.CreateGraphics().FillRectangle( ,Color.LightGreen)), iLeft, iTop, iRight - iLeft, iBottom - iTop); ...

  10. C++学习27 用全局函数重载运算符

    运算符重载函数既可以声明为类的成员函数,也可以声明为所有类之外的全局函数. 运算符重载函数作为类的成员函数 将运算符重载函数声明为类的成员函数时,二元运算符的参数只有一个,一元运算符不需要参数.之所以 ...