[jQuery教程]DOM节点的复制与替换(七)

目录
文章目录隐藏
  1. clone()方法
  2. replaceWith()和 replaceAll()替换方法
  3. wrap()方法
  4. unwrap()方法
  5. wrapAll()方法
  6. wrapInner()方法

[jQuery 教程]DOM 节点的复制与替换(七)

clone()方法

克隆节点是 DOM 的常见操作,jQuery 提供一个 clone 方法,专门用于处理 dom 的克隆。

.clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。

clone 方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过 clone(ture)传递一个布尔值 ture 用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了。

例如:

HTML 部分
<div></div>
JavaScript 部分
$("div").on('click', function() {//执行操作})
//clone 处理一
$("div").clone()   //只克隆了结构,事件丢失
//clone 处理二
$("div").clone(true) //结构、事件与数据都克隆

使用上就是这样简单,使用克隆的我们需要额外知道的细节:

  • clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如代码 $(this).clone().css(‘color’,’red’) 增加了一个颜色;
  • 通过传递 true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上;
  • clone()方法是 jQuery 扩展的,只能处理通过 jQuery 绑定的事件与数据;
  • 元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个。

replaceWith()和 replaceAll()替换方法

之前学习了节点的内插入、外插入以及删除方法,这节会学习替换方法 replaceWith

.replaceWith( newContent ):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

简单来说:用$()选择节点 A,调用 replaceWith 方法,传入一个新的内容 B(HTML 字符串,DOM 元素,或者 jQuery 对象)用来替换选中的节点 A

看个简单的例子:一段 HTML 代码

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

替换第二段的节点与内容:

$("p:eq(1)").replaceWith('替换第二段的内容')

通过 jQuery 筛选出第二个 p 元素,调用 replaceWith 进行替换,结果如下:

<div>
    <p>第一段</p>
    <a style="color:red">替换第二段的内容</a>'
    <p>第三段</p>
</div>

.replaceAll( target ) :用集合的匹配元素替换每个目标元素。

.replaceAll()和.replaceWith()功能类似,但是目标和源相反,用上述的 HTML 结构,我们用 replaceAll 处理:

$('替换第二段的内容').replaceAll('p:eq(1)')

总结如下:

  • .replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别;
  • .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序;
  • .replaceWith()方法,和大部分其他 jQuery 方法一样,返回 jQuery 对象,所以可以和其他方法链接使用;
  • .replaceWith()方法返回的 jQuery 对象引用的是替换前的节点,而不是通过 replaceWith/replaceAll 方法替换后的节点。

wrap()方法

如果要将元素用其他元素包裹起来,也就是给它增加一个父元素,针对这样的处理,JQuery 提供了一个 wrap 方法。

.wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个 HTML 结构。

简单的看一段代码:

<p>p 元素</p>

给 p 元素增加一个 div 包裹:

$('p').wrap('<div></div>')

最后的结构,p 元素增加了一个父 div 的结构:

<div>
    <p>p 元素</p>
</div>

.wrap( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

使用后的效果与直接传递参数是一样,只不过可以把代码写在函数体内部,写法不同而已

以第一个案例为例:

$('p').wrap(function() {
    return '
'; //与第一种类似,只是写法不一样 })

注意:

.wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个 DOM 结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。

unwrap()方法

我们可以通过 wrap 方法给选中元素增加一个包裹的父元素。相反,如果删除选中元素的父元素要如何处理 ?

jQuery 提供了一个 unwrap()方法 ,作用与 wrap 方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。

看一段简单案例:

<div>
    <p>p 元素</p>
</div>

我要删除这段代码中的 div,一般常规的方法会直接通过 remove 或者 empty 方法。

$('div').remove();

但是如果我还要保留内部元素 p,这样就意味着需要多做很多处理,步骤相对要麻烦很多,为了更便捷,jQuery 提供了 unwrap 方法很方便的处理了这个问题。

$('p').unwrap();

找到 p 元素,然后调用 unwrap 方法,这样只会删除父辈 div 元素了

结果:

<p>p 元素</p>

这个方法比较简单,也不接受任何参数,注意参考下案例的使用即可。

wrapAll()方法

wrap 是针对单个 dom 元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加一个父元素,针对这样的处理,JQuery 提供了一个 wrapAll 方法

.wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹 HTML 结构

简单的看一段代码:

<p>p 元素</p>
<p>p 元素</p>

给所有 p 元素增加一个 div 包裹

$('p').wrapAll('<div></div>')

最后的结构,2 个 P 元素都增加了一个父 div 的结构

<div>
    <p>p 元素</p>
    <p>p 元素</p>
</div>

.wrapAll( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

通过回调的方式可以单独处理每一个元素

以上面案例为例:

$('p').wrapAll(function() {
    return '
'; })

以上的写法的结果如下,等同于 warp 的处理了

<div>
    <p>p 元素</p>
</div>
<div>
    <p>p 元素</p>
</div>

注意:

.wrapAll()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个 DOM 结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。

wrapInner()方法

如果要将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery 提供了一个 wrapInner 方法

.wrapInner( wrappingElement ):给集合中匹配的元素的内部,增加包裹的 HTML 结构

听起来有点绕,可以用个简单的例子描述下,简单的看一段代码:

<div>p 元素</div>
<div>p 元素</div>

给所有元素增加一个 p 包裹

$('div').wrapInner('<p></p>')

最后的结构,匹配的 di 元素的内部元素被 p 给包裹了

<div>
    <p>p 元素</p>
</div>
<div>
    <p>p 元素</p>
</div>

.wrapInner( function ) :允许我们用一个 callback 函数做参数,每次遇到匹配元素时,该函数被执行,返回一个 DOM 元素,jQuery 对象,或者 HTML 片段,用来包住匹配元素的内容

以上面案例为例:

$('div').wrapInner(function() {
    return '<p></p>'; 
})

以上的写法的结果如下,等同于第一种处理了

<div>
    <p>p 元素</p>
</div>
<div>
    <p>p 元素</p>
</div>

注意:

当通过一个选择器字符串传递给.wrapInner() 函数,其参数应该是格式正确的 HTML,并且 HTML 标签应该是被正确关闭的。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [jQuery教程]DOM节点的复制与替换(七)

发表回复