一、页面载入
示例:
$(document).ready(function(){
// 在这里写你的代码...
});
jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});
二、事件处理
1、bind(type,[data],fn)
参数:
type(String) : 事件类型
data(Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数
示例:
当每个段落被点击的时候,弹出其文本。
$("p").bind("click", function(){
alert( $(this).text() );
});
你可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
2、one(type,[data],fn)
参数:
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
示例:
当所有段落被第一次点击的时候,显示所有其文本。
$("p").one("click", function(){
alert( $(this).text() );
});
3、trigger(type,[data])
参数:
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例:
给一个事件传递参数
$("p").click( function (event, a, b) {
// 一个普通的点击事件时,a和b是undefined类型
// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
4、triggerHandler(type,[data])
参数:
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例:
如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作。
HTML 代码:
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>
jQuery 代码:
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
5、unbind([type],[data])
参数:
type (String) : (可选) 事件类型
data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例:
将段落的click事件取消绑定
$("p").unbind( "click" )
删除特定函数的绑定,将函数作为第二个参数传入
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo
三、交互处理
1、hover(over,out)
参数:
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数
示例:
鼠标悬停的表格加上特定的类
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
2、toggle(fn,fn)
参数:
fn (Function) : 第一数次点击时要执行的函数。
fn2 (Function) : 第二数次点击时要执行的函数。
fn3,fn4,... (Function) : 更多次点击时要执行的函数。
示例:
对表格的切换一个类
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
四、事件
1、blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数。
blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
示例:
任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
$("p").blur( function () { alert("Hello World!"); } );
2、change(fn)
在每一个匹配元素的change事件中绑定一个处理函数。
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
示例:
给所有的文本框增加输入验证
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
3、click(fn)
在每一个匹配元素的click事件中绑定一个处理函数。
点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是:
mousedown
mouseup
click
示例:
将页面内所有段落点击后隐藏。
$("p").click( function () { $(this).hide(); });
4、dblclick(fn)
在每一个匹配元素的dblclick事件中绑定一个处理函数。
的那个在某个元素上双击的时候就会触发dblclick事件
示例:
给页面上每个段落的双击事件绑上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });
5、error(fn)
示例:
隐藏JavaScript错误:
$(window).error(function(){
return true;
});
给你IE的用户隐藏无效的图像:
$("img").error(function(){
$(this).hide();
});
6、focus(fn)
在每一个匹配元素的focus事件中绑定一个处理函数。
focus事件可以通过鼠标点击或者键盘上的TAB导航触发
示例:
使人无法使用文本框:
$("input[type=text]").focus(function(){
this.blur();
});
7、keydown(fn)
在每一个匹配元素的keydown事件中绑定一个处理函数。
keydown事件会在键盘按下时触发。
示例:
在页面内对键盘按键做出回应,可以使用如下代码:
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息:
http://unixpapa.com/js/key.html
// ...
}
});
8、keypress(fn)
在每一个匹配元素的keypress事件中绑定一个处理函数。
keypress事件会在敲击按键时触发。 敲击按键的定义为按下并抬起同一个按键。这几个事件发生的顺序是:
keydown
keyup
keypress
9、keyup(fn)
在每一个匹配元素的keyup事件中绑定一个处理函数。
keyup事件会在按键释放时触发。
10、load(fn)
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。
11、mousedown(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数。
mousedown事件在鼠标在元素上点击后会触发
12、mousemove(fn)
在每一个匹配元素的mousemove事件中绑定一个处理函数。
mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标
13、mouseout(fn)
在每一个匹配元素的mouseout事件中绑定一个处理函数。
mouseout事件在鼠标从元素上离开后会触发
14、mouseover(fn)
在每一个匹配元素的mouseover事件中绑定一个处理函数。
mouseover事件会在鼠标移入对象时触发
15、mouseup(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数。
mouseup事件会在鼠标点击对象释放时
16、resize(fn)
在每一个匹配元素的resize事件中绑定一个处理函数。
当文档窗口改变大小时触发
示例:
让人每次改变页面窗口的大小时很郁闷的方法:
$(document).resize(function(){
alert("Stop it!");
});
17、scroll(fn)
在每一个匹配元素的scroll事件中绑定一个处理函数。
当滚动条发生变化时触发
示例:
当页面滚动条变化时,执行的函数:
$(window).scroll( function() {
/* ...do something... */
} );
18、select(fn)
在每一个匹配元素的select事件中绑定一个处理函数。
当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。
示例:
当文本框中文本被选中时执行的函数:
$(document).select( function () {
/* ...do something... */
} );
19、submit(fn)
在每一个匹配元素的submit事件中绑定一个处理函数。
submit事件将会在表单提交时触发
示例:
如果你要阻止表单提交:
$("form").submit( function () {
return false;
} );
20、unload(fn)
在每一个匹配元素的unload事件中绑定一个处理函数。
示例:
页面卸载的时候弹出一个警告框:
$(document).unload( function () {
alert("Bye now!");
} );
jQuery事件总结
最新推荐文章于 2020-07-20 07:15:00 发布