acara jQuery

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>點(diǎn)我我就不見了！</p>
<p>我們?nèi)齻€都是的！</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>雙擊鼠標(biāo)左鍵的，我就消失。</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>不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。</p>
<p>只有在鼠標(biāo)指針穿過被選元素時，才會觸發(fā) mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被觸發(fā)的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被觸發(fā)的 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中文網(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">這是一個段落。</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").mousedown(function(){
    alert("鼠標(biāo)在該段落上按下！");
  });
});
</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中文網(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">這是一個段落。</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("你進(jìn)入了 p1!");
    },
    function(){
    alert("拜拜! 現(xiàn)在你離開了 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中文網(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>

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中文網(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>

Meneruskan pembelajaran

fail baharu

<!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>點(diǎn)我我就不見了！</p> <p>我們?nèi)齻€都是的！</p> <p>他們說的是真的！</p> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik