Terokai pelbagai cara jQuery menunjukkan dan menyembunyikan elemen

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan interaksi dan animasi dalam pembangunan bahagian hadapan. Satu penggunaan biasa adalah untuk memanipulasi keterlihatan elemen DOM. Dalam artikel ini, kami akan meneroka pelbagai cara jQuery menunjukkan dan menyembunyikan elemen.

Memaparkan Elemen

Mula-mula, mari lihat cara untuk memaparkan elemen menggunakan jQuery. Biasanya, terdapat tiga kaedah berikut:

.show()

Pertama, kita mempunyai kaedah .show(). Kaedah ini boleh dipanggil pada elemen tersembunyi untuk menunjukkannya. Contohnya, untuk memaparkan elemen yang dipanggil "myDiv", anda akan menulis:

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

.show( speed [, easing ] [, callback ] )

Selain .show( ) kaedah, kami juga mempunyai versi dengan parameter. Melalui kaedah ini, kita boleh menetapkan kelajuan dan kesan pelonggaran animasi paparan. Contohnya, untuk memaparkan elemen "myDiv" pada kelajuan "perlahan", anda akan menulis:

$("#myDiv").show("slow");

Perhatikan bahawa jika anda ingin menggunakan fungsi panggil balik, pastikan anda mentakrifkannya selepas parameter pelonggaran.

.fadeIn()

.fadeIn( speed [, easing ] [, callback ] )

kaedah.fadeIn() adalah serupa dengan kaedah sebelumnya, tetapi ia adalah tidak dipaparkan serta-merta elemen, tetapi pudar ke dalamnya. Kaedah ini juga boleh mengambil kelajuan, kesan pelonggaran dan parameter panggil balik. Sebagai contoh, untuk memudar dalam "myDiv" pada kelajuan "pantas", anda akan menulis:

$("#myDiv").fadeIn("fast");

kaedah.hide()

.show() mengambil elemen daripada tersembunyi kepada boleh dilihat status, manakala kaedah .hide() melakukan sebaliknya. Kaedah ini boleh menetapkan elemen menjadi tidak kelihatan, tetapi ia tidak akan mengubah kedudukan elemen atau ruang yang diduduki. Contohnya, untuk menyembunyikan "myDiv", anda boleh menulis:

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

.hide( speed [, easing ] [, callback ] )

.hide() method juga boleh menggunakan Has kelajuan, kesan pelonggaran dan parameter panggil balik, serupa dengan kaedah .show(). Contohnya, untuk menyembunyikan "myDiv" pada kelajuan "perlahan", anda akan menulis:

$("#myDiv").hide("slow");

.fadeOut()

.fadeOut( speed [, easing ] [, callback ] )

Serupa dengan kaedah .fadeIn(), kami juga mempunyai kaedah .fadeOut(). Ia memudarkan elemen dan boleh mengambil parameter kelajuan, pelonggaran dan panggil balik. Contohnya, untuk memadamkan "myDiv" pada kelajuan "sederhana", anda akan menulis:

$("#myDiv").fadeOut("medium");

Togol keterlihatan elemen

.show() dan .hide() kaedah boleh digunakan masing-masing Digunakan untuk menunjukkan dan menyembunyikan unsur, tetapi kadangkala kita perlu menogol sepenuhnya keterlihatan sesuatu elemen. Pada masa ini, kita boleh menggunakan kaedah .toggle().

.toggle()

.togol( kelajuan [, pelonggaran ] [, panggil balik ] )

kaedah.toggle() boleh menukar elemen antara menunjukkan dan menyembunyikan, iaitu jika elemen sudah ditunjukkan, ia akan disembunyikan dan sebaliknya. Kaedah ini juga boleh mengambil kelajuan, kesan pelonggaran dan parameter panggil balik. Contohnya, untuk menogol keterlihatan "myDiv" dan mengeluarkan mesej konsol dalam fungsi panggil balik, anda boleh menulis:

$("#myDiv").toggle("fast", function() {
  console.log("Toggled visibility of #myDiv.");
});

Ringkasan

Dalam artikel ini, kami memperkenalkan Pelbagai kaedah untuk mengawal keterlihatan elemen dalam jQuery, termasuk .show(), .hide(), .fadeIn(), .fadeOut(), dan .toggle(). Kaedah ini menyediakan cara yang mudah untuk mencipta interaksi dan animasi yang lancar, di samping meningkatkan fleksibiliti dan kebolehselenggaraan pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Terokai pelbagai cara jQuery menunjukkan dan menyembunyikan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!