Ketahui lebih lanjut tentang acara biasa jQuery-tutorial js-php.cn

Ketahui lebih lanjut tentang acara biasa jQuery

王林

Lepaskan： 2024-02-22 12:42:03

asal

584 orang telah melayarinya

Ketahui lebih lanjut tentang acara biasa jQuery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan web Ia menyediakan banyak fungsi dan kaedah yang berkuasa, antaranya pengendalian acara merupakan ciri pentingnya. Dalam proses pembangunan web, kita selalunya perlu mencetus dan memproses peristiwa untuk mencapai kesan interaktif dan kesan dinamik halaman. Artikel ini akan mendalami acara jQuery biasa dan menunjukkan penggunaannya dengan contoh kod konkrit.

1. Acara klik (klik)

Acara klik ialah salah satu peristiwa yang paling biasa, yang dicetuskan apabila pengguna mengklik pada elemen. Melalui jQuery, kami boleh dengan mudah menambah peristiwa klik pada elemen tertentu dan melaksanakan operasi yang sepadan apabila peristiwa itu berlaku. Berikut ialah contoh acara klik mudah:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
$(document).ready(function(){
    $("#myButton").click(function(){
        alert("按钮被点击了！");
    });
});
</script>
</head>
<body>
<button id="myButton">点击我</button>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, apabila butang diklik, kotak gesaan akan muncul menunjukkan "Butang telah diklik!".

2. Acara keluar masuk tetikus (masuk tetikus, keluar tetikus)

Acara keluar tetikus dicetuskan apabila tetikus masuk dan keluar dari elemen tersebut. Kedua-dua peristiwa ini biasanya digunakan untuk melaksanakan fungsi seperti kesan terapung atau pengembangan dan keruntuhan menu. Berikut ialah contoh acara keluar masuk tetikus:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入移出事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
$(document).ready(function(){
    $("#myDiv").mouseenter(function(){
        $(this).css("background-color", "yellow");
    });
    
    $("#myDiv").mouseleave(function(){
        $(this).css("background-color", "white");
    });
});
</script>
</head>
<body>
<div id="myDiv" style="width: 100px; height: 100px;">鼠标移入移出我</div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, apabila tetikus bergerak ke dalam elemen <div>, warna latar belakang akan bertukar menjadi kuning apabila tetikus bergerak keluar daripada elemen < div>, warna latar belakang akan kembali kepada putih. <div>元素时，背景色会变成黄色；当鼠标移出<div>元素时，背景色会恢复为白色。

3. 键盘事件（keydown、keypress、keyup）

键盘事件可以捕获用户在键盘上的操作，如按下、按住和释放按键等。下面是一个键盘事件的示例，分别演示了keydown、keypress和keyup

3. Acara papan kekunci (keydown, tekan kekunci, kekunci)

Acara papan kekunci boleh menangkap operasi pengguna pada papan kekunci, seperti menekan, menahan dan melepaskan kekunci. Berikut ialah contoh acara papan kekunci, masing-masing menunjukkan acara keydown, keyup dan keyup:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
$(document).ready(function(){
    $(document).keydown(function(e){
        console.log("键码：" + e.keyCode);
    });
    
    $(document).keypress(function(e){
        console.log("按键：" + String.fromCharCode(e.which));
    });
    
    $(document).keyup(function(){
        console.log("按键释放");
    });
});
</script>
</head>
<body>
在此处点击键盘
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, apabila berada di halaman Apabila papan kekunci ditekan di mana-mana, kod kunci atau maklumat kunci yang sepadan akan dikeluarkan pada konsol, serta gesaan keluaran kunci.

4. Acara klik dua kali (dblclick)

Acara klik dua kali dicetuskan apabila pengguna mengklik dua kali elemen Ia sering digunakan untuk melaksanakan fungsi seperti penyuntingan klik dua kali atau pop timbul maklumat terperinci. Berikut ialah contoh acara dwiklik:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双击事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
$(document).ready(function(){
    $("#myText").dblclick(function(){
        $(this).css("font-weight", "bold");
    });
});
</script>
</head>
<body>
<p id="myText">双击我改变字体加粗</p>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, apabila elemen perenggan diklik dua kali, fon akan bertukar kepada gaya tebal. 🎜🎜Melalui contoh kod di atas, kami mempunyai pemahaman awal tentang cara menggunakan peristiwa biasa dalam jQuery, termasuk peristiwa klik, peristiwa bergerak masuk dan keluar tetikus, acara papan kekunci dan acara klik dua kali. Dalam pembangunan sebenar, kami boleh menggunakan acara ini untuk mencapai pelbagai kesan interaktif dan kesan dinamik mengikut keperluan khusus, menjadikan halaman lebih jelas dan menarik. Saya harap artikel ini membantu anda, dan anda dialu-alukan untuk terus mempelajari lebih lanjut dan meneroka lebih banyak kegunaan acara jQuery. 🎜

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang acara biasa jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!