jQuery中 wrap() wrapAll() 与 wrapInner()的区别

MyFaith 发布于2019-08-21 10:21 / 1891人阅读

摘要：文档操作方法方法使用指定的内容或元素，来包裹每个被选元素中的所有内容。这是用来比较的原代码我是占位子的。方法结果从图中可以看出标签包围了每个匹配的标签。当然，最后看起来，三个方法的效果是一样的。

今晚看书的时候发现jQuery有三个包裹节点的方法，百度了一下jQuery wrap() / wrapAll() / wrapInner()，果然搜索结果 W3School的文档说明是排第一的。

可是，W3School的解释是这样的：

jQuery 文档操作 - wrap() 方法

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

jQuery 文档操作 - wrapAll() 方法

  wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。

jQuery 文档操作 - wrapInner() 方法

  wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。

我读的书少，看见这样的解释不能立即解决我的困惑真的很烦。

还是动手最实际。

这是用来比较的原代码：

我是占位子的。

wrap()方法

$("p").wrap("");

结果：

从图中可以看出strong标签包围了每个匹配的p标签。

wrapAll()方法

$("p").wrapAll("");

结果：

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

wrapInner()方法

$("p").wrapInner("");

结果：

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

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

点到即止。

服务器托管 idc机房托管中SP与DP的区别 javascript和jquery的区别 jquery和javascript的区别空间与域名的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85371.html

jQuery DOM节点的复制、替换

摘要：拷贝克隆节点是的常见操作，提供一个方法，专门用于处理的克隆方法深度复制所有匹配的元素集合，包括所有匹配元素匹配元素的下级元素文字节点。拷贝clone() 克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆 .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需...

jindong 2019-08-21 11:54 评论0 收藏0
jQuery基础（二）DOM篇

摘要：将匹配元素集合的父级元素删除，保留自身和兄弟元素，如果存在在原来的位置。方法查找指定元素集合中每一个元素的同辈元素。每次回调函数执行时，会传递当前循环次数作为参数从开始计数。 DOM节点的创建先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）创建流程比较简单，大体如下：创建节点(常见的：元素、属性和文本) 添加节点的一些属性加入到文档中流程中涉及的一...

Harpsichord1207 2019-08-22 10:42 评论0 收藏0
JQuery干货篇之插入元素

摘要：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。当需要移走一个元素，不久又将该元素插入时，这种方法很有用。实例从中移除集合中匹配元素的所有子节点。 JQuery干货篇之插入元素本次使用的html,css还是我上一篇的源代码，详情请看上一篇文章分类插入子元素：append,prepend ,appendTo,prependTo 封装包裹元素：wrap,wrap...

jemygraw 2019-08-29 12:27 评论0 收藏0
JQuery干货篇之插入元素

摘要：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。当需要移走一个元素，不久又将该元素插入时，这种方法很有用。实例从中移除集合中匹配元素的所有子节点。 JQuery干货篇之插入元素本次使用的html,css还是我上一篇的源代码，详情请看上一篇文章分类插入子元素：append,prepend ,appendTo,prependTo 封装包裹元素：wrap,wrap...

songze 2019-08-20 15:58 评论0 收藏0