1.事件ready(fn)
当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。通俗的来讲就是当页面加载完时就会执行此函数事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
$(document).ready(function(){ // 在这里写你的代码... });
使用 $(document).ready() 的简写(最常用),同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。
$(function($) { // 你可以在这里继续使用$作为别名... });
2.单击事件 click([[data],fn])
触发每一个匹配元素的click事件。
这个函数会调用执行绑定到click事件的所有函数。
//为id为btn的按钮添加单击事件 $("#btn").click(function(){ alert("触发单击事件"); }) //单击p后,该p被隐藏 $("p").click( function () { $(this).hide(); });
3.双击事件 dblclick([[data],fn])
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。
//为id为btn的按钮添加双击事件 $("#btn").dblclick(function(){ alert("触发双击击事件"); })
4.鼠标移入事件 mousemove([[data],fn])
当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标
不论鼠标指针离开被选元素还是任何子元素,都会触发mousemove事件。只有在鼠标指针离开被选元素时,才会触发 mouseenter 事件。
//当鼠标移入页面获得鼠标指针在页面中的位置,显示在span中 $(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); });
5.鼠标移出事件 mouseout([[data],fn])
当鼠标指针从元素上移开时,发生 mouseout 事件。
该事件大多数时候会与 mouseover 事件一起使用。
注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。请看下面例子的演示。
//当鼠标从元素上移开时,改变元素的背景色: $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });
6.鼠标复合事件(hover([over,]out))
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
$("td").hover( //鼠标悬停的表格加上特定的类 function () { $(this).addClass("hover");//不同于js,addClass不会覆盖原来的类,而是可以两个类共用 }, //鼠标移出的表格加删除类 function () { $(this).removeClass("hover"); } );
7.键盘按下事件 keydown([[data],fn])
当键盘被按下时,发生 keydown 事件。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
$(window).keydown(function(event){ //当在页面按下键盘,弹出该键的Keycode alert(event.keyCode); // ... // 不同的按键可以做不同的事情 // 不同的浏览器的keycode不同 // 更多详细信息: http://unixpapa.comjs/key.html // 常用keyCode: 空格 32 Enter 13 ESC 27 });
8.键盘松开事件 keyup([[data],fn])
当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
$("input").keyup(function(){ //键盘松开,改变文本域颜色 $("input").css("background-color","red"); });
9.键盘打字事件 keypress([[data],fn])
当键盘或按钮被按下时,发生 keypress 事件。
keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
$("input").keypress(function(){ //键盘产生可打印字符 alert(“键盘打字”); });
10.元素获得焦点 focus([[data],fn])
当元素获得焦点时,触发 focus 事件。
可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。
//为type=text的文本框添加获得焦点事件 $("input[type=text]").focus(function(){ //使人无法使用文本框: this.blur();//当前节点失去焦点 });
11.元素失去焦点 blur([[data],fn])
当元素失去焦点时触发 blur 事件。
这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。
//任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。 $("p").blur( function () { alert("Hello World!"); } );
12.元素值改变 change([[data],fn])
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
$("input[type='text']").change( function() { // 这里可以写些验证代码 });
13.表单提交事件 submit([[data],fn])
当提交表单时,会发生 submit 事件。
该事件只适用于表单元素。
//提交本页的第一个表单 $("form:first").submit(); //如果你要阻止表单提交: $("form").submit( function () { return false; } );
标签:jquery,function,常见,鼠标,触发,元素,几种,事件,fn
From: https://www.cnblogs.com/cloudnine/p/17516357.html