masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

operasi DOM jQuery detach()

Jika kita ingin memadamkan sementara nod pada halaman, tetapi tidak mahu data dan peristiwa pada nod itu hilang, dan boleh mempunyai nod yang dipadamkan dipaparkan pada halaman dalam tempoh masa seterusnya, maka kita boleh menggunakan kaedah detach untuk mengendalikannya

detach mudah difahami secara literal. Biarkan elemen web dihoskan. Iaitu, elemen dialih keluar daripada halaman semasa, tetapi objek model memori elemen ini dikekalkan.

Mari kita lihat penjelasan daripada dokumentasi rasmi jquery:

Kaedah ini tidak akan memadamkan elemen padanan daripada objek jQuery, jadi elemen padanan ini boleh digunakan semula pada masa hadapan. Tidak seperti remove(), semua peristiwa terikat, data yang dilampirkan, dsb. akan dikekalkan.
$("div").detach() akan mengalih keluar objek, tetapi kesan paparan akan hilang. Tetapi ia masih wujud dalam ingatan. Apabila anda menambah, anda kembali ke aliran dokumen. Ia muncul semula.

Sudah tentu, perhatian khusus harus diberikan di sini Kaedah detach adalah unik untuk JQuery, jadi ia hanya boleh memproses peristiwa atau data yang terikat melalui kaedah JQuery

Rujuk kawasan kod. di sebelah kanan, melalui $("p").detach() memadamkan semua elemen P, dan kemudian meletakkan elemen p yang dipadam pada halaman melalui lampiran Dengan mengklik pada teks, anda boleh membuktikan bahawa acara itu tidak hilang

Mari kita lihat di bawah Contoh kod: 

<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style type="text/css">
    p {
        color: red;
    }
    </style>
</head>

<body>
    <p>P元素1，默认给绑定一个点击事件</p>
    <p>P元素2，默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击移动 p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见，但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到页面中
        //事件还是存在
        $("body").append(p);
    });
    </script>
</body>

</html>


Meneruskan pembelajaran
||
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style type="text/css"> p { color: red; } </style> </head> <body> <p>P元素1，默认给绑定一个点击事件</p> <p>P元素2，默认给绑定一个点击事件</p> <button id="bt1">点击删除 p 元素</button> <button id="bt2">点击移动 p 元素</button> <script type="text/javascript"> $('p').click(function(e) { alert(e.target.innerHTML) }) var p; $("#bt1").click(function() { if (!$("p").length) return; //去重 //通过detach方法删除元素 //只是页面不可见，但是这个节点还是保存在内存中 //数据与事件都不会丢失 p = $("p").detach() }); $("#bt2").click(function() { //把p元素在添加到页面中 //事件还是存在 $("body").append(p); }); </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492481 permainan