jQuery DOM节点的复制、替换

jindong 发布于2019-08-21 11:54 / 1216人阅读

摘要：拷贝克隆节点是的常见操作，提供一个方法，专门用于处理的克隆方法深度复制所有匹配的元素集合，包括所有匹配元素匹配元素的下级元素文字节点。

拷贝clone()

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

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

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

HTML部分


JavaScript部分
$("div").on("click", function() {//执行操作})

//clone处理一
$("div").clone()        //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true)        //结构、事件与数据都克隆

克隆额外细节

clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如下述代码我 $(this).clone().css("color","red") 增加了一个颜色

通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上

clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据

元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个





    
    
    
    



    通过clone克隆元素
    
        点击,clone浅拷贝
        点击,clone深拷贝,可以继续触发创建

替换replaceWith()和replaceAll() .replaceWith( newContent )

用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。简单来说：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点A

一段简单的HTML代码例子：


    第一段
    第二段
    第三段

替换第二段的节点与内容

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

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


    第一段
    替换第二段的内容"
    第三段

.replaceAll( target )

用集合的匹配元素替换每个目标元素
.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理

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

总结

.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别

.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用

.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点





    
    
    
    



    replaceWith()和replaceAll()
    
        
        
    
    
        
            第一段
            第二段
            第三段
        
        
            第四段
            第五段
            第六段

包裹wrap()方法

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

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

p元素
// 给p元素增加一个div包裹
$("p").wrap("")
// 最后的结构，p元素增加了一个父div的结构

    p元素

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

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

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

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





    
    
    
    



    DOM包裹wrap()方法
    
        
        
    
    
        p元素
        p元素
    
    
        a元素
        a元素

包裹unwrap()方法

我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?
jQuery提供了一个unwrap()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置


    p元素

// 要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法
// $("div").remove();
// 但如果还保留内部元素p，就意味着需要更多处理，unwrap方法则能很方便的处理了这个问题
$("p").unwrap();
//找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了
//结果：p元素

包裹wrapAll()方法

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

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

p元素

// 给所有p元素增加一个div包裹 $("p").wrapAll("

") //最后的结构，2个P元素都增加了一个父div的结构

p元素

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
通过回调的方式可以多带带处理每一个元素

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

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


    p元素


    p元素

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

包裹wrapInner()方法

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

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

p元素

给所有元素增加一个p包裹 $("div").wrapInner("

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

p元素

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

$("div").wrapInner(function() {
    return ""; 
})
// 以上的写法的结果如下，等同于第一种处理了

    p元素


    p元素

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





    
    
    
    




    DOM包裹wrapInner()方法
    
        点击,通过wrapInner方法给所有div元素增加内部父容器p
        点击,通过wrapInner的回调方法给每个div元素增加内部父容器a
    
    
        p元素
        p元素
    
    
        a元素
        a元素

云服务器 GPU云服务器复制dom节点 dom的节点类型 DOM复制 jquery_dom

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

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

jQuery基础（二）DOM篇

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

Harpsichord1207 2019-08-22 10:42 评论0 收藏0
纯干货！jQuery之DOM操作解析

摘要：本人的两篇原创文章纯干货一切关于选择器和纯干货之操作解析，发布不到个月，就被博客园某账号认领为他的原创，并且他还精心地将慕课网原创文章的版权声明和文章中关于我的点点滴滴，删除地干干净净，很专业。　　本人的两篇原创文章纯干货！一切关于jquery选择器和纯干货！jQuery之DOM操作解析，发布不到1个月，就被博客园某账号认领为他的原创，并且他还精心地将慕课网原创文章的版权声明和文...

yzd 2019-08-21 11:17 评论0 收藏0
jQuery入门笔记之（二）文档对象模型

摘要：删除指定的属性，这个方法就不可以使用匿名函数，传递和均无效。遍历对象数组索引，鍵，属性名属性值，值相当于遍历原生对象数组时，为元素。在使用使用时，可以使用传入匿名函数的方法，实现由默认到几个之间的切换。转自个人博客基础 DOM 和和 CSS 一. 设置元素及内容我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行 DOM 的操作。...

FleyX 2019-08-19 17:17 评论0 收藏0
前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）

摘要：已存在节点是移动，新节点是新增。链式操作对象为。将他们的父节点移除。从中删除所有匹配的元素。一个布尔值或者指示事件处理函数是否会被复制。以上版本默认值是一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/...

taoszu 2019-08-02 15:24 评论0 收藏0
前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）

摘要：已存在节点是移动，新节点是新增。链式操作对象为。将他们的父节点移除。从中删除所有匹配的元素。一个布尔值或者指示事件处理函数是否会被复制。以上版本默认值是一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/...

tigerZH 2019-08-23 18:22 评论0 收藏0