1.列表
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
2.jQuery 事件 - bind() 方法
实例
当点击鼠标时,隐藏或显示 p 元素:
$("button").bind("click",function(){ $("p").slideToggle(); });
定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
将事件和函数绑定到元素
规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数。
语法
$(selector).bind(event,data,function)
参数 | 描述 |
---|---|
event | 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
替代语法
$(selector).bind({event:function, event:function, ...})
参数 | 描述 |
---|---|
{event:function, event:function, ...} | 必需。规定事件映射,其中包含一个或多个添加到元素的事件,以及当事件发生时运行的函数。 |
3.jQuery 事件 - blur() 方法
实例
当输入域失去焦点 (blur) 时改变其颜色:
$("input").blur(function(){ $("input").css("background-color","#D6D6FF"); });
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素。
触发 blur 事件
触发被选元素的 blur 事件。
语法
$(selector).blur()
将函数绑定到 blur 事件
规定当被选元素的 blur 事件发生时运行的函数。
语法
$(selector).blur(function)
参数 | 描述 |
---|---|
function | 可选。规定当 blur 事件发生时运行的函数。 |
4.jQuery 事件 - change() 方法
实例
当输入域发生变化时改变其颜色:
$(".field").change(function(){ $(this).css("background-color","#FFFFCC"); });
定义和用法
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
触发 change 事件
触发被选元素的 change 事件。
语法
$(selector).change()
将函数绑定到 change 事件
规定当被选元素的 change 事件发生时运行的函数。
语法
$(selector).change(function)
参数 | 描述 |
---|---|
function | 可选。规定当 change 事件发生时运行的函数。 |
5.jQuery 事件 - click() 方法
实例
当点击按钮时,隐藏或显示元素:
$("button").click(function(){ $("p").slideToggle(); });
定义和用法
当点击元素时,会发生 click 事件。
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
触发 click 事件
语法
$(selector).click()
将函数绑定到 click 事件
语法
$(selector).click(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 click 事件时运行的函数。 |
6.jQuery 事件 - dblclick() 方法
实例
当双击按钮时,隐藏或显示元素:
$("button").dblclick(function(){ $("p").slideToggle(); });
定义和用法
当双击元素时,会发生 dblclick 事件。
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。
在很短的时间内发生两次 click,即是一次 double click 事件。
dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数。
提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。
触发 dblclick 事件
语法
$(selector).dblclick()
将函数绑定到 dblclick 事件
语法
$(selector).dblclick(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 dblclick 事件时运行的函数。 |
7.jQuery 事件 - delegate() 方法
实例
当点击鼠标时,隐藏或显示 p 元素:
$("div").delegate("button","click",function(){ $("p").slideToggle(); });
定义和用法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
语法
$(selector).delegate(childSelector,event,data,function)
参数 | 描述 |
---|---|
childSelector | 必需。规定要附加事件处理程序的一个或多个子元素。 |
event | 必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
8.jQuery 事件 - die() 方法
实例
移除所有通过 live() 方法向 p 元素添加的事件处理程序:
$("p").die();
定义和用法
die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
语法
$(selector).die(event,function)
参数 | 描述 |
---|---|
event | 必需。规定要移除的一个或多个事件处理程序。 由空格分隔多个事件值。必须是有效的事件。 |
function | 可选。规定要移除的特定函数。 |
实例
如果图像不存在,则用一段预定义的文本取代它:
$("img").error(function(){ $("img").replaceWith("Missing image!
"); });
定义和用法
当元素遇到错误(没有正确载入)时,发生 error 事件。
error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。
提示:该方法是 bind('error', handler) 的简写方式。
触发 error 事件
语法
$(selector).error()
将函数绑定到 error 事件
语法
$(selector).error(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 error 事件时运行的函数。 |
10.jQuery 事件 - isDefaultPrevented() 方法
实例
防止链接打开 URL,并声明来自 isDefaultPrevented() 的结果:
$("a").click(function(event){
event.preventDefault();
alert("Default prevented: " + event.isDefaultPrevented()
);
});
定义和用法
isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法。
语法
event.isDefaultPrevented()
参数 | 描述 |
---|---|
event | 必需。规定需要检查的事件。这个 event 参数来自事件绑定函数。 |
11.jQuery 事件 - pageX 属性
实例
显示鼠标指针的位置:
$(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); });
定义和用法
pageX() 属性是鼠标指针的位置,相对于文档的左边缘。
语法
event.pageX
参数 | 描述 |
---|---|
event | 必需。规定要使用的事件。这个 event 参数来自事件绑定函数。 |
12.jQuery 事件 - pageY 属性
实例
显示鼠标指针的位置:
$(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); });
定义和用法
pageY() 属性是鼠标指针的位置,相对于文档的上边缘。
语法
event.pageY
参数 | 描述 |
---|---|
event | 必需。规定要使用的事件。这个 event 参数来自事件绑定函数。 |
13.jQuery 事件 - preventDefault() 方法
实例
防止链接打开 URL:
$("a").click(function(event){ event.preventDefault(); });
定义和用法
preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
语法
event.preventDefault()
参数 | 描述 |
---|---|
event | 必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。 |
14.jQuery 事件 - result 属性
实例
显示最后一次点击事件返回的结果:
$("button").click(function(e) {
$("p").html(e.result
);
});
定义和用法
result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义。
语法
event.result
参数 | 描述 |
---|---|
event | 必需。规定返回的最后一个值来自哪个事件。这个 event 参数来自事件绑定函数。 |
15.jQuery 事件 - target 属性
实例
显示哪个 DOM 元素触发了事件:
$("p, button, h1, h2").click(function(event){
$("div").html("Triggered by a " + event.target.nodeName
+ " element.");
});
定义和用法
target 属性规定哪个 DOM 元素触发了该事件。
语法
event.target
参数 | 描述 |
---|---|
event | 必需。规定需要检查的事件。这个 event 参数来自事件绑定函数。 |
16.jQuery 事件 - timeStamp 属性
实例
显示出当对按钮元素的点击事件发生时的时间戳:
$("button").click(function(event){ $("span")html(event.timeStamp); });
定义和用法
timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。
语法
event.timeStamp
参数 | 描述 |
---|---|
event | 必需。规定返回该时间戳的事件。这个 event 参数来自事件绑定函数。 |
17.jQuery 事件 - type 属性
实例
显示触发了哪种类型的事件:
$("p").bind('click dblclick mouseover mouseout',function(event){
$("div").html("Event: " + event.type
);
});
定义和用法
type 属性描述触发哪种事件类型。
语法
event.type
参数 | 描述 |
---|---|
event | 必需。规定要检查的事件。这个 event 参数来自事件绑定函数。 |
18.jQuery 事件 - which 属性
实例
显示按了哪个键:
$("input").keydown(function(event){
$("div").html("Key: " + event.which
);
});
定义和用法
which 属性指示按了哪个键或按钮。
语法
event.which
参数 | 描述 |
---|---|
event | 必需。规定要检查的事件。这个 event 参数来自事件绑定函数。 |
19.jQuery 事件 - focus() 方法
实例
当输入框获得焦点时,改变它的背景色:
$("input").focus(function(){ $("input").css("background-color","#FFFFCC"); });
定义和用法
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
触发 focus 事件
语法
$(selector).focus()
将函数绑定到 focus 事件
语法
$(selector).focus(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 focus 事件时运行的函数。 |
20.jQuery 事件 - keydown() 方法
实例
当按下按键时,改变文本域的颜色:
$("input").keydown(function(){ $("input").css("background-color","#FFFFCC"); });
定义和用法
完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。
当按钮被按下时,发生 keydown 事件。
keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
提示:请使用 .which 属性来确定按下了哪个按键。
将函数绑定到 keydown 事件
语法
$(selector).keydown(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 keydown 事件时运行的函数。 |
21.jQuery 事件 - keypress() 方法
实例
计算在输入域中的按键次数:
$("input").keydown(function(){ $("span").text(i+=1); });
定义和用法
keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。
不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。
keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
触发 keypress 事件
语法
$(selector).keypress()
将函数绑定到 keypress 事件
语法
$(selector).keypress(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 keypress 事件时运行的函数。 |
22.jQuery 事件 - keyup() 方法
实例
当按下按键时,改变文本域的颜色:
$("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); });
定义和用法
完整的 key press 过程分为两个部分,按键被按下,然后按键被松开并复位。
当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
提示:请使用 .which 属性来确定按下了哪个按键。
触发 keyup 事件
语法
$(selector).keyup()
将函数绑定到 keyup 事件
语法
$(selector).keyup(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 keyup 事件时运行的函数。 |
23.jQuery 事件 - live() 方法
实例
当点击按钮时,隐藏或显示 p 元素:
$("button").live("click",function(){ $("p").slideToggle(); });
定义和用法
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
语法
$(selector).live(event,data,function)
参数 | 描述 |
---|---|
event | 必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。 |
data | 可选。规定传递到该函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
24.jQuery 事件 - load() 方法
实例
当图像加载时,改变 div 元素的文本:
$("img").load(function(){ $("div").text("Image loaded"); });
定义和用法
当指定的元素(及子元素)已加载时,会发生 load() 事件。
该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。
根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。
注释:还存在一个名为 load() 的 jQuery Ajax 方法,根据不同的参数而定。
语法
$(selector).load(function)
参数 | 描述 |
---|---|
function | 必需。规定当指定元素加载完成时运行的函数。 |
25.jQuery 事件 - mousedown() 方法
实例
当按下鼠标按钮时,隐藏或显示元素:
$("button").mousedown(function(){ $("p").slideToggle(); });
定义和用法
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数。
触发 mousedown 事件
语法
$(selector).mousedown()
将函数绑定到 mousedown 事件
语法
$(selector).mousedown(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 mousedown 事件时运行的函数。 |
26.jQuery 事件 - mouseenter() 方法
实例
当鼠标指针进入(穿过)元素时,改变元素的背景色:
$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
定义和用法
当鼠标指针穿过元素时,会发生 mouseenter 事件。
该事件大多数时候会与 mouseleave 事件一起使用。
mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数。
注释:与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。请看下面例子的演示。
触发 mouseenter 事件
语法
$(selector).mouseenter()
将函数绑定到 mouseenter 事件
语法
$(selector).mouseenter(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 mouseenter 事件时运行的函数。 |
27.jQuery 事件 - mouseleave() 方法
实例
当鼠标指针离开元素时,改变元素的背景色:
$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });
定义和用法
当鼠标指针离开元素时,会发生 mouseleave 事件。
该事件大多数时候会与 mouseenter 事件一起使用。
mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数。
注释:与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。请看下面例子的演示。
触发 mouseleave 事件
语法
$(selector).mouseleave()
将函数绑定到 mouseleave 事件
语法
$(selector).mouseleave(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 mouseleave 事件时运行的函数。 |
28.jQuery 事件 - mousemove() 方法
实例
获得鼠标指针在页面中的位置:
$(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); });
定义和用法
当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
mousemove() 方法触发 mousemove 事件,或规定当发生 mousemove 事件时运行的函数。
注意:用户把鼠标移动一个像素,就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。
触发 mousemove 事件
语法
$(selector).mousemove()
将函数绑定到 mousemove 事件
语法
$(selector).mousemove(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 mousemove 事件时运行的函数。 |
29.jQuery 事件 - mouseout() 方法
实例
当鼠标从元素上移开时,改变元素的背景色:
$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });
定义和用法
当鼠标指针从元素上移开时,发生 mouseout 事件。
该事件大多数时候会与 mouseover 事件一起使用。
mouseout() 方法触发 mouseout 事件,或规定当发生 mouseout 事件时运行的函数。
注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。请看下面例子的演示。
触发 mouseout 事件
语法
$(selector).mouseout()
将函数绑定到 mouseout 事件
语法
$(selector).mouseout(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 mouseout 事件时运行的函数。 |
30.jQuery 事件 - mouseover() 方法
实例
当鼠标指针位于元素上方时时,改变元素的背景色:
$("p").mouseover(function(){ $("p").css("background-color","yellow"); });
定义和用法
当鼠标指针位于元素上方时,会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。
mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数。
注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。请看下面例子的演示。
触发 mouseover 事件
语法
$(selector).mouseover()
将函数绑定到 mouseover 事件
语法
$(selector).mouseover(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 mouseover 事件时运行的函数。 |
31.jQuery 事件 - mouseup() 方法
实例
当松开鼠标按钮时,隐藏或显示元素:
$("button").mouseup(function(){ $("p").slideToggle(); });
定义和用法
当在元素上放松鼠标按钮时,会发生 mouseup 事件。
与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数。
触发 mouseup 事件
语法
$(selector).mouseup()
将函数绑定到 mouseup 事件
语法
$(selector).mouseup(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 mouseup 事件时运行的函数。 |
32.jQuery 事件 - one() 方法
实例
当点击 p 元素时,增加该元素的文本大小:
$("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); });
定义和用法
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法
$(selector).one(event,data,function)
参数 | 描述 |
---|---|
event | 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
33.jQuery 事件 - ready() 方法
实例
在文档加载后激活函数:
$(document).ready(function(){ $(".btn1").click(function(){ $("p").slideToggle(); }); });
定义和用法
当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档,因此无需选择器。
允许使用以下三种语法:
语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)
参数 | 描述 |
---|---|
function | 必需。规定当文档加载后要运行的函数。 |
34.jQuery 事件 - resize() 方法
实例
对浏览器窗口调整大小进行计数:
$(window).resize(function() { $('span').text(x+=1); });
定义和用法
当调整浏览器窗口的大小时,发生 resize 事件。
resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。
触发 resize 事件
语法
$(selector).resize()
将函数绑定到 resize 事件
语法
$(selector).resize(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 resize 事件时运行的函数。 |
35.jQuery 事件 - scroll() 方法
实例
对元素滚动的次数进行计数:
$("div").scroll(function() { $("span").text(x+=1); });
定义和用法
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
触发 scroll 事件
语法
$(selector).scroll()
将函数绑定到 scroll 事件
语法
$(selector).scroll(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 scroll 事件时运行的函数。 |
36.jQuery 事件 - select() 方法
实例
在文本域后添加文本,以显示出提示文本:
$("input").select(function(){ $("input").after(" Text marked!"); });
定义和用法
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
select() 方法触发 select 事件,或规定当发生 select 事件时运行的函数。
触发 select 事件
语法
$(selector).select()
将函数绑定到 select 事件
语法
$(selector).select(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 select 事件时运行的函数。 |
37.jQuery 事件 - submit() 方法
实例
当提交表单时,显示警告框:
$("form").submit(function(e){ alert("Submitted"); });
定义和用法
当提交表单时,会发生 submit 事件。
该事件只适用于表单元素。
submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
触发 submit 事件
语法
$(selector).submit()
将函数绑定到 submit 事件
语法
$(selector).submit(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 submit 事件时运行的函数。 |
38.jQuery 事件 - toggle() 方法
实例
切换不同的背景色:
$("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");} );
向 Toggle 事件绑定两个或更多函数
当指定元素被点击时,在两个或多个函数之间轮流切换。
如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
语法
$(selector).toggle(function1(),function2(),functionN(),...)
参数 | 描述 |
---|---|
function1() | 必需。规定当元素在每偶数次被点击时要运行的函数。 |
function2() | 必需。规定当元素在每奇数次被点击时要运行的函数。 |
functionN(),... | 可选。规定需要切换的其他函数。 |
切换 Hide() 和 Show()
检查每个元素是否可见。
如果元素已隐藏,则运行 show()。如果元素可见,则元素 hide()。这样就可以创造切换效果。
语法
$(selector).toggle(speed,callback)
参数 | 描述 |
---|---|
speed | 可选。规定 hide/show 效果的速度。默认是 "0"。 可能的值:
|
callback | 可选。当 toggle() 方法完成时执行的函数。 如需学习更多有关 callback 的知识,请访问我们的 Callback 函数教程。 |
显示或隐藏元素
规定是否只显示或只隐藏所有匹配的元素。
语法
$(selector).toggle(switch)
参数 | 描述 |
---|---|
switch | 必需。布尔值,规定 toggle() 是否应只显示或只隐藏所有被选元素。
|
39.jQuery 事件 - trigger() 方法
实例
触发 input 元素的 select 事件:
$("button").click(function(){ $("input").trigger("select"); });
定义和用法
trigger() 方法触发被选元素的指定事件类型。
触发事件
规定被选元素要触发的事件。
语法
$(selector).trigger(event,[param1,param2,...])
参数 | 描述 |
---|---|
event | 必需。规定指定元素要触发的事件。 可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。 |
[param1,param2,...] | 可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。 |
使用 Event 对象来触发事件
规定使用事件对象的被选元素要触发的事件。
语法
$(selector).trigger(eventObj)
参数 | 描述 |
---|---|
eventObj | 必需。规定事件发生时运行的函数。 |
40.jQuery 事件 - triggerHandler() 方法
实例
触发 input 元素的 select 事件:
$("button").click(function(){ $("input").triggerHandler("select"); });
定义和用法
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。
与 trigger() 方法相比的不同之处
- 它不会引起事件(比如表单提交)的默认行为
- .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
- 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
- 该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined。
触发事件
规定被选元素要触发的事件。
语法
$(selector).triggerHandler(event,[param1,param2,...])
参数 | 描述 |
---|---|
event | 必需。规定指定元素要触发的事件。 |
[param1,param2,...] | 可选。传递到事件处理程序的额外参数。 |
41.jQuery 事件 - unbind() 方法
实例
移除所有 p 元素的事件处理器:
$("button").click(function(){ $("p").unbind(); });
定义和用法
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
ubind() 适用于任何通过 jQuery 附加的事件处理程序。
取消绑定元素的事件处理程序和函数
规定从指定元素上删除的一个或多个事件处理程序。
如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
语法
$(selector).unbind(event,function)
参数 | 描述 |
---|---|
event | 可选。规定删除元素的一个或多个事件 由空格分隔多个事件值。 如果只规定了该参数,则会删除绑定到指定事件的所有函数。 |
function | 可选。规定从元素的指定事件取消绑定的函数名。 |
使用 Event 对象来取消绑定事件处理程序
规定要删除的事件对象。用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)。
如果未规定参数,则 unbind() 方法会删除指定元素的所有事件处理程序。
语法
$(selector).unbind(eventObj)
参数 | 描述 |
---|---|
eventObj | 可选。规定要使用的事件对象。这个 eventObj 参数来自事件绑定函数。 |
42.jQuery 事件 - undelegate() 方法
实例
从所有元素删除由 delegate() 方法添加的所有事件处理器:
$("body").undelegate();
定义和用法
undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
语法
$(selector).undelegate(selector,event,function)
参数 | 描述 |
---|---|
selector | 可选。规定需要删除事件处理程序的选择器。 |
event | 可选。规定需要删除处理函数的一个或多个事件类型。 |
function | 可选。规定要删除的具体事件处理函数。 |
43.jQuery 事件 - unload 属性
实例
当用户点击链接离开本页时,弹出一个消息框:
$(window).unload(function(){ alert("Goodbye!"); });
定义和用法
当用户离开页面时,会发生 unload 事件。
具体来说,当发生以下情况时,会发出 unload 事件:
- 点击某个离开页面的链接
- 在地址栏中键入了新的 URL
- 使用前进或后退按钮
- 关闭浏览器
- 重新加载页面
unload() 方法将事件处理程序绑定到 unload 事件。
unload() 方法只应用于 window 对象。
语法
event.unload(function)
参数 | 描述 |
---|---|
function | 必需。规定当触发 unload 事件时运行的函数。 |