Jquery[제이쿼리] clone() 메서드 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] clone() 메서드를 배워보겠습니다.

이렇게 준비해보았습니다.!^ㅡ^/

실행화면입니다.
그럼 시작해볼께요~

=============================== 
$('li').on("click",function(){
   alert("clone()메서드 예제 이벤트 확인");
  });
=============================== 
<li>태그가 click되면
alert()메서드로 "clone()메서드 예제 이벤트 확인" 라는 경고창이 뜨도록 하였습니다.

실행 화면입니다.
여기까지는 자주해서 쉽죵?

=============================== 
$('.b1').on("click",function(){
   $('li:first').clone().appendTo('ul').css("color","blue");
  });
=============================== 
class b1가 click되면 <== "clone()"버튼입니다.
<li>태그의 first[첫번째꺼]를 clone()메서드를 이용하여 복사합니다.
그리고 appendTo()메서드를 이용하여 복사한 내용을 <ul>태그안에 추가를 하도록하였습니다.
그뒤 복사한 내용의 css를 변경하였습니다.

clone()버튼을 클릭하여 만들어진 <li>태그를 아까처럼 클릭하여보면
"clone()메서드 예제 이벤트 확인" 이라는 경고창 메시지가 안뜨는걸 확인할수있답니다.
이번에는 이벤트까지 복사해보겠습니다.

=============================== 
$('.b2').on("click",function(){
   $('li:first').clone(true).appendTo('ul').css("color","green");
  });
=============================== 
class b2가 click되면 <== "clone(true)"버튼입니다.
위에 코드랑 비슷하지만 다른점은 clone()에서 clone(true)로 변경됬답니다.
그리고 color도 green으로 다르게 설정하였습니다.

※clone()란 지정한대상을 복사한다고 생각하면된답니다.
형식은 clone([withDataAndEvents]) 이렇게 구성되어있습니다.
withDataAndEvents부분은 아래구성요소 즉 이벤트요소도 복사할것인지를
물어보는 공간이라고 생각하시면된답니다.
기본적으로 false로 되어있습니다.
[ ]는 필요에 따라 사용하시면된답니다.
예)clone()/clone(true)
※appendTo란 지정한대상에 추가하는 메서드입니다. 다음에 배워보도록할께요

그래도 잘모르겠다는분들은 !!
http://api.jquery.com/clone/#clone-withDataAndEvents-deepWithDataAndEvents

여기서 확인해보세요^ㅡ^/

clone(true)버튼을 클릭하여 만들어진 <li>태그를 아까처럼 클릭하여보면
처음에있던 <li>태그처럼 "clone()메서드 예제 이벤트 확인" 이라는 경고창이 뜨는걸 확인할수있답니다.

오늘은 제이쿼리[jquery] clone() 메서드를 배워보았습니다.
그럼 다음에 또만나요~