Rumah >hujung hadapan web >tutorial js >Kawal paparan dan penyembunyian elemen melalui jQuery
Kawal paparan dan penyembunyian elemen melalui jQuery
- WBOYasal
- 2024-02-25 20:51:071256semak imbas
Tajuk: Penukaran elemen yang kelihatan dan tidak kelihatan melalui jQuery
Dalam pembangunan web, kami sering menghadapi keperluan untuk mengawal status unsur yang kelihatan dan tidak kelihatan dengan mengklik butang atau acara lain. Fungsi ini boleh dicapai dengan mudah menggunakan jQuery Seterusnya, kami akan menggunakan contoh kod khusus untuk menggambarkan cara menggunakan jQuery untuk bertukar antara elemen yang kelihatan dan tidak kelihatan.
Mula-mula, tambah butang dan elemen yang perlu mengawal keterlihatan dalam fail HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery可见与不可见切换</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="toggleButton">切换元素可见性</button>
<div id="toggleElement" style="display: none;">
这是需要切换可见性的元素
</div>
<script src="script.js"></script>
</body>
</html>Seterusnya, buat fail JavaScript baharu bernama script.js dalam direktori projek dan tulis Kod berikut : script.js的JavaScript文件，编写以下代码：
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#toggleElement').toggle();
});
});在这段代码中，我们首先使用$(document).ready()来确保DOM加载完成后执行代码。然后通过$('#toggleButton').click()来监听按钮的点击事件。在点击按钮时，调用$('#toggleElement').toggle()方法来切换#toggleElement元素的可见与不可见状态。
最后，在浏览器中打开HTML文件，点击按钮即可看到#toggleElementrrreee
$(document).ready() untuk memastikan kod tersebut dilaksanakan selepas DOM dimuatkan. Kemudian dengar acara klik butang melalui $('#toggleButton').click(). Apabila butang diklik, kaedah $('#toggleElement').toggle() dipanggil untuk menukar keadaan boleh dilihat dan tidak kelihatan bagi elemen #toggleElement. Akhir sekali, buka fail HTML dalam penyemak imbas dan klik butang untuk melihat togol elemen #toggleElement antara kelihatan dan tidak kelihatan. 🎜🎜Melalui contoh mudah ini, kita dapat melihat bahawa jQuery boleh digunakan untuk bertukar dengan mudah antara elemen kelihatan dan tidak kelihatan, membawa lebih banyak interaktiviti dan dinamik kepada pembangunan web. Sintaks jQuery yang ringkas dan berkuasa membolehkan kami melaksanakan pelbagai fungsi dengan pantas dan menyediakan pengalaman menyemak imbas yang lebih baik kepada pengguna. 🎜Atas ialah kandungan terperinci Kawal paparan dan penyembunyian elemen melalui jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!