今晚看书的时候发现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. PageRank算法

    PageRank,网页排名,又称网页级别,传说中是PageRank算法拯救了谷歌,它是根据页面之间的超链接计算的技术,作为网页排名的要素之一.它通过网络浩瀚的超链接关系来确定一个页面的等级.Googl ...

  2. IGS_学习笔记09_IREP生成服务后台工具Soagenerate.sh

    2015-01-06 Created By BaoXinjian 参考:张礼军 - http://oracleseeker.com/2009/10/23/irep_service_generation ...

  3. git push失败的解决办法（2）

    错误一:Cannot rebase: You have unstaged changes 解决办法: Cannot rebase: You have unstaged changes. 那说明有修改过 ...

  4. [实变函数]5.2 非负简单函数的 Lebesgue 积分

    1 设        $$\bex        \phi(x)=\sum_{i=1}^j c_i\chi_{E_i}(x),\quad c_i\geq 0,        \eex$$ 其中     ...

  5. REST架构实质（转）

    REST(Representational State Transfer) 曾经被误解为只是CRUD(增删改查),从这个层面上,好像REST只是和RPC一个层面的东西,没有什么了不起,其实这些都是对R ...

  6. 寒假学习unity的第一天

    1.在Assert中创建材质Material,可以为物体附上材质 2.实例化命令Instantiate(要生成的物体,生成的位置,生成物体的选择角度) 3.检测鼠标左键 if(Inhibitor.Ge ...

  7. dom4j-full.jar 解析 XML

    dom4j-full.jar 解析 XML public Document getDocument() throws DocumentException { SAXReader read=new SA ...

  8. 中文unicode范围及unicode编解码

    中文unicode范围 : [\u4e00-\u9fa5] 普通字符串可以用多种方式编码成Unicode字符串,具体要看你究竟选择了哪种编码:unicodestring = u"Hello ...

  9. js判断手机是的操作系统

    var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; retu ...

  10. [SQL]公交新路问题

    --解答一 CREATE TABLE T_Line( ID nvarchar(), --公交线路号 Station nvarchar(), --站点名称 Orders int) --行车方向(通过它反 ...