您的位置:首页 > Web前端 > JQuery

jQuery 事件绑定(event)学习笔记

2013-09-05 20:25 706 查看
event事件绑定在jquery中是一个很常用字并且也是非常方法的一个用法,像我们所有函数都可以不写在容器上,可以直接给容器定义一个ID或class然后就可以直接绑定事件了。
本篇主要记录jQuery事件响应的处理
50. bind(type, data, fn)对所有选定的element判断事件,type是事件类型,data是参数,fn是事处理方法.
eg:1. $("p").bind("click", function(){ alert( $(this).text() ); });
2. function handler(event) { alert(event.data.foo); }
$("p").bind("click", {foo: "bar"}, handler)==>alert("bar")
51. blur() 触发blur方法,blur(fn)设置blur函数
eg: <p>Hello</p>
$("p").blur( function() { alert("Hello"); } );==>
<p onblur="alert('Hello');">Hello</p>
52. change(fn)设置onchange事件的方法
eg:<p>Hello</p>
$("p").change( function() { alert("Hello"); } );==><p onchange="alert('Hello');">Hello</p>
53 click()触发onclick事件, click(fn)设置onclick方法

54. dblclick(fn)设置ondblclick方法
55.error(fn)设置error方法
56 focus()触发onfocus,focus(fn)设置focus方法
eg:<p>Hello</p>
$("p").focus( function() { alert("Hello"); } );
==><p onfocus="alert('Hello');">Hello</p>
57 hover(over, out) 设置mouse移入以及mouse移出时所触发的事件.
eg: $("p").hover(function(){
$(this).addClass("over");
},function(){
$(this).addClass("out");
});
keydown(fn),keypress(fn),keyup(fn),按键盘相关的操作分别对应onkeydown,onkeypress,onkeyup.
mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),mouseup(fn)这些是mouse相关的操作分别对应onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.60 load 当element load事件发生时触发eg <p>Hello</p>$("p").load( function() { alert("Hello"); } );==><p onload="alert('Hello');">Hello</p>
one(type, data, fn)与bind差不多,最大的区别是前者只运行一次后便不再响应.如果运行后不想继续运行默认的方法只要fn中返回值return false就可以了.eg: <p>Hello</p>$("p").one("click", function(){ alert( $(this).text() ); });==>alert("Hello")
ready(fn)当dom 结构载入完毕的时候.用此方法时,请不要在onload方法里面写代码.不然就不会触发ready事件eg
$(document).ready(function(){ Your code here... });
jQuery(function($) {
// Your code using failsafe $ alias here...
});
resize 设置onresize方法.当大小改变时触发
eg: <p>Hello</p>$("p").resize( function() { alert("Hello"); } );<p onresize="alert('Hello');">Hello</p>
scroll(fn) 设置onscroll方法
select()触发onselect方法.select(fn)设置select方法
submit()提交表单,submit(fn)设置submit方法.eg: $("#myform").submit( function() {return $("input", this).val().length > 0; } );<form id="myform"><input /></form>

toggle(even, odd),even当偶数单击时运行,odd当奇数单击时运行.用unbind('click')删除
eg: $("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
trigger(type)触发相应的type方法
eg: <p click="alert('hello')">Hello</p>$("p").trigger("click")==>alert('hello')
unbind(type, fn)与bind相反,
unbind()删除所有的绑定
eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind()==>[ <p>Hello</p> ]
unbind(type)删除指定的绑定
eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind( "click" )==>[ <p>Hello</p> ]
unbind(type, fn)删除指定type的指定fn
eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind( "click", function() { alert("Hello"); } )==>[ <p>Hello</p> ]
unload(fn)当页面unload的时候触发方法
eg: <p>Hello</p>$("p").unload( function() { alert("Hello"); } );==><p onunload="alert('Hello');">Hello</p>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: