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

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

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").mouseleave(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").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
});
</script>
</head>
<body>
<p id="p1">这是一个段落</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中文网(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>

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("你进入了 p1!");
    },
    function(){
    alert("拜拜! 现在你离开了 p1!");
  }); 
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</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中文网(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>

Meneruskan pembelajaran

fail baharu

<!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(){ var divdbl = $("div"); divdbl.dblclick(function () { divdbl.toggleClass('dbl'); }); }); </script> <style> div.dbl { background:yellow;color:black; } </style> </head> <body> <div style="font-size:22px;">双击，然后再双击</div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

acara jQuery

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]