jQuery 是为响应 HTML 页面中的事件而定制的。
1.什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如:"当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件: $("p").click();
下一步是定义触发事件时应该发生什么,必须向事件传递函数:
$("p").click(function(){// 动作触发后执行的代码!!
});
2.常用的 jQuery 事件方法:
$(document).ready( ) ——该方法允许我们在文档完全加载完后执行函数。
例如:当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素 注意:理解加色代码的结构层次
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script>
$(document).ready( function(){
$("p").click(function(){
$(this).hide();
});
} );
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
鼠标事件:
1)click( )
方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户单击 HTML 元素时执行。
2)dblclick()
方法将事件处理程序函数附加到HTML元素。
该函数在用户双击HTML元素时执行。
3)mouseenter()
方法将事件处理程序函数附加到HTML元素。
当鼠标指针进入 HTML 元素时,将执行该函数。
4)mouseleave()
方法将事件处理程序函数附加到HTML元素。
当鼠标指针离开HTML元素时,将执行该函数。
5)hover()
方法包含两个函数,是 mouseenter()
和 mouseleave()
方法的组合。
第一个函数在鼠标进入 HTML 元素时执行,第二个函数在鼠标离开 HTML 元素时执行
.........
键盘事件:
- keydown - 键按下的过程:
当键盘键被按下时发生 keydown 事件。(例子:jquery 代码测试 - W3schools 在线编辑器)
keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。
- keypress - 键被按下: (例子:jquery 代码测试 - W3schools 在线编辑器)
keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。
keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。
然而,keypress 事件不会触发所有的键(比如 ALT、CTRL、SHIFT、ESC)。
- keyup - 键被松开: (例子:jquery 代码测试 - W3schools 在线编辑器)
当键盘键被松开时发生 keyup 事件。
keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。
.........
表单事件
1.blur:当元素失去焦点时发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。
提示: 该方法常与 focus() 方法一起使用。
2.focus:当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
提示: 该方法通常与 blur() 方法一起使用。
3.submit:当提交表单时,会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
4.change:当元素的值改变时发生 change 事件(仅适用于表单字段)。
change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。
注释: 当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。
...........标签:Jquery,触发,函数,元素,介绍,HTML,事件,方法 From: https://www.cnblogs.com/zfj0318/p/16627814.html