ความแตกต่างระหว่าง detach (), hide () และ remove () - jQuery

Question 1

อะไรคือความแตกต่างของฟังก์ชันระหว่างสามjQueryวิธีนี้:

ถอด ()
ซ่อน ()
ลบ ()

Question 2

hide()ชุด CSS องค์ประกอบจับคู่คุณสมบัติการdisplaynone

remove() ลบองค์ประกอบที่ตรงกันออกจาก DOM ทั้งหมด

detach()เป็นเหมือนremove()แต่เก็บข้อมูลที่จัดเก็บไว้และเหตุการณ์ที่เกี่ยวข้องกับองค์ประกอบที่ตรงกัน

ในการใส่องค์ประกอบแยกเข้าไปใน DOM อีกครั้งเพียงแค่ใส่jQueryชุดที่ส่งคืนจากdetach():

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

...

span.appendTo('body');

Question 3

ลองนึกภาพกระดาษแผ่นหนึ่งบนโต๊ะที่มีกระดาษโน้ตเขียนด้วยดินสอ

hide -> โยนผ้าใส่มัน
empty -> ลบบันทึกด้วยยางลบ
detach -> คว้ากระดาษไว้ในมือและเก็บไว้ที่นั่นเพื่อวางแผนอนาคต
remove -> หยิบกระดาษแล้วโยนลงถังขยะ

กระดาษแสดงถึงองค์ประกอบและบันทึกย่อแสดงถึงเนื้อหา (โหนดลูก) ขององค์ประกอบ

ง่ายไปหน่อยและไม่ถูกต้องทั้งหมด แต่เข้าใจง่าย

Question 4

hide() ตั้งค่าการแสดงผลขององค์ประกอบที่ตรงกันเป็นไม่มี

detach() ลบองค์ประกอบที่ตรงกันรวมถึงข้อความและโหนดลูกทั้งหมด

วิธีนี้จะเก็บข้อมูลทั้งหมดที่เกี่ยวข้องกับองค์ประกอบและสามารถใช้เพื่อกู้คืนข้อมูลขององค์ประกอบเช่นเดียวกับตัวจัดการเหตุการณ์

remove() ยังลบองค์ประกอบที่ตรงกันซึ่งรวมถึงข้อความและโหนดลูกทั้งหมด

อย่างไรก็ตามในกรณีนี้จะมีเพียงข้อมูลขององค์ประกอบเท่านั้นที่สามารถกู้คืนได้ไม่ใช่ตัวจัดการเหตุการณ์ไม่สามารถ

Question 5

ใน 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>

สิ่งนี้จะส่งผลให้โครงสร้าง DOM มีข้อความ Hai ถูกลบ:

<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

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>