DOM 복사 clone()을 이해하는 방법
- 一个新手원래의
- 2017-09-30 09:23:591483검색
Clone 노드는 DOM의 일반적인 작업입니다. jQuery는 DOM 복제를 처리하는 데 특별히 사용되는 복제 방법을 제공합니다.
.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
복제 방법은 비교적 간단합니다. 노드를 복제하기만 하면 되지만 주의가 필요합니다. , 노드에 이벤트나 데이터 등이 있는 경우 다른 처리를 위해 clone(ture)을 통해 부울 값 ture를 전달하여 지정해야 하며, 이를 통해 간단한 노드 구조를 복제할 뿐만 아니라 그에 수반되는 이벤트 및 데이터도 복제합니다. 예:
HTML部分<p></p>JavaScript部分
$("p").on('click', function() {//执行操作})
//clone处理一
$("p").clone() //只克隆了结构，事件丢失
//clone处理二
$("p").clone(true) //结构、事件与数据都克隆복제본을 사용할 때 추가 세부정보를 알아야 합니다.
- clone() 메서드를 문서에 삽입하기 전에 복제된 요소를 수정할 수 있습니다. 또는 오른쪽 코드와 같은 요소 콘텐츠에서 $(this).clone().css('color','red')에 색상을 추가했습니다
- true를 전달하면 모든 이벤트 핸들러가 원래 요소에 바인딩됩니다. 복제된 요소에 복사됩니다
- clone() 메서드는 jQuery 확장이며 jQuery를 통해 바인딩된 이벤트 및 데이터만 처리할 수 있습니다.
- 요소 데이터(data) 내의 개체 및 배열은 복사되지 않고 계속됩니다. 복제된 요소와 원본 요소가 공유합니다. 딥 카피를 위한 모든 데이터는 각
- 사례 분석:
<!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 p,
.right p {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
</style></head><body>
<h2>通过clone克隆元素</h2>
<p class="left">
<p class="aaron1">点击,clone浅拷贝</p>
<p class="aaron2">点击,clone深拷贝,可以继续触发创建</p>
</p>
<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>에 대해 수동으로 복사해야 합니다.위 내용은 DOM 복사 clone()을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JQuery 선택기에는 어떤 유형이 있나요?다음 기사：JQuery 선택기에는 어떤 유형이 있나요?