Tutorial jQuery untuk melaksanakan acara butang tutup-tutorial js-php.cn

Tutorial jQuery untuk melaksanakan acara butang tutup

王林

Lepaskan： 2024-02-23 18:18:27

asal

1154 orang telah melayarinya

Tutorial jQuery untuk melaksanakan acara butang tutup

Dalam pembangunan web, butang tutup adalah fungsi biasa Pengguna sering mengklik butang tutup untuk menutup tetingkap timbul atau kotak gesaan dalam halaman web. Dalam jQuery, sangat mudah dan mudah untuk melaksanakan acara butang tutup Berikut akan memberikan contoh kod khusus untuk membantu anda mempelajari cara melaksanakan acara butang tutup.

Pertama, pastikan anda telah memperkenalkan fail perpustakaan jQuery, yang boleh diperkenalkan melalui CDN atau dimuat turun secara tempatan. Seterusnya, kami akan mencipta kod HTML yang mengandungi butang tutup:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关闭按钮事件示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="popup">
    <h2>这是一个弹窗</h2>
    <p>这里可以输入弹窗的内容。</p>
    <button class="close-btn">关闭</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami telah mencipta struktur yang mengandungi tetingkap pop timbul dan butang tutup. Seterusnya, mari kita laksanakan acara klik butang tutup supaya tetingkap pop timbul boleh ditutup apabila butang tutup diklik.

Dalam fail script.js, kami menggunakan jQuery untuk memilih elemen butang tutup dan menambah acara klik padanya Apabila butang tutup diklik, kami menggunakan kaedah hide() jQuery untuk menyembunyikan tetingkap timbul:

$(document).ready(function(){
    $('.close-btn').click(function(){
        $('.popup').hide();
    });
});

Salin selepas log masuk

Kod di atas sangat mudah sembunyikan tetingkap pop timbul melalui kaedah $(document).ready()来确保DOM加载完成后再执行jQuery代码。然后使用$('.close-btn').click()来为关闭按钮添加点击事件，当关闭按钮被点击时，选中类名为.popup的弹窗元素，然后调用hide().

Akhir sekali, anda boleh menggayakan tetingkap timbul dalam fail styles.css, seperti menetapkan kedudukan, saiz, warna latar belakang, dll. tetingkap timbul untuk menjadikan tetingkap timbul kelihatan lebih cantik.

Melalui contoh kod di atas, anda boleh belajar cara menggunakan jQuery untuk melaksanakan acara butang tutup supaya tetingkap pop timbul boleh ditutup apabila butang tutup diklik. Saya harap tutorial ini dapat membantu anda menguasai pengetahuan asas jQuery dengan lebih baik dan meningkatkan kemahiran pembangunan web anda.

Atas ialah kandungan terperinci Tutorial jQuery untuk melaksanakan acara butang tutup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!