acara jQuery
Apakah itu acara?
Respon 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" sering digunakan dalam peristiwa "(atau "api") Contohnya: "Acara penekan kekunci menyala apabila anda menekan kekunci."
Acara DOM biasa:
| 事件 | 說明 |
|---|---|
| click | 鼠標點擊時觸發(fā)此事件 |
| keypress | 鍵盤上的鍵被按下再次釋放時觸發(fā) |
| submit | 表單被提交時觸發(fā) |
| load | 頁面加載完觸發(fā) |
| dblclick | 鼠標雙擊是觸發(fā) |
| keydown | 鍵盤上的鍵被按下時觸發(fā) |
| change | 當前元素失去焦點并且元素內(nèi)容發(fā)生改變時觸發(fā) |
| resize | 瀏覽器窗口大小被改變時觸發(fā) |
| mouseenter | 添加/觸發(fā) mouseenter 事件 |
| keyup | 鍵盤上的鍵被按下后松開時觸發(fā) |
| focus | 當某個元素失去焦點時觸發(fā) |
| scroll | 添加/觸發(fā) scroll 事件 |
| mouseleave | 添加/觸發(fā) mouseleave 事件 |
| blur | 添加/觸發(fā) blur 事件 |
sintaks kaedah acara jQuery
Dalam jQuery, kebanyakan acara DOM mempunyai kaedah jQuery yang setara.
Nyatakan acara klik pada halaman:
$("p").click();
Langkah seterusnya ialah menentukan bila untuk mencetuskan peristiwa itu. Anda boleh mencapai ini melalui fungsi acara:
$("p").click(function(){
// Kod dilaksanakan selepas tindakan dicetuskan!!
}) ;
Kaedah acara jQuery yang biasa digunakan
$(document).ready()
Kaedah $(document).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 di bawah, apabila peristiwa klik dicetuskan pada elemen <p> <p> semasa disembunyikan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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>Jalankan program untuk mencubanya
dblclick()
Apabila elemen diklik dua kali, peristiwa dblclick berlaku.
Kaedah dblclick() mencetuskan acara dblclick, atau menentukan fungsi untuk dijalankan apabila peristiwa dblclick berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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>Jalankan atur cara untuk mencubanya
mouseenter()
Acara mouseenter berlaku apabila penuding tetikus melalui elemen.
Kaedah mouseenter() mencetuskan acara mouseenter, atau menentukan fungsi untuk dijalankan apabila acara mouseenter berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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 atur cara dan cuba
mousedown()
Peristiwa 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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 atur cara untuk mencubanya
kaedah tuding()
kaedah tuding() digunakan untuk mensimulasikan peristiwa tuding 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("你進入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>Jalankan program dan cuba
fokus()
Acara fokus berlaku apabila elemen mendapat 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>Jalankan atur cara dan cuba
Jika anda berminat, anda boleh mencuba Acara lain
