acara jQuery
jQuery direka khas untuk pengendalian acara.
Apakah itu acara?
Respons halaman kepada pelawat yang berbeza dipanggil acara.
Pengendali acara merujuk kepada kaedah yang dipanggil apabila peristiwa tertentu berlaku dalam HTML.
Contoh:
- Gerakkan tetikus pada elemen.
- Pilih butang radio
- Elemen klik
Istilah "pencetus" (atau "api") sering digunakan dalam acara seperti: "Acara menekan kekunci menyala apabila anda menekan kekunci".
Acara DOM biasa:
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
sintaks kaedah acara jQuery
Dalam jQuery, kebanyakan acara DOM mempunyai kaedah jQuery yang setara.
Nyatakan acara klik pada halaman:
Langkah seterusnya ialah menentukan bila untuk mencetuskan peristiwa itu. Anda boleh mencapai ini melalui fungsi acara:
// Kod dilaksanakan selepas tindakan dicetuskan!!
}) ;
Kaedah acara jQuery yang biasa digunakan
$(document).ready()
$(document ). Kaedah ready() membolehkan kami melaksanakan fungsi selepas dokumen dimuatkan sepenuhnya. Kaedah acara ini telah disebut dalam bab Sintaks jQuery. Kaedah
klik()
klik() ialah fungsi yang dipanggil apabila peristiwa klik butang dicetuskan.
Fungsi ini dilaksanakan apabila pengguna mengklik pada elemen HTML.
Dalam contoh berikut, apabila peristiwa klik dicetuskan pada elemen <p> >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>Apabila elemen diklik dua kali, peristiwa dblclick berlaku. Kaedah dblclick() mencetuskan peristiwa dblclick, atau menentukan fungsi untuk dijalankan apabila peristiwa dblclick berlaku:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html> Apabila penunjuk tetikus melepasi elemen , acara tetikus akan berlaku. Kaedah mouseenter() mencetuskan acara mouseenter, atau menentukan fungsi untuk dijalankan apabila acara mouseenter berlaku:
Instance
rreee
Bila penunjuk tetikus meninggalkan elemen, Peristiwa meninggalkan tetikus berlaku. Kaedahmouseleave() mencetuskan acara mouseleave, atau menentukan fungsi untuk dijalankan apabila acara mouseleave berlaku:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("您的鼠标移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>Jalankan Instance»
mousedown()
Acara turun tetikus berlaku apabila penuding tetikus bergerak ke atas elemen dan butang tetikus ditekan. Kaedah
mousedown() mencetuskan acara mousedown, atau menentukan fungsi untuk dijalankan apabila acara mousedown berlaku:
mouseup()
Bila melepaskan tetikus pada elemen Apabila butang ditekan, acara naik tetikus berlaku. Kaedah
mouseup() mencetuskan acara mouseup, atau menentukan fungsi untuk dijalankan apabila acara mouseup berlaku:
tuding()
tuding () kaedah digunakan untuk simulasi acara lekukan kursor.
Apabila tetikus bergerak ke atas elemen, fungsi pertama yang ditentukan (masuk tetikus) akan dicetuskan; apabila tetikus bergerak keluar dari elemen, fungsi kedua yang ditentukan (mouseleave) akan dicetuskan.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
fokus()
Acara fokus berlaku apabila elemen memperoleh fokus.
Apabila elemen dipilih dengan klik tetikus atau diletakkan dengan kekunci tab, elemen itu mendapat fokus. Kaedah
fokus() mencetuskan acara fokus, atau menentukan fungsi untuk dijalankan apabila acara fokus berlaku:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
blur()
Berlaku apabila elemen kehilangan acara kabur fokus. Kaedah
blur() mencetuskan peristiwa kabur atau menentukan fungsi untuk dijalankan apabila peristiwa kabur berlaku:
