Menunjukkan dan menyembunyikan tag jquery

Dalam pembangunan web, untuk menjadikan halaman web lebih cantik dan mudah digunakan, kami sering menggunakan pelbagai kesan dan ciri interaktif. Antaranya, paparan dan penyembunyian label adalah ciri yang sangat biasa. jQuery ialah alat yang sangat biasa apabila melaksanakan ciri ini. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk memaparkan dan menyembunyikan label.

1. Menunjukkan dan menyembunyikan elemen

Sebelum menggunakan jQuery untuk menunjukkan dan menyembunyikan label, kita perlu terlebih dahulu memahami cara untuk menunjukkan dan menyembunyikan elemen halaman web. jQuery menyediakan dua kaedah untuk mencapai kesan ini, iaitu show() dan hide().

Gunakan kaedah show() untuk memaparkan elemen. Kaedah ini tidak memerlukan parameter, hanya memanggilnya akan memaparkan elemen. Sebagai contoh, jika kita ingin memaparkan elemen dengan id "myElement", kita boleh menggunakan kod berikut:

$("#myElement").show();

Begitu juga, elemen boleh disembunyikan menggunakan kaedah hide(). Kaedah ini juga tidak memerlukan parameter, hanya memanggilnya akan menyembunyikan elemen. Contohnya, jika kita ingin menyembunyikan elemen dengan id "myElement", kita boleh menggunakan kod berikut:

$("#myElement").hide();

Kedua-dua kaedah di atas boleh bertindak terus pada elemen halaman web dan pada elemen Tiada masalah untuk memanggil kedua-dua kaedah ini beberapa kali. Sebagai contoh, kita boleh memaparkan elemen dahulu dan kemudian menyembunyikannya:

$("#myElement").show();
$("#myElement").hide();

2. Gunakan kaedah toggle() untuk memaparkan dan menyembunyikan label

Selain show() dan hide( ) kaedah, jQuery juga menyediakan kaedah toggle(), yang boleh menukar elemen antara menunjukkan dan bersembunyi. Kaedah ini memerlukan parameter pilihan untuk menunjukkan kelajuan pensuisan. Jika parameter ini tidak dinyatakan, nilai lalai ialah 400 (bermaksud 400 milisaat).

Berikut ialah contoh menggunakan kaedah toggle() untuk memaparkan dan menyembunyikan label:

$("#toggleButton").click(function(){
  $("#myElement").toggle();
});

Dalam contoh ini, kami mencipta butang dengan teks "Togol" padanya pengguna mengklik butang ini, kami akan menggunakan kaedah toggle() untuk menukar elemen antara menunjukkan dan menyembunyikan. Khususnya, apabila elemen kelihatan, menggunakan kaedah toggle() akan menyembunyikannya, dan apabila elemen tidak kelihatan, menggunakan kaedah toggle() akan memaparkannya.

3 Gunakan kaedah slideDown() dan slideUp() untuk mencapai kesan animasi label

Selain menggunakan kaedah show(), hide() dan toggle(), kita juga boleh gunakan kaedah slideDown () dan slideUp() untuk mencapai kesan animasi label. Kedua-dua kaedah ini boleh memaparkan dan menyembunyikan elemen secara meluncur, dan boleh menetapkan fungsi kelajuan dan panggil balik.

Gunakan kaedah slideDown() untuk meluncur elemen dari atas untuk dipaparkan:

$("#slideDownButton").click(function(){
  $("#myElement").slideDown();
});

Gunakan kaedah slideUp() untuk meluncur elemen dari bawah untuk menyembunyikannya:

$("#slideUpButton").click(function(){
  $("#myElement").slideUp();
});

Pada masa yang sama, Kami juga boleh menggabungkan dua kaedah ini untuk mencapai kesan pensuisan:

$("#slideToggleButton").click(function(){
  $("#myElement").slideToggle();
});

4. Gunakan kaedah fadeIn() dan fadeOut() untuk mencapai kesan fade-in dan fade-out bagi label

Selain menggunakan kaedah slideDown () dan slideUp(), kami juga boleh menggunakan kaedah fadeIn() dan fadeOut() untuk mencapai kesan fade-in dan fade-out bagi label. Kedua-dua kaedah ini boleh memaparkan dan menyembunyikan elemen secara beransur-ansur, dan juga boleh menetapkan fungsi kelajuan dan panggil balik.

Gunakan kaedah fadeIn() untuk memudar dan memaparkan elemen:

$("#fadeInButton").click(function(){
  $("#myElement").fadeIn();
});

Gunakan kaedah fadeOut() untuk memudar dan menyembunyikan elemen:

$("#fadeOutButton").click(function(){
  $("#myElement").fadeOut();
});

Begitu juga, kami juga boleh Menggabungkan kedua-dua kaedah ini untuk mencapai kesan pensuisan:

$("#fadeToggleButton").click(function(){
  $("#myElement").fadeToggle();
});

Melalui pengenalan di atas, kami telah mempelajari cara menggunakan jQuery untuk memaparkan dan menyembunyikan label, dan juga mempelajari cara menggunakan kesan dan animasi yang berbeza untuk mencapai pelbagai kesan lanjutan. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Menunjukkan dan menyembunyikan tag jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!