Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Terokai pelbagai cara jQuery menunjukkan dan menyembunyikan elemen

Terokai pelbagai cara jQuery menunjukkan dan menyembunyikan elemen

PHPz
Lepaskan: 2023-04-23 17:56:16
asal
1034 orang telah melayarinya

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();
Salin selepas log masuk

.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");
Salin selepas log masuk

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");
Salin selepas log masuk

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();
Salin selepas log masuk

.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");
Salin selepas log masuk

.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");
Salin selepas log masuk

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.");
});
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan