jQuery DOM 작업 복사본

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

.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)의 개체 및 배열은 복사되지 않으며 복제된 요소와 원본 요소 간에 계속 공유됩니다. Deep Copy의 모든 데이터는 수동으로 복사해야 합니다

아래 예를 작성해 보겠습니다.

<!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 div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style>
</head>

<body>
    <div class="left">
        <div class="aaron1">点击,clone浅拷贝</div>
        <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
    </div>
    <script type="text/javascript">
        //只克隆节点   //不克隆事件
        $(".aaron1").on('click', function() {
            $(".left").append( $(this).clone().css('color','red') )
        })
    </script>

    <script type="text/javascript">
        //克隆节点   //克隆事件
        $(".aaron2").on('click', function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css('color','blue') )
        })
    </script>
</body>

</html>

위 코드를 보면 첫 번째 div를 클릭하면 복사되지만 클릭하여 복사하면 효과없으니 한번 드셔보세요

지속적인 학습

새로운 파일

<!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 div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; background: #bbffaa; } </style> </head> <body> <div class="left"> <div class="aaron1">点击,clone浅拷贝</div> <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div> </div> <script type="text/javascript"> //只克隆节点 //不克隆事件 $(".aaron1").on('click', function() { $(".left").append( $(this).clone().css('color','red') ) }) </script> <script type="text/javascript"> //克隆节点 //克隆事件 $(".aaron2").on('click', function() { console.log(1) $(".left").append( $(this).clone(true).css('color','blue') ) }) </script> </body> </html>

제출하다 코드 재설정

자동운전