>  기사  >  웹 프론트엔드  >  DOM 복사 clone()을 이해하는 방법

DOM 복사 clone()을 이해하는 방법

一个新手
一个新手원래의
2017-09-30 09:23:591503검색

Clone 노드는 DOM의 일반적인 작업입니다. jQuery는 DOM 복제를 처리하는 데 특별히 사용되는 복제 방법을 제공합니다.


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

복제 방법은 비교적 간단합니다. 노드를 복제하기만 하면 되지만 주의가 필요합니다. , 노드에 이벤트나 데이터 등이 있는 경우 다른 처리를 위해 clone(ture)을 통해 부울 값 ture를 전달하여 지정해야 하며, 이를 통해 간단한 노드 구조를 복제할 뿐만 아니라 그에 수반되는 이벤트 및 데이터도 복제합니다. 예:

HTML部分<p></p>JavaScript部分
$("p").on(&#39;click&#39;, function() {//执行操作})

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

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

복제본을 사용할 때 추가 세부정보를 알아야 합니다.

    clone() 메서드를 문서에 삽입하기 전에 복제된 요소를 수정할 수 있습니다. 또는 오른쪽 코드와 같은 요소 콘텐츠에서 $(this).clone().css('color','red')에 색상을 추가했습니다
  • true를 전달하면 모든 이벤트 핸들러가 원래 요소에 바인딩됩니다. 복제된 요소에 복사됩니다
  • clone() 메서드는 jQuery 확장이며 jQuery를 통해 바인딩된 이벤트 및 데이터만 처리할 수 있습니다.
  • 요소 데이터(data) 내의 개체 및 배열은 복사되지 않고 계속됩니다. 복제된 요소와 원본 요소가 공유합니다. 딥 카피를 위한 모든 데이터는 각
  • 사례 분석:

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left p,
    .right p {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style></head><body>
    <h2>通过clone克隆元素</h2>
    <p class="left">
        <p class="aaron1">点击,clone浅拷贝</p>
        <p class="aaron2">点击,clone深拷贝,可以继续触发创建</p>
    </p>
    <script type="text/javascript">
        //只克隆节点
        //不克隆事件        $(".aaron1").on(&#39;click&#39;, function() {
            $(".left").append( $(this).clone().css(&#39;color&#39;,&#39;red&#39;) )
        })    </script>

    <script type="text/javascript">
        //克隆节点
        //克隆事件        $(".aaron2").on(&#39;click&#39;, function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css(&#39;color&#39;,&#39;blue&#39;) )
        })    </script></body></html>
에 대해 수동으로 복사해야 합니다.

위 내용은 DOM 복사 clone()을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.