klik jquery untuk membuat elemen induk hilang

JQuery ialah perpustakaan Javascript yang digunakan secara meluas yang menyediakan cara yang mudah dan mudah digunakan untuk memanipulasi dokumen HTML dan mengendalikan acara. Dalam pembangunan web, kadangkala anda perlu melaksanakan fungsi mengklik elemen untuk menghilangkan elemen induknya. Artikel ini akan memperkenalkan cara menggunakan JQuery untuk mencapai fungsi ini.

1. Struktur HTML

Pertama, kita perlu mentakrifkan struktur HTML, termasuk elemen induk dan elemen anak. Kodnya adalah seperti berikut:

<div class="parent">
  <div class="child"></div>
</div>

2. Gaya CSS

Untuk menjadikan halaman lebih cantik, kita perlu menentukan beberapa gaya CSS. Antaranya, elemen induk perlu ditetapkan kepada kedudukan relatif, elemen anak perlu ditetapkan kepada kedudukan mutlak, dan kedudukan sudut kiri atas mesti ditetapkan kepada 0. Kod tersebut adalah seperti berikut:

.parent{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

3. Kod JQuery

Sekarang, kita perlu menulis kod JQuery untuk merealisasikan fungsi membuat elemen induk hilang dengan mengklik padanya.

Pertama, kita perlu menggunakan pemilih JQuery untuk memilih elemen induk dan elemen anak, dan menetapkan elemen anak untuk dipusatkan melalui CSS. Kodnya adalah seperti berikut:

$(document).ready(function(){
  $(".child").css("margin", "auto");
});

Seterusnya, kita perlu menggunakan fungsi klik() JQuery untuk mendengar peristiwa klik halaman, dan apabila peristiwa klik berlaku, gunakan fungsi fadeOut() untuk membuat elemen induk hilang . Kod adalah seperti berikut:

$(document).ready(function(){
  $(".child").css("margin", "auto");
  
  $(".parent").click(function(){
    $(this).fadeOut();
  });
});

4. Kod lengkap

Akhir sekali, kod lengkap adalah seperti berikut:

Kod HTML:

Kod CSS :

<div class="parent">
  <div class="child"></div>
</div>

Kod JQuery:

.parent{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: auto;
}

5 Ringkasan

Melalui langkah di atas, kami telah berjaya melaksanakan fungsi klik untuk menghilangkan elemen induk. Saya percaya pembaca sudah memahami penggunaan asas JQuery dan cara menggunakan JQuery untuk melaksanakan fungsi halaman tertentu. Pada masa yang sama, pembaca juga boleh mengembangkan lagi atas dasar ini untuk mengukuhkan kemahiran pembangunan Web mereka.

Atas ialah kandungan terperinci klik jquery untuk membuat elemen induk hilang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!