Rumah hujung hadapan web tutorial js Kawal keterlihatan elemen menggunakan jQuery

Kawal keterlihatan elemen menggunakan jQuery

Feb 20, 2024 am 10:25 AM
jquery display Berubah acara klik

Kawal keterlihatan elemen menggunakan jQuery

Tajuk: Gunakan jQuery untuk menukar atribut paparan elemen

Dalam pembangunan web, kami sering menghadapi keperluan untuk menukar paparan dan penyembunyian elemen secara dinamik berdasarkan operasi pengguna atau status halaman. Menggunakan jQuery untuk memanipulasi atribut paparan elemen ialah kaedah biasa dan mudah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk menukar atribut paparan elemen dan menyediakan contoh kod khusus.

Pertama, kita perlu memperkenalkan fail perpustakaan jQuery. Diperkenalkan dalam fail HTML melalui kod berikut:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Salin selepas log masuk

Seterusnya, kita boleh memilih elemen dan menukar atribut paparannya melalui jQuery. Sebagai contoh, katakan kita mempunyai butang dan elemen div, dan kita perlu menunjukkan atau menyembunyikan elemen div apabila butang diklik. Berikut ialah kod sampel mudah:






Kawal keterlihatan elemen menggunakan jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>






<script>
$(document).ready(function() {
  $("#toggleButton").click(function() {
    $("#content").toggle(); // 切换元素的显示与隐藏
  });
});
</script>


Salin selepas log masuk

Dalam contoh ini, apabila butang diklik, kaedah toggle() jQuery digunakan untuk menukar paparan dan keadaan tersembunyi elemen div. Mula-mula, kami menggunakan $(document).ready() untuk memastikan DOM telah dimuatkan sebelum melaksanakan kod jQuery. Kemudian, dengar peristiwa klik butang melalui $("#toggleButton").click() dan lakukan operasi paparan dan sembunyikan apabila butang diklik. toggle()方法来切换div元素的显示与隐藏状态。首先,我们使用$(document).ready()来确保DOM已经加载完毕再执行jQuery代码。然后,通过$("#toggleButton").click()来监听按钮的点击事件,当点击按钮时执行切换显示与隐藏的操作。

除了使用toggle()方法之外,我们还可以使用其他方法来控制元素的显示与隐藏。例如,可以使用show()来显示元素,使用hide()

Selain menggunakan kaedah toggle(), kami juga boleh menggunakan kaedah lain untuk mengawal paparan dan penyembunyian elemen. Sebagai contoh, anda boleh menggunakan show() untuk memaparkan elemen dan hide() untuk menyembunyikan elemen Anda boleh memilih kaedah yang berbeza mengikut keperluan anda.

Secara amnya, menggunakan jQuery untuk menukar atribut paparan elemen ialah kaedah operasi yang mudah dan berkesan, yang boleh membantu kami menyedari keperluan untuk memaparkan dan menyembunyikan elemen secara dinamik dalam halaman web. Semoga kandungan artikel ini dapat membantu anda! 🎜

Atas ialah kandungan terperinci Kawal keterlihatan elemen menggunakan jQuery. 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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Jangkaan harga Fujifilm X-M5 meningkat apabila paparan swafoto yang bocor menambah kerumitan kepada barisan kamera yang dahulunya mampu dimiliki Jangkaan harga Fujifilm X-M5 meningkat apabila paparan swafoto yang bocor menambah kerumitan kepada barisan kamera yang dahulunya mampu dimiliki Sep 07, 2024 am 09:34 AM

Jangkaan harga Fujifilm X-M5 meningkat apabila paparan swafoto yang bocor menambah kerumitan kepada barisan kamera yang dahulunya mampu dimiliki

Samsung: Paparan baharu yang besar berdasarkan teknologi E Ink memaparkan warna dan berkomunikasi secara wayarles Samsung: Paparan baharu yang besar berdasarkan teknologi E Ink memaparkan warna dan berkomunikasi secara wayarles Jun 19, 2024 pm 03:37 PM

Samsung: Paparan baharu yang besar berdasarkan teknologi E Ink memaparkan warna dan berkomunikasi secara wayarles

Cara menukar harga penghantaran permulaan versi pedagang Meituan Takeout Cara menukar harga penghantaran permulaan versi pedagang Meituan Takeout Mar 27, 2024 pm 07:20 PM

Cara menukar harga penghantaran permulaan versi pedagang Meituan Takeout

Cara menambah acara sentuhan pada gambar dalam vue Cara menambah acara sentuhan pada gambar dalam vue May 02, 2024 pm 10:21 PM

Cara menambah acara sentuhan pada gambar dalam vue

Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya Mar 09, 2024 am 08:21 AM

Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya

Pembangunan bahasa Hongmeng HarmonyOS dan Go Pembangunan bahasa Hongmeng HarmonyOS dan Go Apr 08, 2024 pm 04:48 PM

Pembangunan bahasa Hongmeng HarmonyOS dan Go

Bangunkan aplikasi desktop yang berkuasa dengan Golang Bangunkan aplikasi desktop yang berkuasa dengan Golang Mar 19, 2024 pm 05:45 PM

Bangunkan aplikasi desktop yang berkuasa dengan Golang

Bagaimana untuk menyediakan lompat pada halaman log masuk layui Bagaimana untuk menyediakan lompat pada halaman log masuk layui Apr 04, 2024 am 03:12 AM

Bagaimana untuk menyediakan lompat pada halaman log masuk layui

See all articles