jQuery中 wrap() wrapAll() 与 wrapInner()的区别
今晚看书的时候发现jQuery有三个包裹节点的方法，百度了一下jQuery wrap() / wrapAll() / wrapInner()，果然搜索结果 W3School的文档说明是排第一的。
可是，W3School的解释是这样的：
wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
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()的区别的更多相关文章
- 浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
本文结合W3School的文档,分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异,并给出了图文对比教程,非常的简单实用,有需要的朋友可以参考下 今晚看书的时候发 ...
- jQuery中 wrap() wrapAll() 与 wrapInner()的差异
wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中.jQuery 文档操作 - wrapAll() 方法 wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素.jQ ...
- [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别
原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul> <li title='苹果'>苹果</li> ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- 深入理解jQuery中live与bind方法的区别
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jquery中的$().each和$.each的区别
jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）
jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性 ...
随机推荐
- IntelliJ IDEA设置自动导入包
IntelliJ IDEA可以自动优化导入包,但是有多个同名的类位于不同的包时,需要自己手动使用Alt + Enter进行导入. Settings→Editor→General→Auto Import ...
- C++的头文件和实现文件分别写什么
在C++编程过程中,随着项目的越来越大,代码也会越来越多,并且难以管理和分析.于是,在C++中就要分出了头(.h)文件和实现(.cpp)文件,并且也有了Package的概念. 对于以C起步,C#作为& ...
- 51nod 1297 管理二叉树
一个初始为空的二叉搜索树T,以及1到N的一个排列P: {a1, a2, ..., aN}.我们向这个二叉搜索树T添加这些数,从a1开始, 接下来是 a2, ..., 以aN结束.在每一个添加操作后,输 ...
- C语言每日一题之No.9
再做决定之前,我还是做好自己该做的.我不希望几年后会悔恨自己为什么在最该努力的时候不愿意吃苦.尊敬的女王陛下,请接题: 一.题目:有已按升序排好顺序的字符串a,编写程序将字符串s中的每个字符按升序的规 ...
- RegisterClientScriptBlock 与 RegisterStartupScript 的区别
RegisterClientScriptBlock.RegisterStartupScript 都是注册一个脚本块. ClientScript.RegisterClientScriptBlock(th ...
- 236. Lowest Common Ancestor of a Binary Tree
Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...
- 我的Android最佳实践之—— Android启动画面的实现方法
本文实例讲述了Android启动画面的实现方法.分享给大家供大家参考.具体分析如下: 在应用程序中经常用到启动画面,会启动一个后台线程为主程序的运行准备资源.Android要实现启动画面可以这样做: ...
- EditPlus去行号/行标
正则表达式1: [0-9] ---------- > 1 2 3 正则表达式1: [0-9]+: ---------- > 1: 2: 3: 正 ...
- 如何获取客户端IP、操作系统、浏览器
request.getRemoteAddr();//获取IP request.getHeader("User-Agent");//获取操作系统信息.浏览器信息. protected ...
- [Serializable]的应用--注册码的生成，加密和验证
1.首先定义注册类RegisterEntity [Serializable] public class RegisterEntity { public string RegisterKey; publ ...