Bagaimana untuk memadam baris semasa dalam jquery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan bahagian hadapan web Ia mudah digunakan, berkuasa dan serasi dengan penyemak imbas. Menggunakan jQuery, anda boleh dengan mudah melaksanakan kesan interaktif yang kompleks, mengemas kini kandungan halaman secara dinamik dan meningkatkan interaktiviti halaman. Antaranya, memadam baris semasa ialah fungsi yang biasa digunakan dan biasa dalam pembangunan Jika anda tidak tahu cara menggunakan jQuery untuk mencapainya, maka artikel ini akan memperkenalkan anda cara menggunakan jQuery untuk memadam baris semasa.

1. pemilih jQuery

Sebelum memadamkan baris semasa, anda perlu memahami pemilih jQuery. Pemilih jQuery ialah sintaks yang serupa dengan pemilih CSS, yang boleh memilih elemen DOM mengikut nama teg, nama kelas, ID, dsb.

Pemilih jQuery yang biasa digunakan adalah seperti berikut:

1. Pemilih teg: $("nama tag"), seperti: $("p") bermaksud memilih semua Label p .
2. Pemilih kelas: $(".nama kelas"), seperti: $(".demo") bermaksud memilih semua elemen dengan demo kelas.
3. Pemilih ID: $("#ID name"), seperti: $("#demo") bermaksud memilih elemen dengan id demo.
4. Pemilih atribut: $("[nama atribut]"), seperti: $("[href]") bermaksud memilih semua elemen yang mengandungi atribut href.
5. Pemilih komposit: Anda boleh mencampur dan menggunakan pemilih di atas untuk penapisan berbilang keadaan, seperti: $("ul li.active") bermaksud memilih semua teg li dengan kelas aktif.

2. Pelaksanaan pemadaman kod baris semasa

Dengan asas pemilih jQuery, anda boleh memadamkan baris semasa. Mula-mula, anda perlu menyediakan jadual dalam HTML dan tetapkan nilai atribut kelas butang padam kepada "delete-btn". Kodnya adalah seperti berikut:

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>小明</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>小红</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>小刚</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>

Selepas menyediakan dalam HTML, anda perlu menulis kod jQuery dalam JavaScript untuk melaksanakan fungsi pemadaman. Kod khusus adalah seperti berikut:

<script>
$(function() {
  $(".delete-btn").on("click", function() {
    $(this).parents("tr").remove();
  });
});
</script>

Dalam kod di atas, fungsi $() bermaksud untuk mencari semua elemen butang dengan kelas "delete-btn" dan menambah pendengar acara klik padanya apabila butang itu; Apabila diklik, mengalih keluar elemen induknya tr daripada struktur DOM. Ini memudahkan untuk memadamkan baris semasa.

3. Ringkasan

Melalui kod pelaksanaan di atas, kita dapat melihat bahawa sangat mudah untuk menggunakan jQuery untuk memadam baris semasa Anda hanya perlu memahami pemilih jQuery dan mekanisme mendengar acara . Secara keseluruhannya, jQuery menjadikan pembangunan web lebih mudah dan lebih cekap, di samping meningkatkan interaktiviti dan pengalaman pengguna halaman web. Saya harap artikel ini dapat membantu untuk pemula.

Atas ialah kandungan terperinci Bagaimana untuk memadam baris semasa dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!