DOM node_jquery를 복사하는 JQuery의 방법-JS 튜토리얼-php.cn

DOM node_jquery를 복사하는 JQuery의 방법

WBOY

풀어 주다： 2016-05-16 15:55:56

원래의

1313명이 탐색했습니다.

이 문서의 예에서는 JQuery가 DOM 노드를 복사하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

노드 복사는 많은 쇼핑 웹사이트의 효과와 같이 일반적으로 사용되는 DOM 작업 중 하나입니다. 사용자는 제품 아래의 "선택" 버튼을 클릭하여 해당 제품을 구매할 수 있을 뿐만 아니라 마우스를 올려 장바구니에 담으세요. 이 상품 드래그 기능은 복사 노드를 사용하여 사용자가 선택한 상품의 노드 요소를 복사하고 마우스로 이동하여 쇼핑 효과를 얻습니다.

HTML DOM 구조는 다음과 같습니다.

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='C编程'>简单易懂的C编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery'>简单易懂的JQuery编程</li>
</ul>

로그인 후 복사

요소를 클릭한 후 다른

요소를 복사해야 하는 경우 clone() 메서드를 사용하여 완료할 수 있습니다.

JQuery 코드는 다음과 같습니다.

$(function(){
  $(".nm_ul li").click(function(){
    $(this).clone(true).appendTo(".nm_ul");
    // 复制当前点击的节点，并将它追加到<ul>元素
  }) 
});

로그인 후 복사

페이지에서 항목을 클릭하면 해당 항목에 대한 새 노드가 목록 하단에 나타납니다.

노드를 복사한 후 복사된 새 요소에는 아무런 동작이 없습니다. 복사 기능(이 경우 클릭 이벤트)도 포함하기 위해 새 요소가 필요한 경우 다음 JQuery 코드를 사용할 수 있습니다.

$("ul li").click(function(){ 
 $(this).clone(true).appendTo("ul"); // 注意参数true 
 //可以复制自己，并且他的副本也有同样功能。 
})

로그인 후 복사

clone() 메서드에 true 매개변수가 전달되는데, 이는 요소를 복사할 때 해당 요소에 바인딩된 이벤트도 복사된다는 의미입니다. 따라서 요소의 복사본에도 복사 기능이 있습니다(이 경우 클릭 이벤트).

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.