jQuery 공작소 : .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="https://t1.daumcdn.net/cfile/tistory/232E7438555ABF4020" /></div>
.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="https://t1.daumcdn.net/cfile/tistory/232E7438555ABF4020" /></div>
관련 CSS
jQuery
$( '.css_test img:last' ).clone().appendTo( $( '.css_test' ) )
- 클래스명이 css_test 인 요소의 마지막 이미지를 복사하여 다시 css_test 클래스 요소안에 추가합니다. (복제)
예제 2
deep copy 하기 예제
보기
아래 이미지는 onclick 이벤트가 동적으로 생성되어있습니다.
그리고 이미지를 클릭하면 경고창이 뜹니다.
deep copy 하기 버튼을 누르고 복사된 이미지를 클릭한것과
그냥 copy 버튼을 누르고 복사된 이미지를 클릭해보며 비교해 보세요.
그리고 이미지를 클릭하면 경고창이 뜹니다.
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="https://t1.daumcdn.net/cfile/tistory/2212AF4854D7351522" /></div>
<script type="text/javascript">
// 이미지에 클릭이벤트 동적 생성
$('.css_test img').bind('click', function(){
alert('우후훗~');
});
</script>
.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="https://t1.daumcdn.net/cfile/tistory/2212AF4854D7351522" /></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="https://t1.daumcdn.net/cfile/tistory/22723C38550B923D04" onclick="alert('우후훗~')" /></div>
.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="https://t1.daumcdn.net/cfile/tistory/22723C38550B923D04" 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="https://t1.daumcdn.net/cfile/tistory/24242C3D552F50A61B"" /></div>
<script type="text/javascript">
function j_test(){
$('.css_test img:first').clone().hide().appendTo( $('.css_test') ).fadeIn(1000);
}
</script>
.css_test img {
border-radius : 5px;
margin : 3px;
width : 300px;
}
</style>
<button type="button" onclick="j_test()">눌러 보세용</button>
<div class="css_test"><img src="https://t1.daumcdn.net/cfile/tistory/24242C3D552F50A61B"" /></div>
<script type="text/javascript">
function j_test(){
$('.css_test img:first').clone().hide().appendTo( $('.css_test') ).fadeIn(1000);
}
</script>
관련 CSS
jQuery
예제 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="https://t1.daumcdn.net/cfile/tistory/22723C38550B923D04" /></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_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="https://t1.daumcdn.net/cfile/tistory/22723C38550B923D04" /></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
jQuery 홈페이지 .clone() API 문서 : http://api.jquery.com/clone/