Rumah > Artikel > hujung hadapan web > Bolehkah jquery mendengar acara?
Bolehkah jquery mendengar acara?
- 青灯夜游asal
- 2022-04-28 14:02:271990semak imbas
jquery boleh mendengar acara. jquery menyediakan pelbagai kaedah pemantauan acara: 1. click(), yang boleh memantau peristiwa klik dan menentukan fungsi pemprosesan acara 2. change(), yang boleh memantau peristiwa perubahan dan menentukan fungsi pemprosesan acara; boleh Memantau acara klik dua kali 4. hover(), dsb.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
jquery boleh mendengar acara.
jquery menyediakan pelbagai kaedah untuk mendengar acara, seperti klik(), on() dan kaedah lain. Berikut adalah beberapa kaedah.
1. Kaedah Klik():
Kaedah klik() menentukan fungsi untuk dijalankan apabila peristiwa klik berlaku
Contoh: Klik< ; elemen p> ialah teks amaran
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").click(function() {
alert("段落被点击了。");
});
});
</script>
</head>
<body>
<p>点击这个段落。</p>
</body>
</html>
kaedah change()
kaedah change() menentukan bila perubahan berlaku Fungsi untuk dijalankan pada acara.
Contoh: Teks makluman apabila medan berubah
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("文本已被修改");
});
});
</script>
</head>
<body>
<input type="text">
<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>
</body>
</html>
3 dblclick()
Kaedah dblclick() menentukan fungsi yang akan dijalankan apabila peristiwa dwiklik berlaku.
Contoh: Teks makluman apabila elemen
diklik dua kali
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").dblclick(function() {
alert("这个段落被双击。");
});
});
</script>
</head>
<body>
<p>双击这个段落。</p>
</body>
</html>
kaedah tuding()
Kaedahhover() menentukan dua fungsi untuk dijalankan apabila penunjuk tetikus melayang di atas elemen yang dipilih. Kaedah
mencetuskan peristiwa masuk tetikus dan meninggalkan tetikus.
Contoh: Tukar warna latar belakang elemen
apabila penunjuk tetikus melayang di atasnya
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("p").hover(function() {
$("p").css("background-color", "yellow");
}, function() {
$("p").css("background-color", "pink");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>
Acara mendengar Kaedah lain
| 方法 | 描述 |
|---|---|
| bind() | 向元素添加事件处理程序 |
| blur() | 添加/触发失去焦点事件 |
| delegate() | 向匹配元素的当前或未来的子元素添加处理程序 |
| die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
| error() | 在版本 1.8 中被废弃。添加/触发 error 事件 |
| focus() | 添加/触发 focus 事件 |
| focusin() | 添加事件处理程序到 focusin 事件 |
| focusout() | 添加事件处理程序到 focusout 事件 |
| keydown() | 添加/触发 keydown 事件 |
| keypress() | 添加/触发 keypress 事件 |
| keyup() | 添加/触发 keyup 事件 |
| live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
| load() | 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 |
| mousedown() | 添加/触发 mousedown 事件 |
| mouseenter() | 添加/触发 mouseenter 事件 |
| mouseleave() | 添加/触发 mouseleave 事件 |
| mousemove() | 添加/触发 mousemove 事件 |
| mouseout() | 添加/触发 mouseout 事件 |
| mouseover() | 添加/触发 mouseover 事件 |
| mouseup() | 添加/触发 mouseup 事件 |
| off() | 移除通过 on() 方法添加的事件处理程序 |
| on() | 向元素添加事件处理程序 |
| one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
| resize() | 添加/触发 resize 事件 |
| scroll() | 添加/触发 scroll 事件 |
| select() | 添加/触发 select 事件 |
| submit() | 添加/触发 submit 事件 |
| trigger() | 触发绑定到被选元素的所有事件 |
| triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 |
| unbind() | 从被选元素上移除添加的事件处理程序 |
| undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
| unload() | 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 |
| contextmenu() | 添加事件处理程序到 contextmenu 事件 |
[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]
Atas ialah kandungan terperinci Bolehkah jquery mendengar acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!