zoukankan      html  css  js  c++  java
  • DOM节点的复制与替换

    clone()

    detach是剪切的话,clone就是复制了

    clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了。

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

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

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

    元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。意思是不会copy元素数据和数组(主要是内存上),所有copy的元素都共享一个,如果改变其中一个的,就等于改变了所有的。

    replaceWith()和replaceAll()

    $("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
    
    $('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
    
    • .replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别
    • .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
    • html()只是把所匹配到的节点里的内容给替换掉,而replaceWith()是把匹配到的这节点替换掉

    wrap()包裹

    将元素用其他元素包裹起来,也就是给它增加一个父元素

    $('p').wrap('<div></div>')
    //等同于
    $('p').wrap(function() {
        return '<div></div>';
    })
    

    得到:

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

    unwrap()

    将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。例如:

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

    删除这段代码中的div,一般常规的方法会直接通过remove或者empty方法,但是如果要保留内部元素p,使用:
    $('p').unwarp()
    找到p元素,然后调用unwarp方法,这样只会删除父辈div元素了。

    wrapAll()

    wrap是针对单个dom元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加一个父元素

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

    得到:

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

    如果是用$('p').wrap('

    ')
    得到:

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

    wrapInner()

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

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

    得到:

    <div>
        <p>p元素</p>
    </div>
    <div>
        <p>p元素</p>
    </div>
    
  • 相关阅读:
    c++ *.h和*.cpp在编译中的作用
    test
    DOM Tree
    SecureCRT
    趣味盒1
    数据结构笔试:前缀表达式|后缀表达式
    Shell 文件包含
    Shell 输入/输出重定向
    Shell 函数
    Shell 流程控制
  • 原文地址:https://www.cnblogs.com/zhaozihan/p/7295310.html
Copyright © 2011-2022 走看看