jquery menyembunyikan elemen html

Dalam pembangunan web, selalunya perlu untuk menyembunyikan dan menunjukkan elemen pada halaman, seperti menunjukkan atau menyembunyikan elemen tertentu dalam keadaan halaman yang berbeza. Dalam kes ini, kita boleh menggunakan jQuery, perpustakaan JavaScript, untuk melaksanakan operasi ini.

Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menyembunyikan elemen HTML dan menyediakan beberapa contoh kod praktikal untuk membantu pembaca menguasai teknologi ini dengan lebih baik.

1. Gunakan kaedah hide() untuk menyembunyikan elemen

jQuery menyediakan kaedah yang dipanggil hide() yang boleh digunakan untuk menyembunyikan elemen HTML. Kaedah ini digunakan seperti berikut:

$(selector).hide();

di mana, selector ialah pemilih elemen yang perlu disembunyikan. Contohnya, jika kita ingin menyembunyikan tag myElement dengan id div, kita boleh menggunakan kod berikut:

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

Kaedah ini akan menyembunyikan elemen yang dipilih dan menduduki ruang yang sepadan dalam halaman susun atur. Jika anda ingin mengalih keluar elemen daripada reka letak pada masa yang sama, anda boleh menggunakan kaedah remove().

2. Gunakan CSS untuk menetapkan keadaan paparan unsur

jQuery menyediakan cara untuk mengawal keadaan paparan unsur menggunakan CSS. Apabila atribut display elemen ditetapkan kepada none , elemen itu akan disembunyikan. Oleh itu, kita boleh menggunakan kaedah css() jQuery untuk menetapkan atribut display elemen untuk mencapai penyembunyian.

$(selector).css("display", "none");

Di mana, selector ialah pemilih elemen yang perlu disembunyikan. Contohnya, jika kita ingin menyembunyikan teg myElement dengan id div, kita boleh menggunakan kod berikut:

$("#myElement").css("display", "none");

Kaedah ini akan menyembunyikan elemen dan mengalih keluarnya daripada reka letak halaman.

3. Gunakan kaedah toggle() untuk menukar keadaan paparan elemen

Selain daripada dua kaedah di atas, jQuery juga menyediakan kaedah yang dipanggil toggle(), yang boleh digunakan Menogol keadaan paparan unsur. Kaedah ini akan menunjukkan elemen apabila ia tersembunyi dan menyembunyikannya apabila ia kelihatan.

Kaedah penggunaan toggle() adalah seperti berikut:

$(selector).toggle();

Di mana, selector ialah pemilih elemen yang perlu disembunyikan. Sebagai contoh, jika kita ingin menukar keadaan paparan tag myElement dengan id div, kita boleh menggunakan kod berikut:

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

Dalam kes ini, kaedah ini akan berdasarkan paparan keadaan elemen semasa, Togol status paparannya.

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

jQuery juga menyediakan dua kaedah untuk mencapai fade-in dan kesan pudar, masing-masingfadeOut() dan fadeIn(). Kedua-dua kaedah ini boleh digunakan untuk mencapai kesan bersembunyi dan menunjukkan secara beransur-ansur.

Gunakan kaedah fadeOut() untuk mencapai kesan pudar seperti berikut:

$(selector).fadeOut();

Di mana, selector ialah pemilih elemen untuk disembunyikan. Sama seperti kaedah di atas, kaedah ini akan menyembunyikan elemen yang dipilih dan menghidupkannya dengan kesan fade-out.

Begitu juga, kaedah fadeIn() boleh digunakan untuk mencapai kesan pudar.

$(selector).fadeIn();

4. Gunakan kaedah slideUp() dan slideDown() untuk mencapai kesan penyembunyian dan pengembangan gelongsor

Apabila anda perlu mengembangkan dan menyembunyikan elemen, anda juga boleh menggunakan jQuery untuk menyediakan kaedah slideUp() dan slideDown() untuk mencapai kesan persembunyian gelongsor dan pengembangan.

Gunakan slideUp() untuk mencapai kesan penyembunyian gelongsor Caranya adalah seperti berikut:

$(selector).slideUp();

Kaedah ini akan menyembunyikan elemen yang dipilih dan menghidupkannya menggunakan kesan penyembunyian gelongsor.

Begitu juga, kaedah slideDown() boleh digunakan untuk mencapai kesan paparan gelongsor.

$(selector).slideDown();

Ringkasan

Artikel ini memperkenalkan lima cara untuk menyembunyikan elemen HTML menggunakan jQuery, termasuk menggunakan hide(), css(), toggle(), fadeOut() dan slideUp() . Kaedah ini boleh menyembunyikan dan memaparkan elemen pada halaman mengikut keperluan yang berbeza. Dalam projek sebenar, kaedah yang sesuai boleh dipilih dan digunakan mengikut keperluan tertentu.

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