.clone()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

clone 메서드는 지정한 요소를 깊은 복사합니다.
깊은 복사란 무엇일까요? 예제를 통해 알아봅시다.
제이쿼리 API 에는 Create a deep copy of the set of matched elements. 라고 설명되어있습니다.

+_+
예제 1
기본예제 - 이미지 clone 해보기
보기
소스
<style type="text/css">
    .css_test img {
        border-radius : 5px;
        margin : 3px;
        width : 200px;
    }
</style>

<button type="button" onclick="$('.css_test img:last').clone().appendTo( $('.css_test') )">이미지 clone() 하기</button>

<div class="css_test"><img src="http://cfile28.uf.tistory.com/image/2341424F54D735170D2966" /></div>
관련 CSS
jQuery

$( '.css_test img:last' ).clone().appendTo( $( '.css_test' ) )
- 클래스명이 css_test 인 요소의 마지막 이미지를 복사하여 다시 css_test 클래스 요소안에 추가합니다. (복제)

예제 2
deep copy 하기 예제
보기
아래 이미지는 onclick 이벤트가 동적으로 생성되어있습니다.
그리고 이미지를 클릭하면 경고창이 뜹니다.
deep copy 하기 버튼을 누르고 복사된 이미지를 클릭한것과
그냥 copy 버튼을 누르고 복사된 이미지를 클릭해보며 비교해 보세요.

소스
<style type="text/css">
    .css_test img {
        border-radius : 5px;
        cursor : pointer;
        margin : 3px;
        width : 200px;
    }
</style>

아래 이미지는 onclick 이벤트가 동적으로 생성되어있습니다.<br>
그리고 이미지를 클릭하면 경고창이 뜹니다.<br>
deep copy 하기 버튼을 누르고 복사된 이미지를 클릭한것과<br>
그냥 copy 버튼을 누르고 복사된 이미지를 클릭해보며 비교해 보세요.<br><br>
<button type="button" onclick="$('.css_test img:first').clone(true).appendTo( $('.css_test') )">deep copy 하기 - clone(true)</button>
<button type="button" onclick="$('.css_test img:first').clone().appendTo( $('.css_test') )">그냥 copy 하기 - clone()</button>

<div class="css_test"><img src="http://cfile4.uf.tistory.com/image/26138D4854D73515223B87" /></div>

<script type="text/javascript">
    // 이미지에 클릭이벤트 동적 생성
    $('.css_test img').bind('click', function(){
            alert('우후훗~');
    });
</script>
관련 CSS
jQuery

clone( true )  -  true 옵션을 사용하면 동적으로 생성된 이벤트까지 복제하는 deep copy 가 됩니다.
해당요소의 근본 부터 복사한다고 해야할까요? ^^;

- 기본값은 지정하지 않으면 false 이므로 사용시 주의해 주세요.

예제 3
일반적인 onclick 속성이 있는 경우는
보기
이미지에 onclick 이벤트 속성이 이미 있는경우는 deep copy 하지 않아도 됩니다.
소스
<style type="text/css">
    .css_test img {
        border-radius : 5px;
        cursor : pointer;
        margin : 3px;
        width : 200px;
    }
</style>

이미지에 onclick 이벤트 속성이 이미 있는경우는 deep copy 하지 않아도 됩니다.<br>

<button type="button" onclick="$('.css_test img:first').clone().appendTo( $('.css_test') )">그냥 copy 하기 - clone()</button>

<div class="css_test"><img src="http://cfile25.uf.tistory.com/image/22528D4C550B9B3A03BA1D" onclick="alert('우후훗~')" /></div>
관련 CSS
jQuery
- 동적으로 생성된 것까지 복제해야 할 경우에 clone( true ) 을 사용하면 됩니다.
- 이런 예제와 같은 경우엔 굳이 사용하지 않아도 되지요.
예제 4
조금 있어보이는(?) 예제
보기
소스
<style type="text/css">
    .css_test img {
        border-radius : 5px;
        margin : 3px;
        width : 300px;
    }
</style>

<button type="button" onclick="j_test()">눌러 보세용</button>

<div class="css_test"><img src="http://cfile8.uf.tistory.com/image/26428A38550B92391B3212"" /></div>

<script type="text/javascript">
    function j_test(){
        $('.css_test img:first').clone().hide().appendTo( $('.css_test') ).fadeIn(1000);
    }
</script>
관련 CSS
jQuery

- 복제되어 추가되어지는 요소에 효과를 주었습니다.

$( '.css_test img:first' ).clone().hide().appendTo( $('.css_test') ).fadeIn(1000)
- 복제하여 바로 숨기고 나중에 서서히 보이도록 했습니다.
- clone 메서드가 복제된 요소를 반환하기 때문에 가능한 방법입니다.
- 제이쿼리를 열심히 배워 몸이편해져야 하는 이유이기도 합니다..(?)

관련 메서드 : .fadeIn() .hide()

예제 5
조금 있어보이는(?) 예제2
보기
소스
<style type="text/css">
    .css_test img {
        border-radius : 5px;
        margin : 3px;
        width : 200px;
        position : relative;
    }
</style>

<button type="button" onclick="j_test()">눌러 보세용</button>

<div class="css_test al"><img src="http://cfile25.uf.tistory.com/image/21721038550B923C0491DE" /></div>

<script type="text/javascript">
    function j_test(){
        // 보기편하게 여러줄로 코딩
        $('.css_test img:first')
        .clone()
        .fadeTo(0) // 안보이게 만들기
        .css( { top:-400, left:-400 } ) // 위치 지정
        .appendTo( $('.css_test') )
        .animate({ top:0, left:0, opacity:1 }, 1000) // 애니메이션 (위치이동 그리고 서서히 보이게)
    }
</script>
관련 CSS
jQuery
- 적절한 코딩으로 멋있어 보이게.
- 제이쿼리는 조합과 응용이 핵심입니다. 그리고 최대한 간단하게 !

관련 메서드 : .fadeTo() .css() .animate()
jQuery 홈페이지 .clone() API 문서 : http://api.jquery.com/clone/