一、
页面载入
1、
ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。请确保在<body> 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
返回值 jQuery
参数
fn (Function) : 要在DOM就绪时执行的函数
示例:
Code
二、事件处理
1、bind(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。
这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。多数情况下,可以把事件处理器函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理器函数则作为第三个参数),见示例二。
返回值 jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例:
Code
2、
one(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。
多数情况下,可以把事件处理函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理函数则作为第三个参数),见示例二。
返回值 jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例:
Code
3、
trigger(type,[data])
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。事件处理函数会收到一个修复的(规范化的)事件对象,但这个对象没有特定浏览器才有的属性,比如keyCode。jQuery也支持 命名空间事件。这允许你触发或者解除绑定一组特定的事件处理函数,而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。
jQuery 1.3中新增:
所有触发的事件现在会冒泡到DOM树上了。举例来说,如果你在一个段落p上触发一个事件,他首先会在这个元素上触发,其次到父元素,在到父元素的父元素,直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡,或者在事件处理函数中返回false即可。事件对象构造器现在已经公开,并且你可以自行创建一个事件对象。这个事件对象可以直接传递给trigger所触发的事件处理函数。事件对象的完整属性列表可以在 jQuery.Event
的文档里找到。
你可以有三种方式指定事件类型:
* 你可以传递字符串型的事件名称(type参数)。
* 你可以使用jQuery.Event对象。可以将数据放进这个对象,并且这个对象可以被触发的事件处理函数获取到。
* 最后,你可以传递一个带有数据的字面量对象。他将被复制到真正的jQuery.Event对象上去。 注意在这种情况下你必须指定一个 type 属性。
返回值 jQuery
参数
type (String,Event,Object) : 一个事件对象或者要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例:
Code
4、triggerHandler(type,[data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
这个方法的行为表现与trigger类似,但有以下三个主要区别:
* 第一,他不会触发浏览器默认事件。
* 第二,只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。
返回值 jQuery
参数
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例:
Code
文档片段:
Code
5、
unbind([type],[data])
bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
如果没有参数,则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数,则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。
返回值 jQuery
参数 type (String) : (可选) 事件类型
data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例:
Code
三、事件委派
1、live( type, fn )
jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 还不支持 blur, focus, mouseenter, mouseleave, change, submit 等。
与bind()不同的是,live()一次只能绑定一个事件。这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
.live()与流行的liveQuery插件很像,但有以下几个主要区别:
.live 目前只支持所有事件的子集,支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。
要移除用live绑定的事件,请用die方法
返回值 jQuery
参数
type (String) : 一个或多个用空格分隔的事件名
fn (Function) : 欲绑定的事件处理函数
示例:
//点击生成的p依然据有同样的功能
$("p").live("click",function(){
$(this).after("<p>Anotherparagraph!</p>");
2、die(fn,fn)
jQuery 1.3新增。此方法与live正好完全相反。
如果不带参数,则所有绑定的live事件都会被移除。你可以解除用live注册的自定义事件。如果提供了type参数,那么会移除对应的live事件。如果也指定了第二个参数function,则只移出指定的事件处理函数。
返回值 jQuery
参数
type (String) : 可选,要解除绑定的live事件
fn (Function) : 可选,要解除绑定的特定处理函数
示例:
Code
文档片段:
<inputtype="text"id="theone"value="test"/>
<inputtype="text"value="canceltheoneevent"id="unbind"/>
<p>
itisajquerytest
</p>
四、事件切换
1、hover(over,out)
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
返回值 jQuery
参数
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数
示例:
//鼠标悬停的表格加上特定的类
$("td").hover(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);
文档片段:
Code
2、toggle(fn,fn)
每次点击后依次调用函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。可以使用unbind("click")来删除。
返回值 jQuery
参数
fn (Function) : 第一数次点击时要执行的函数。
fn2 (Function) : 第二数次点击时要执行的函数。
fn3,fn4,... (Function) : 更多次点击时要执行的函数。
示例:
//对表格切换一个类(点击可以看到结果)
$("td").toggle(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);
五、事件
1、blur()
触发每一个匹配元素的blur事件。
这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。
返回值 jQuery
示例:
$("p").blur(); //触发所有段落的blur事件
2、blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数。
blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的.
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的blur事件中绑定的处理函数。
示例:
$("p").blur(function(){alert("HelloWorld!");});
3、change()
触发每个匹配元素的change事件
这个函数会调用执行绑定到change事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
4、change(fn)
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的change事件中绑定的处理函数。
在每一个匹配元素的change事件中绑定一个处理函数。change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
示例:
//input内容改变触发
$("input").change(function(){alert("HelloWorld!");});
5、click()
触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
返回值 jQuery
示例:
$(document).ready(function(){
$("input").click();
});
6、click(fn)
在每一个匹配元素的click事件中绑定一个处理函数。
注意,点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是:
mousedown-->mouseup-->click
返回值 jQuery
参数
fn (Function) : 绑定到click事件的函数
示例:
$("p").click( function () { $(this).hide(); }); //将页面内所有段落点击后隐藏
7、dblclick()
触发每一个匹配元素的dbclick事件。这个函数会调用执行绑定到dblclick事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。dblclick事件会在元素的同一点双击时触发。
8、dblclick(fn)
在每一个匹配元素的dblclick事件中绑定一个处理函数。在某个元素上双击的时候就会触发dblclick事件
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的dblclick事件中绑定的处理函数。
示例:
$("input").dblclick(function() { alert("you double clicked me!"); });
9、error()
这个函数会调用执行绑定到error事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
10、error(fn)
在每一个匹配元素的error事件中绑定一个处理函数。
对于error事件,没有一个公众的标准。在大多数浏览器中,当页面的JavaScript发生错误时,window对象会触发error事件;当图像的src属性无效时,比如文件不存在或者图像数据错误时,也会触发图像对象的error事件。如果异常是由window对象抛出,事件处理函数将会被传入三个参数:
(1). 描述事件的信息 ("varName is not defined", "missing operator in expression", 等等.),
(2). 包含错误的文档的完整URL
(3). 异常发生的行数
如果事件处理函数返回true,则表示事件已经被处理,浏览器将认为没有异常。
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的error事件中绑定的处理函数。
示例:
Code
11、focus()
触发每一个匹配元素的focus事件。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。
返回值 jQuery
示例:
$(document).ready(function(){
$("#txtUserName").focus();
});
12、focus(fn)
在每一个匹配元素的focus事件中绑定一个处理函数。focus事件可以通过鼠标点击或者键盘上的TAB导航触发
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的focus事件中绑定的处理函数。
示例:
//文本获取焦点,选择所有文本内容
$("#txtUserName").focus(function(){
$(this).select();
});
13、keydown()
触发每一个匹配元素的keydown事件。这个函数会调用执行绑定到keydown事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发。
14、keydown(fn)
在每一个匹配元素的keydown事件中绑定一个处理函数。
keydown事件会在键盘按下时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的keydown事件中绑定的处理函数。
示例:
Code
15、keypress()
触发每一个匹配元素的keypress事件。这个函数会调用执行绑定到keydown事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发
16、keypress(fn)
在每一个匹配元素的keypress事件中绑定一个处理函数。
keypress事件会在敲击按键时触发。 敲击按键的定义为按下并抬起同一个按键。这几个事件发生的顺序是:
keydown-->keypress-->keyup
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的keypress事件中绑定的处理函数。
示例:
$(document).keypress(function(event){
switch(event.keyCode){
case13:
alert("youclickedenter!");//Enter键
break;
}
});
17、keyup()
触发每一个匹配元素的keyup事件。这个函数会调用执行绑定到keyup事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keyup事件会在按键释放时触发。
18、keyup(fn)
在每一个匹配元素的keyup事件中绑定一个处理函数。keyup 事件会在键盘按下时触发。
示例:
$(document).keyup(function(event){
switch(event.keyCode){
case13:
alert("youclickedenter!");//Enter键
break;
}
});
19、load(fn)
在每一个匹配元素的load事件中绑定一个处理函数。如果绑定给window对象,则会在所有内容加载后触发,包括窗口、框架、对象和图像。如果是绑定元素,则在元素内容加载完后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的load事件中绑定的处理函数。
20、mousedown(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数。mousedown事件在鼠标在元素上点击后会触发
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mousedown事件中绑定的处理函数。
21、mousemove(fn)
在每一个匹配元素的mousemove事件中绑定一个处理函数。
mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mousemove事件中绑定的处理函数。
22、mouseout(fn)
在每一个匹配元素的mouseout事件中绑定一个处理函数。mouseout事件在鼠标从元素上离开后会触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseout事件中绑定的处理函数。
23、mouseover(fn)
在每一个匹配元素的mouseover事件中绑定一个处理函数。mouseover事件会在鼠标移入对象时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseover事件中绑定的处理函数。
24、mouseup(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数。mouseup事件会在鼠标点击对象释放时。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseup事件中绑定的处理函数。
25、resize(fn)
在每一个匹配元素的resize事件中绑定一个处理函数。当文档窗口改变大小时触发
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的resize事件中绑定的处理函数。
示例:
$(window).resize(function(){
alert("Stopit!");
});
26、scroll(fn)
在每一个匹配元素的scroll事件中绑定一个处理函数。当滚动条发生变化时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的resize事件中绑定的处理函数。
示例:
$(window).scroll(function(){
alert("scrollingnow!");
});
27、select()
触发每一个匹配元素的select事件这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
返回值 jQuery
示例:
$("input").select();
28、select(fn)
在每一个匹配元素的select事件中绑定一个处理函数。当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的select事件中绑定的处理函数。
示例:
$("input").select(function(){
alert("youselectthetextboxcontext");
});
29、submit()
触发每一个匹配元素的submit事件。这个函数会调用执行绑定到submit事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
返回值 jQuery
示例:
$("form:first").submit(); //提交本页的第一个表单
30、submit(fn)
在每一个匹配元素的submit事件中绑定一个处理函数。submit事件将会在表单提交时触发。
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的submit事件中绑定的处理函数.
示例:
//阻止表单提交
$("form").submit(function(){
returnfalse;
});
31、unload(fn)
在每一个匹配元素的unload事件中绑定一个处理函数。。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的unload事件中绑定的处理函数。
示例:
$(window).unload(function(){alert("Byebyenow!");});
嗯哈哈哈哈...,结束了。
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 ...第4章. jQuery的事件 12
]_封捷_jQuery学习笔记
锋利的JQuery学习笔记,总结超经典!
这是关于JQuery的学习过程中的一个笔记,当中记载了很多注意事项以及技巧,值得一看