一:页面载入
ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
返回值
jQuery
参数
fn (Function) : 要在DOM就绪时执行的函数
示例
在DOM加载完成时运行的代码,可以这样写:
jQuery 代码:
$(document).ready(function(){
// 在这里写你的代码...
});
使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。
jQuery 代码:
jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>巧用jQuery事件</title> <style type="text/css"> .high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/ } .another{ font-style:italic; color:blue; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("p").one("click", { name: "zhang" }, function(event) { // alert($(this).text()); //var oEvent = window.event; var msg = event.data.name; alert(msg); }); }) </script> </head> <body > <p>Hellow</p> <p>World</p> </body> </html>
二:事件处理
bind(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。
这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。多数情况下,可以把事件处理器函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理器函数则作为第三个参数),见示例二。
返回值
jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例
当每个段落被点击的时候,弹出其文本。
jQuery 代码:
$("p").bind("click", function(){
alert( $(this).text() );
});
你可以在事件处理之前传递一些附加的数据。
jQuery 代码:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
通过返回false来取消默认的行为并阻止事件起泡。
jQuery 代码:
$("form").bind("submit", function() { return false; })
通过使用 preventDefault() 方法只取消默认的行为。
jQuery 代码:
$("form").bind("submit", function(event){
event.preventDefault();
});
one(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。
多数情况下,可以把事件处理函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理函数则作为第三个参数),见示例二。
返回值
jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
示例
当所有段落被第一次点击的时候,显示所有其文本。
jQuery 代码:
$("p").one("click", function(){
alert( $(this).text() );
});
trigger(type,[data])
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个‘submit‘,则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。
你也可以触发由bind()注册的自定义事件
返回值
jQuery
参数
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例
提交第一个表单,但不用submit()
jQuery 代码:
$("form:first").trigger("submit")
给一个事件传递参数
jQuery 代码:
$("p").click( function (event, a, b) {
// 一个普通的点击事件时,a和b是undefined类型
// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
下面的代码可以显示一个"Hello World"
jQuery 代码:
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ‘ ‘ + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
unbind([type],[data])
bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
如果没有参数,则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
I如果提供了事件类型作为参数,则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。
返回值
jQuery
参数
type (String) : (可选) 事件类型
data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例
把所有段落的所有事件取消绑定
jQuery 代码:
$("p").unbind()
将段落的click事件取消绑定
jQuery 代码:
$("p").unbind( "click" )
删除特定函数的绑定,将函数作为第二个参数传入
jQuery 代码:
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo);
// ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo);
// ... 再也不会被触发 foo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>巧用jQuery事件</title> <style type="text/css"> .high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/ } .another{ font-style:italic; color:blue; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var fn1 = function() { alert("click"); }; var fn2 = function() { alert("click again"); } $("p").bind("click", fn1) .bind("click",fn2) .bind("mouseover", function() { $(this).css("background-color", "red") }) .bind("mouseout", function() { $(this).css("background-color", "white") }); $("#btn1").bind("click", function() { $("p").unbind("click", fn2); }); $("p").toggle(function() { $(this).addClass("high"); }, function() { $(this).removeClass("high"); }); $("p").click(function() { alert($(this).text()); }); }) </script> </head> <body > <p>Hellow</p> <input id="btn1" type="button" value="Click Me" /> </body> </html>
三: 交互处理
hover(over,out)
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
返回值
jQuery
参数
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数
示例
鼠标悬停的表格加上特定的类
jQuery 代码:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn,fn)
每次点击后依次调用函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind("click")来删除。
返回值
jQuery
参数
fn (Function) : 第一数次点击时要执行的函数。
fn2 (Function) : 第二数次点击时要执行的函数。
fn3,fn4,... (Function) : 更多次点击时要执行的函数。
示例
对表格的切换一个类
jQuery 代码:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
对列表的切换样式
HTML 代码:
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>巧用jQuery事件</title> <style type="text/css"> .high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/ } .another{ font-style:italic; color:blue; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("p").bind("mytest", function(event, a, b) { alert(a); alert(b); }) //.trigger("click"); $("#btn1").bind("click", function() { $("p").trigger("mytest", ["aaa", "bbb"]); }); }) </script> </head> <body > <p>Hellow</p> <p>World</p> <input id="btn1" type="button" value="Click Me" /> </body> </html>
四、事件
blur()
触发每一个匹配元素的blur事件。
这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
返回值
jQuery
blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数。
blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
返回值
jQuery
参数
fn (Function) : 在每一个匹配元素的blur事件中绑定的处理函数。
示例
任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
jQuery 代码:
$("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)
mouseout(fn)
mouseover(fn)
mouseup(fn)
resize(fn)
scroll(fn)
select() , select(fn)
submit() , submit(fn)
unload(fn)
四:模拟操作: