Detach (), hide () ve remove () - jQuery arasındaki farklar

Question 1

Bu üç jQueryyöntem arasındaki işlevsel fark nedir :

detach ()
saklamak()
Kaldırmak()

Question 2

hide()eşleşen öğelerin CSS displayözelliğini olarak ayarlar none.

remove() eşleşen öğeleri DOM'dan tamamen kaldırır.

detach()gibidir remove(), ancak depolanan verileri ve eşleşen öğelerle ilişkili olayları tutar.

Ayrılmış bir öğeyi DOM'a yeniden eklemek için, döndürülen jQuerykümeyi şuradan eklemeniz yeterlidir detach():

var span = $('span').detach();

...

span.appendTo('body');

Question 3

Bir masanın üzerinde kurşun kalemle yazılmış bazı notlarla bir kağıt parçası hayal edin.

hide -> üzerine bir giysi atın
empty -> notları silgiyle kaldırın
detach -> kağıdı elinize alın ve gelecekteki planlarınız için orada tutun
remove -> kağıdı alın ve çöp kutusuna atın

Kağıt, öğeyi temsil eder ve notlar, öğenin içeriğini (alt düğümler) temsil eder.

Biraz basitleştirilmiş ve tamamen doğru değil, ancak anlaşılması kolay.

Question 4

hide() eşleşen öğenin görüntüsünü yok olarak ayarlar.

detach() tüm metin ve alt düğümler dahil olmak üzere eşleşen öğeleri kaldırır.

Bu yöntem, öğeyle ilişkili tüm verileri depolar ve bu nedenle öğenin verilerini ve olay işleyicilerini geri yüklemek için kullanılabilir.

remove() tüm metin ve alt düğümler dahil olmak üzere eşleşen öğeleri de kaldırır.

Ancak bu durumda yalnızca öğenin verileri geri yüklenebilir, olay işleyicileri geri yüklenemez.

Question 5

JQuery'de, öğeleri DOM'dan kaldırmanın üç yöntemi vardır. Bu üç yöntem vardır .empty(), .remove()ve .detach(). Tüm bu yöntemler, öğeleri DOM'dan kaldırmak için kullanılır, ancak hepsi farklıdır.

.saklamak()

Eşleşen öğeleri gizleyin. Parametre olmadan .hide () yöntemi, bir HTML öğesini gizlemenin en basit yoludur:

$(".box").hide();

.boş()

.Empty () yöntemi, tüm alt düğümleri ve içeriği seçili öğelerden kaldırır. Bu yöntem, elemanın kendisini veya niteliklerini kaldırmaz.

Not

.Empty () yöntemi, bellek sızıntılarını önlemek için herhangi bir argüman kabul etmez. jQuery, veri ve olay işleyicileri gibi diğer yapıları, öğelerin kendisini kaldırmadan önce alt öğelerden kaldırır.

Misal

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").empty();
</script>

Bu, Hai metni silinmiş bir DOM yapısıyla sonuçlanacaktır:

<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>

İçeride herhangi bir sayıda iç içe elemanımız <div class="hai">olsaydı, bunlar da kaldırılırdı.

.Kaldırmak()

.Remove () yöntemi, tüm metin ve alt düğümler dahil olmak üzere seçilen öğeleri kaldırır. Bu yöntem aynı zamanda seçilen öğelerin verilerini ve olaylarını da kaldırır.

Not

Öğenin kendisini ve içindeki her şeyi kaldırmak istediğinizde .remove () kullanın. Buna ek olarak, öğelerle ilişkili tüm ilişkili olaylar ve jQuery verileri kaldırılır.

MİSAL

Aşağıdaki html'yi düşünün:

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").remove();
</script>

Bu, <div>öğenin silinmiş olduğu bir DOM yapısıyla sonuçlanacaktır :

<div class="content">
<div class="goodevening">good evening</div>
</div

İçeride herhangi bir sayıda iç içe elemanımız <div class="hai">olsaydı, bunlar da kaldırılırdı. Veri veya olay işleyicileri gibi diğer jQuery yapıları da silinir.

.detach ()

.Detach () yöntemi, tüm metin ve alt düğümler dahil olmak üzere seçilen öğeleri kaldırır. Ancak verileri ve olayları tutar. Bu yöntem aynı zamanda kaldırılan elemanların bir kopyasını saklar, bu da daha sonra yeniden yerleştirilmesine izin verir.

Not

.Detach () yöntemi, kaldırılan öğeler daha sonra DOM'a yeniden eklenecek olduğunda kullanışlıdır.

Misal

<!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>

Daha fazla bilgi için şu adresi ziyaret edin: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

Question 6

<!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>