Peristiwa 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 elemen klik butang radio
Istilah "pencetus" (atau "api") sering digunakan dalam acara seperti: "Acara menekan kekunci dicetuskan apabila anda menekan kekunci".
Senarai acara.
1.blur() Dicetuskan apabila fokus hilang. Termasuk klik tetikus untuk pergi dan kekunci TAB untuk pergi.
2.change() Ia dicetuskan apabila nilai berubah dan elemen kehilangan fokus.
3.klik() Dicetuskan apabila tetikus diklik.
4.dblclick() Dicetuskan apabila tetikus diklik dua kali.
5.error() Dicetuskan apabila ralat JavaScript berlaku atau atribut src img tidak sah.
6.focus() Dipecat apabila elemen mendapat fokus. Nota: Sesetengah objek tidak disokong.
7.focusin() Dicetuskan apabila elemen atau sub-elemennya mendapat fokus. Perbezaan daripada fokus() ialah ia boleh mengesan apabila sub-elemen dalamannya mendapat fokus.
8.focusout() Dicetuskan apabila elemen atau sub-elemennya kehilangan fokus. Perbezaan daripada focusout() ialah ia boleh mengesan apabila sub-elemen dalaman kehilangan fokus.
9.keydown() Dicetuskan apabila papan kekunci ditekan.
10.keyup() Dicetuskan apabila kunci dilepaskan.
11.mousedown() Dicetuskan apabila tetikus diklik pada elemen.
12.mouseenter() Dicetuskan apabila tetikus melepasi elemen. Perbezaan antara mouseenter dan mouseover ialah ia juga akan dicetuskan apabila tetikus melepasi elemen anak mouseover, tetapi mouseenter tidak.
13.mouseleave() Dipecat apabila tetikus bergerak keluar dari elemen.
14.mousemove() Dipecat apabila tetikus bergerak ke atas elemen. .clientX dan .clientY masing-masing mewakili koordinat X dan koordinat Y tetikus.
15.mouseout() Dipecat apabila tetikus bergerak menjauhi elemen.
16.mouseover() Dipecat apabila tetikus bergerak ke dalam elemen.
17.mouseup() Dicetuskan apabila butang kiri tetikus ditekan dan dilepaskan.
18.resize() Dicetuskan apabila saiz tetingkap penyemak imbas berubah. $(window).resize();
19.scroll() Dipecat apabila bar skrol berubah.
20.select() Dicetuskan apabila kandungan dalam input dipilih.
21.submit() Hantar borang yang dipilih.
22.unload() Dicetuskan apabila halaman dipunggah.
Sintaks kaedah acara jQuery
Dalam jQuery, kebanyakan acara DOM mempunyai kaedah jQuery yang setara.
Tentukan acara klik pada halaman:
$("p").click();
Langkah seterusnya ialah menentukan bila acara itu dicetuskan. 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 berikut, apabila peristiwa klik dicetuskan pada elemen <p> <p> semasa disembunyikan:
<!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(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>点我我就不见了！</p>
<p>我们三个都是的！</p>
<p>他们说的是真的！</p>
</body>
</html>dblclick()
Apabila 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">
<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>mouseenter(), mouseover() perbandingan:
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>mouseleave( )
Peristiwa mouseleave berlaku apabila penunjuk tetikus meninggalkan elemen. Kaedah
mouseleave() mencetuskan acara mouseleave, atau menentukan fungsi untuk dijalankan apabila acara mouseleave berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</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中文网(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>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中文网(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("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>hover()
kaedah hover() ialah digunakan untuk mensimulasikan acara Henti 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">
<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("拜拜! 现在你离开了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>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中文网(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>kabur()
Apabila elemen kehilangan fokus, peristiwa kabur berlaku. Kaedah
blur() mencetuskan peristiwa kabur, atau menentukan fungsi untuk dijalankan apabila peristiwa kabur berlaku:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>
bahagian seterusnya