이 세 가지 jQuery방법 의 기능적 차이점은 무엇입니까?
- 떼다()
- 숨는 장소()
- 없애다()
답변
hide()일치하는 요소의 CSS display속성을 none.
remove() DOM에서 일치하는 요소를 완전히 제거합니다.
detach()와 비슷 remove()하지만 일치하는 요소와 관련된 저장된 데이터 및 이벤트를 유지합니다.
분리 된 요소를 DOM에 다시 삽입하려면 jQuery다음에서 반환 된 집합을 삽입하면 됩니다 detach().
var span = $('span').detach();
...
span.appendTo('body');답변
연필로 쓴 메모가있는 테이블 위에 종이 한 장을 상상해보십시오.
hide-> 그 위에 옷을 던져empty-> 지우개로 메모 제거detach-> 당신의 손에 종이를 잡고 앞으로의 계획을 위해 그것을 보관하십시오remove-> 종이를 잡고 쓰레기통에 버리십시오.
종이는 요소를 나타내고 메모는 요소의 내용 (하위 노드)을 나타냅니다.
약간 단순화되고 완전히 정확하지는 않지만 이해하기 쉽습니다.
답변
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>그러면 <div>요소가 삭제 된 DOM 구조가 생성 됩니다.
<div class="content">
<div class="goodevening">good evening</div>
</div내부에 중첩 된 요소가 여러 개 있으면 해당 요소 <div class="hai">도 제거됩니다. 데이터 또는 이벤트 핸들러와 같은 다른 jQuery 구조도 지워집니다.
.떼다()
.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>