acara jQuery
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: "tekanan kekunci terbakar apabila anda menekan kekunci peristiwa".
Acara DOM biasa:
Acara tetikus klik dblclick mouseenter mouseleave
kekunci tekan kekunci kekunci kabur
acara borang serah tukar fokus bongkar
beban acara dokumen/tetingkap ubah saiz skrol?
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()
$(document).ready() kaedah membolehkan kami memuatkan dokumen selepas ia dimuatkan sepenuhnya Laksanakan fungsi. 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 unsur <p> elemen diklik dua kali, peristiwa dblclick berlaku. Kaedah
dblclick() mencetuskan peristiwa 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").click(function(){
$(this).hide();
});
});
</script>
</head>mouseenter()
Apabila penuding tetikus melalui elemen, ia akan Peristiwa masuk tetikus berlaku. Kaedah
mouseenter() mencetuskan acara mouseenter, atau menentukan fungsi yang akan 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(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>雙擊鼠標(biāo)，我就消失。</p>
<p>雙擊我消失！</p>
<p>雙擊我也消失！</p>
</body>
</html>mouseleave()
Apabila penunjuk tetikus Apabila meninggalkan elemen, peristiwa meninggalkan tetikus berlaku. Kaedah mouseleave() mencetuskan acara mouseleave, atau menentukan fungsi untuk dijalankan apabila acara mouseleave 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("您的鼠標(biāo)移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠標(biāo)指針進(jìn)入此處，會(huì)看到彈窗。</p>
</body>
</html>mousedown()
Apabila penunjuk tetikus bergerak ke atas elemen, dan Peristiwa turun tetikus berlaku apabila 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").mouseleave(function(){
alert("再見，您的鼠標(biāo)離開了該段落。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</p>
</body>
</html>mouseup()
Apabila butang tetikus dilepaskan pada elemen , acara mouseup akan berlaku. Kaedah
mouseup() mencetuskan acara mouseup, atau menentukan fungsi yang akan dijalankan apabila acara mouseup 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("鼠標(biāo)在該段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落</p>
</body>
</html>hover()
hover() Kaedah yang digunakan untuk mensimulasikan peristiwa hover 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">
<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").mouseup(function(){
alert("鼠標(biāo)在段落上松開。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</p>
</body>
</html>fokus()
Apabila elemen mendapat fokus, peristiwa fokus berlaku. Apabila elemen dipilih dengan klik tetikus atau diletakkan dengan kekunci tab, elemen itu mendapat fokus. Kaedah
focus() mencetuskan acara fokus, atau menentukan fungsi yang akan dijalankan apabila acara fokus berlaku:
<!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("你進(jìn)入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</p>
</body>
</html>blur()
Apabila elemen hilang Apabila difokuskan, peristiwa kabur berlaku. Kaedah blur() mencetuskan acara kabur atau menentukan fungsi untuk dijalankan apabila peristiwa kabur 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><br>
Email: <input type="text" name="email">
</body>
</html>
