detach(), hide() 및 remove()의 차이점 - jQuery
이 세 가지의 기능적 차이는 무엇입니까?jQuery메소드:
- 떼어놓다
- 숨다
- 치우다
hide() 일치하는 요소의 CSS를 설정합니다.display에의 재산.none.
remove() DOM에서 일치하는 요소를 완전히 제거합니다.
detach() 마치remove(), 그러나 저장된 데이터와 일치하는 요소와 연관된 이벤트는 유지합니다.
분리된 요소를 DOM에 다시 삽입하려면 반환된 요소를 삽입하기만 하면 됩니다.jQuery로부터 시작한detach():
var span = $('span').detach();
...
span.appendTo('body');
연필로 쓰여진 메모가 있는 테이블 위의 종이 한 장을 상상해 보세요.
hide-> 옷을 입히다empty-> 지우개로 노트를 제거합니다.detach-> 종이를 손에 쥐고 앞으로의 계획이 무엇이든 간에 그곳에 보관합니다.remove-> 종이를 잡고 쓰레기통에 던집니다.
표는 현재 DOM 공간을 나타내고, 용지는 요소를 나타내며, 노트는 요소의 내용(자아 노드)을 나타냅니다.
조금 단순화되고 완전히 정확하지는 않지만 이해하기 쉽습니다.
hide()일치하는 요소의 표시를 없음으로 설정합니다.
detach()모든 텍스트 및 자식 노드를 포함하여 일치하는 요소를 제거합니다.
이 메서드는 요소와 관련된 모든 데이터를 저장하므로 요소의 데이터와 이벤트 핸들러를 복원하는 데 사용할 수 있습니다.
remove()또한 모든 텍스트 및 자식 노드를 포함하여 일치하는 요소를 제거합니다.
그러나 이 경우 요소의 데이터만 복원할 수 있고 이벤트 핸들러는 복원할 수 없습니다.
jQuery에서는 DOM에서 요소를 제거하는 세 가지 방법이 있습니다.이 세가지 방법은.empty(),.remove(),그리고..detach(). 이러한 방법은 모두 DOM에서 요소를 제거하는 데 사용되지만 모두 다릅니다.
.숨기다
일치하는 요소를 숨깁니다.매개 변수가 없는 .hide() 메서드는 HTML 요소를 숨기는 가장 간단한 방법입니다.
$(".box").hide();
.빈
.empty() 메서드는 선택한 요소에서 모든 하위 노드와 컨텐츠를 제거합니다.이 메서드는 요소 자체 또는 요소의 특성을 제거하지 않습니다.
메모
.empty() 메서드는 메모리 누출을 방지하기 위한 인수를 허용하지 않습니다.jQuery는 요소 자체를 제거하기 전에 하위 요소에서 데이터 및 이벤트 핸들러와 같은 다른 구성 요소를 제거합니다.
예
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>
그러면 Hai 텍스트가 삭제된 DOM 구조가 나타납니다.
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>
내부에 중첩된 요소가 몇 개 있는지 여부<div class="hai">, 그들도 제거될 겁니다
.제거
.remove() 메서드는 모든 텍스트 및 하위 노드를 포함하여 선택한 요소를 제거합니다.이 메서드는 선택한 요소의 데이터와 이벤트도 제거합니다.
메모
요소 자체와 요소 내부의 모든 것을 제거하려면 .remove()를 사용합니다.또한 요소와 연관된 모든 바인딩된 이벤트 및 jQuery 데이터가 제거됩니다.
예
다음 html을 고려합니다.
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").remove();
</script>
이렇게 되면 다음과 같은 DOM 구조가 발생합니다.<div>요소 삭제됨:
<div class="content">
<div class="goodevening">good evening</div>
</div
내부에 중첩된 요소가 몇 개 있는지 여부<div class="hai"> 데이터 또는 와 같은 다른 구성 요소도 됩니다데이터 또는 이벤트 핸들러와 같은 다른 jQuery 구조체도 지워집니다.
.detach()
.detach() 메서드는 모든 텍스트 및 하위 노드를 포함하여 선택한 요소를 제거합니다.그러나 데이터와 이벤트는 보관합니다.이 메서드는 제거된 요소의 복사본도 보관하므로 나중에 요소를 다시 삽입할 수 있습니다.
메모
.detach() 메서드는 제거된 요소를 나중에 DOM에 다시 삽입할 때 유용합니다.
예
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hai!</p>Good <p>Afternoo</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>
더 자세한 정보는 http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html 를 방문하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var $span;
$span = $("<span>");
$span.text("Ngoc Xuan");
function addEvent() {
$span.on("click",function(){
alert("I'm Span");
});
}
function addSpan() {
$span.appendTo("body");
}
function addButton(name) {
var $btn = $("<input>");
$btn.attr({value:name,
type:'submit'});
if(name=="remove"){
$btn.on("click",function(){
$("body").find("span").remove();
})
}else if(name=="detach"){
$btn.on("click",function(){
$("body").find("span").detach();
})
}else if(name=="Add") {
$btn.on("click",function(){
addSpan();
})
}else if(name=="Event"){
$btn.on("click",function(){
addEvent();
})
}else if (name == "Hide") {
$btn.on("click",function(){
if($span.text()!= '')
$span.hide();
})
}else {
$btn.on("click",function(){
$span.show();
})
}
$btn.appendTo("body");
}
(function () {
addButton("remove");
addButton("detach");
addButton("Add");
addButton("Event");
addButton("Hide");
addButton("Show");
})();
});
</script>
</body>
</html>
언급URL : https://stackoverflow.com/questions/4942070/differences-between-detach-hide-and-remove-jquery
'programing' 카테고리의 다른 글
| New-Object : "PSCredential" 및 인수 개수 "2"에 대한 오버로드를 찾을 수 없습니다. (0) | 2023.10.29 |
|---|---|
| 아바다 테마에 jQuery 코드를 삽입하는 방법은? (0) | 2023.10.29 |
| 플렉스박스 : 1열 4개 (0) | 2023.10.29 |
| MySQL Workbench EER 다이어그램 테이블 색상 변경 (0) | 2023.10.29 |
| sqlddeveloper의 여러 오라클 연결에서 쿼리 (0) | 2023.10.29 |