jQuery入门(5):事件

事件

页面载入
ready(fn):
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){

 // Your code here...

});

或者直接:当然jQuery可以为$

jQuery(function() {

 // Your code using failsafe $ alias here...

});

 

事件处理
bind(type,data,fn)
为每一个匹配元素的特定事件click绑定一个事件处理器函数

当每个段落被点击的时候,弹出其文本。

$("p").bind("click", function(){

 alert( $(this).text() );

});

可以在事件处理之前传递一些附加的数据。

function handler(event) {

 alert(event.data.foo);

}

$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })

通过使用 preventDefault() 方法只取消默认的行为。

$("form").bind("submit", function(event){

 event.preventDefault();

});

通过使用 stopPropagation() 方法只阻止一个事件起泡。

$("form").bind("submit", function(event){

 event.stopPropagation();

});

 

one(type,data,fn):为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数

当所有段落被第一次点击的时候,显示所有其文本。

$("p").one("click", function(){

 alert( $(this).text() );

});

 

trigger(type,data):在每一个匹配的元素上触发某类事件

提交第一个表单

$("form:first").trigger("submit")

给一个事件传递参数

$("p").click( function (event, a, b) {

 // 一个普通的点击事件时,a和b是undefined类型

 // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"

} ).trigger("click", ["foo", "bar"]);

下面的代码可以显示一个"Hello World"

$("p").bind("myEvent", function (event, message1, message2) {

 alert(message1 + ' ' + message2);

});

$("p").trigger("myEvent", ["Hello","World!"]);

 

triggerHandler(type,data):这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作

例:如果你对一个focus事件执行了 .triggerHandler(),浏览器默认动作将不会被触发,只会触发你绑定的动作。

<button id="old">.trigger("focus")</button>

<button id="new">.triggerHandler("focus")</button><br/><br/>

<input type="text" value="To Be Focused"/>

代码:

$("#old").click(function(){

 $("input").trigger("focus");

});

$("#new").click(function(){

 $("input").triggerHandler("focus");

});

$("input").focus(function(){   $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });

 

unbind(type,data):bind()的反向操作,从每一个匹配的元素中删除绑定的事件

把所有段落的所有事件取消绑定

$("p").unbind()

将段落的click事件取消绑定

$("p").unbind( "click" )

删除特定函数的绑定,将函数作为第二个参数传入

var foo = function () {

 // code to handle some kind of event

};

$("p").bind("click", foo);

$("p").unbind("click", foo);

 

交互处理
hover(over,out):
一个模仿悬停事件的方法(修正了使用mouseout事件的一个常见错误)。

over (Function) : 鼠标移到元素上要触发的函数

out (Function) : 鼠标移出元素要触发的函数

鼠标悬停的表格加上特定的类

$("td").hover(

 function () {

    $(this).addClass("hover");

 },

 function () {

    $(this).removeClass("hover");

 }

);

 

toggle(fn,fn):每次点击时切换要调用的函数

fn (Function) : 第奇数次点击时要执行的函数。

fn (Function) : 第偶数次点击时要执行的函数。

对表格的切换一个类

$("td").toggle(

 function () {

    $(this).addClass("selected");

 },

 function () {

    $(this).removeClass("selected");

 }

);

 

ALL事件
blur()/blur(fn)

说明:触发每一个匹配元素的blur事件/或者绑定一个事件处理函数

使用:$("p").blur(); /$("p").blur( function () { alert("Hello World!"); } );

 

change()/change(fn)

click()/click(fn)

dblclick()/dblclick(fn)

error()/error(fn)

focus()/focus(fn)

keydown()/keydown(fn)

keypress()/keypress(fn)

keyup()/keyup(fn)

 

load(fn)

mousedown(fn)

mousemove(fn)

mouserout(name)/blur(fn)

 

mouseover(fn)

mouseup(fn)

rasize(fn) 当文档窗口改变大小时触发

$(document).resize(function(){

 alert("Stop it!");

});

 

scroll(fn) 当滚动条发生变化时触发

$(document).scroll( function() { /* ...do something... */ } );

 

select()/select(fn)

 

submit()/submit(fn)

$("form").submit( function () {

 return false;

} );

 

upload(fn)

页面卸载的时候弹出一个警告框: $(document).unload( function () { alert("Bye now!"); } );

 

 

posted @ 2008-11-09 22:24  Astar  阅读(649)  评论(0编辑  收藏  举报