Какова функциональная разница между этими тремя методами jQuery:
- отсоединить()
- скрыть()
- удалить()
Различия между detach(), hide() и remove() - jQuery
Ответ 1
hide() устанавливает свойство CSS display соответствующих элементов <<22 > .
remove() полностью удаляет согласованные элементы из DOM.
detach() похож на remove(), но сохраняет сохраненные данные и события, связанные с согласованными элементами.
Чтобы повторно вставить выделенный элемент в DOM, просто вставьте возвращаемый jQuery набор из detach():
var span = $('span').detach();
...
span.appendTo('body');
Ответ 2
Представьте лист бумаги на столе с записками, написанными карандашом.
-
hide→ бросить одежду на него -
empty→ удалить заметки с помощью ластика -
detach→ возьмите бумагу в свои руки и держите ее там для любых будущих планов -
remove→ возьмите бумагу и выбросьте ее в мусорный ящик
Бумага представляет элемент, а примечания представляют содержимое (дочерние узлы) элемента.
Немного упрощенно и не совсем точно, но легко понять.
Ответ 3
hide() устанавливает отображение совпадающего элемента в none.
detach() удаляет согласованные элементы, включая все текстовые и дочерние узлы.
Этот метод хранит все данные, связанные с элементом, и поэтому может использоваться для восстановления данных элемента, а также обработчиков событий.
remove() также удаляет согласованные элементы, включая все текстовые и дочерние узлы.
Однако в этом случае только данные элемента могут быть восстановлены, а не обработчики событий не могут.
Ответ 4
В jQuery существует три метода удаления элементов из DOM. Этими тремя методами являются .empty(), .remove() и .detach(). Все эти методы используются для удаления элементов из DOM, но все они разные.
.hide()
Скрыть согласованные элементы. Без параметров метод .hide() - это самый простой способ скрыть элемент HTML:
$(".box").hide();
.empty()
Метод .empty() удаляет все дочерние узлы и содержимое из выбранных элементов. Этот метод не удаляет сам элемент или его атрибуты.
Примечание
Метод .empty() не принимает никаких аргументов, чтобы избежать утечек памяти. jQuery удаляет другие конструкторы, такие как данные и обработчики событий, из дочерних элементов перед удалением самих элементов.
Пример
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>
Это приведет к созданию структуры DOM с удаленным текстом Hai:
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>
Если бы у нас было некоторое количество вложенных элементов внутри <div class="hai">, они также были бы удалены.
.remove()
Метод .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
Ответ 5
<!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>