DOM 기반 비움과 제거의 차이점에 대한 자세한 예
- 小云云원래의
- 2017-12-29 09:44:151415검색
이 글은 주로 DOM 노드 삭제에 따른 비움과 제거의 차이점에 대한 글을 제공합니다(자세한 설명). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
페이지에서 노드를 제거하는 것은 개발자에게 일반적인 작업입니다. jQuery는 이 문제를 해결하기 위한 여러 가지 방법을 제공합니다. 여기서는 비어 있는 메서드와 제거 메서드를 자세히 살펴보겠습니다.
empty 이름에서 알 수 있듯이 비어 있는 메서드는 다릅니다. delete 메소드에서는 지정된 요소의 모든 하위 노드만 제거하기 때문에 약간 다릅니다.
이 방법은 하위 요소(및 기타 하위 요소)를 제거할 뿐만 아니라 요소 내의 텍스트도 제거합니다. 지침에 따라 요소의 모든 텍스트 문자열은 요소의 하위 노드로 간주되기 때문입니다. 아래 HTML을 살펴보세요.
<p class="hello"><p>这是p标签</p></p>
빈 메소드를 통해 내부 p의 모든 요소를 제거하면 내부 HTML 코드만 지워지지만 마크업은 여전히 DOM에 남아 있습니다.
//通过empty处理
$('.hello').empty()
//结果：<p>这是p标签</p>被移除
<p class="hello"></p>
다음을 통해 현재 p 요소 아래의 요소를 제거합니다. 비어 있음 모든 p 요소, 그러나 id=test인 p 요소는 삭제되지 않았습니다.
<!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>
p {
background: #bbffaa;
width: 300px;
}
</style>
</head>
<body>
<h2>通过empty移除元素</h2>
<p id="test">
<p>p元素1</p>
<p>p元素2</p>
</p>
<button>点击通过jQuery的empty移除元素</button>
<script type="text/javascript">
$("button").on('click', function() {
//通过empty移除了当前p元素下的所有p元素
//但是本身id=test的p元素没有被删除
$("#test").empty()
})
</script>
</body>
</html>
remove는 비어 있는 것과 동일하며 요소를 제거하는 방법이지만 제거는 요소 자체와 요소 내부의 모든 것을 제거합니다. 요소와 관련된 이벤트 및 jQuery 데이터.
예를 들어 노드의 경우 클릭 이벤트를 바인딩합니다
<p class="hello"><p>这是P段落</p></p>
$('.hello').on("click",fn)
remove 메소드를 사용하지 않고 이 노드를 삭제하는 것은 실제로 매우 간단하지만 동시에 이벤트가 삭제되어야 합니다. 이는 "메모리"를 방지하기 위한 것입니다. 누수"이므로 프런트엔드 개발자는 이벤트가 몇 개 연결되어 있는지 확인하고 사용하지 않을 때는 반드시 파기해야 합니다.
remove 메소드를 통해 p와 모든 내부 요소를 제거합니다. 이벤트 파기 메소드는 제거 내에서 자동으로 작동됩니다. ,
//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁
remove 표현식 매개변수를 사용하는 것은 매우 간단합니다.
비어 있는 것보다 제거의 장점은 선택기 표현식을 전달하여 제거할 일치 요소 세트를 필터링할 수 있고 지정된 노드를 선택적으로 삭제할 수 있다는 것입니다
$()를 사용하여 동일한 요소 그룹을 선택한 다음 제거()를 통해 필터링 규칙을 전달하여
<!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>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
</style>
</head>
<body>
<h2>通过jQuery remove方法移除元素</h2>
<p class="test1">
<p>p元素1</p>
<p>p元素2</p>
</p>
<p class="test2">
<p>p元素3</p>
<p>p元素4</p>
</p>
<button>通过点击jQuery的empty移除元素</button>
<button>通过点击jQuery的empty移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的p节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
})
</script>
</body>
</html>
지정된 요소를 제거해야 할 때 jQuery는 빈 두 가지 메서드를 제공합니다. () 및 제거([expr]), 둘 다 삭제 요소이지만 둘 사이에는 여전히 차이점이 있습니다.
지정된 요소를 제거해야 할 때 jQuery는 빈() 및 제거([라는 두 가지 메서드를 제공합니다. expr]) 둘 다 요소를 삭제하지만 둘 다 여전히 차이가 있습니다
empty 메서드
엄밀히 말하면,empty() 메서드는 노드를 삭제하지 않지만 노드를 지웁니다. 요소
empty는 자체 노드를 삭제할 수 없습니다
remove 메소드
이 노드와 이 노드에 포함된 모든 하위 노드가 동시에 삭제됩니다.
지정된 컬렉션의 요소를 삭제하려면 필터링 표현식을 제공하세요
위는 다음과 같습니다. 둘 사이의 차이점은 아래 코드 부분을 통해 좀 더 깊이 이해해 보도록 하겠습니다
<!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;
}
.left p,
.right p {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left p {
background: #bbffaa;
}
.right p {
background: yellow;
}
</style>
</head>
<body>
<h2>通过empty与remove移除元素</h2>
<p class="left">
<button id="bt1">点击通过jQuery的empty移除内部P元素</button>
<button id="bt2">点击通过jQuery的remove移除整个节点</button>
</p>
<p class="right">
<p id="test1">
<p>p元素1</p>
<p>p元素2</p>
</p>
<p id="test2">
<p>p元素3</p>
<p>p元素4</p>
</p>
</p>
<script type="text/javascript">
$("#bt1").on('click', function() {
//删除了2个p元素，但是本着没有删除
$("#test1").empty()
})
$("#bt2").on('click', function() {
//删除整个节点
$("#test2").remove()
})
</script>
</body>
</html> 관련 추천:
php의 is_null, isset, empty 함수 소개
위 내용은 DOM 기반 비움과 제거의 차이점에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!