pemadaman meja depan jquery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan web bahagian hadapan Dengan menggunakannya untuk meningkatkan interaktiviti, keseluruhan pengalaman pengguna adalah lebih mendalam dan lebih berkesan.

Artikel ini memfokuskan pada pemadaman bahagian hadapan jQuery. Pemadaman adalah bahagian yang tidak dapat dielakkan dalam proses pembangunan bahagian hadapan. Untuk operasi penambahan data, pemadaman, pengubahsuaian dan pertanyaan, interaksi data dengan bahagian belakang biasanya diperlukan. Walau bagaimanapun, menggunakan pemadaman bahagian hadapan jQuery boleh menghapuskan keperluan untuk interaksi data dengan bahagian belakang, sekali gus memudahkan proses operasi halaman.

Pemadaman latar depan terbahagi kepada dua situasi: memadamkan data statik dan memadamkan data dinamik. Mereka akan diperkenalkan secara berasingan di bawah.

1. Padamkan data statik

Data statik yang dipanggil merujuk kepada data yang sudah wujud apabila halaman dimuatkan, seperti teks HTML atau gambar, dsb. Memadam data statik boleh dicapai melalui kaedah remove() dalam jQuery, yang boleh mengalih keluar elemen tertentu.

Sebagai contoh, kami membuat senarai dengan butang padam dalam setiap baris. Klik butang Padam untuk memadam keseluruhan item senarai. Kod HTML adalah seperti berikut:

<ul>
  <li>列表项1 <button class="remove">删除</button></li>
  <li>列表项2 <button class="remove">删除</button></li>
  <li>列表项3 <button class="remove">删除</button></li>
  <li>列表项4 <button class="remove">删除</button></li>
</ul>

Seterusnya, kita perlu menggunakan pemilih jQuery untuk mencari elemen yang hendak dipadamkan dan mengikat acara klik pada butang padam.

$(document).ready(function(){
  $('.remove').click(function(){
    $(this).parent().remove();
  });
});

Dalam kod di atas, $(document).ready() menunjukkan bahawa halaman telah dimuatkan dan $('.remove') menunjukkan bahawa semua butang padam ditemui dengan memilih nama kelas bagi butang. Kemudian dapatkan item senarai di mana butang terletak dengan memanggil kaedah parent() dan kemudian gunakan kaedah remove() untuk mengalih keluar item senarai.

2. Padamkan data dinamik

Data dinamik merujuk kepada data yang diperoleh melalui JavaScript dan interaksi data belakang pada halaman. Apabila memadam data dinamik, kami perlu menghantar permintaan kepada pelayan melalui AJAX untuk memberitahu pelayan data yang hendak dipadamkan, dan selepas pemadaman berjaya, kemas kini paparan data pada halaman.

Struktur HTML adalah seperti berikut:

<div class="list-container">
  <ul id="data-list">
    <li>动态数据1 <button class="remove" data-id="1">删除</button></li>
    <li>动态数据2 <button class="remove" data-id="2">删除</button></li>
    <li>动态数据3 <button class="remove" data-id="3">删除</button></li>
    <li>动态数据4 <button class="remove" data-id="4">删除</button></li>
  </ul>
</div>

Dalam kod HTML di atas, kami menetapkan data-id untuk mewakili nilai id setiap baris data untuk memudahkan pengenalpastian semasa memadam.

Di bawah, kami menggunakan jQuery untuk menghantar permintaan AJAX ke pelayan, memadamkan data yang ditentukan dan memuat semula halaman.

$(document).ready(function(){
  $('.remove').click(function(){
    var id = $(this).data('id');
    $.ajax({
      type: 'POST',
      url: '/delete.php',
      data: {id: id},
      success: function(data){
        if (data.success) {
          $('#data-list li[data-id="'+id+'"]').remove();
        }
      }
    });
  });
});

Dalam kod di atas, $(this).data('id') bermaksud mendapatkan nilai data-id bagi butang semasa, kaedah $.ajax() bermaksud menghantar permintaan AJAX, dan dalam fungsi panggil balik kejayaan pemadaman Gunakan pemilih jQuery untuk memilih elemen yang anda mahu padam dan padamkannya.

Ringkasan

Artikel ini memperkenalkan pemadaman bahagian hadapan jQuery, yang membolehkan kami menyimpan interaksi data dengan bahagian belakang melalui operasi bahagian hadapan. Memadam data statik boleh dicapai melalui kaedah remove(), manakala pemadaman data dinamik memerlukan penghantaran permintaan ke pelayan melalui AJAX dan menyegarkan halaman. Dengan menggunakan pemadaman bahagian hadapan jQuery, keseluruhan proses operasi boleh dibuat lebih mudah, lebih pantas dan lebih lancar, memberikan pengguna pengalaman yang lebih baik.

Atas ialah kandungan terperinci pemadaman meja depan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!