jQuery 事件方法

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	可选。规定要移除的特定函数。

9.jQuery 事件 - error() 方法

实例

如果图像不存在，则用一段预定义的文本取代它：

$("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()

亲自试一试

将函数绑定到 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 与 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 与 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 事件。请看下面例子的演示。

亲自试一试：mouseleave 与 mouseout 的不同

触发 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 事件。请看下面例子的演示。

亲自试一试：mouseenter 与 mouseover 的不同

触发 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() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

该方法也可用于切换被选元素的 hide() 与 show() 方法。

向 Toggle 事件绑定两个或更多函数

当指定元素被点击时，在两个或多个函数之间轮流切换。

如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。

语法

$(selector).toggle(function1(),function2(),functionN(),...)

参数	描述
function1()	必需。规定当元素在每偶数次被点击时要运行的函数。
function2()	必需。规定当元素在每奇数次被点击时要运行的函数。
functionN(),...	可选。规定需要切换的其他函数。

切换 Hide() 和 Show()

检查每个元素是否可见。

如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。

语法

$(selector).toggle(speed,callback)

参数	描述
speed	可选。规定 hide/show 效果的速度。默认是 "0"。 可能的值： 毫秒（比如 1500） "slow" "normal" "fast"
callback	可选。当 toggle() 方法完成时执行的函数。 如需学习更多有关 callback 的知识，请访问我们的 Callback 函数教程。

显示或隐藏元素

规定是否只显示或只隐藏所有匹配的元素。

语法

$(selector).toggle(switch)

参数	描述
switch	必需。布尔值，规定 toggle() 是否应只显示或只隐藏所有被选元素。 true - 显示元素 false - 隐藏元素

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 事件时运行的函数。