事件
頁面載入
ready(fn):當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)。
$(document).ready(function(){
// Your code here...
});
或者直接:當然jQuery可以為$
jQuery(function() {
// Your code using failsafe $ alias here...
});
事件處理
bind(type,data,fn):為每一個匹配元素的特定事件(像click)綁定一個事件處理器函數(shù)
當每個段落被點擊的時候,彈出其文本。
$("p").bind("click", function(){
alert( $(this).text() );
});
可以在事件處理之前傳遞一些附加的數(shù)據(jù)。
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)綁定一個一次性的事件處理函數(shù)
當所有段落被第一次點擊的時候,顯示所有其文本。
$("p").one("click", function(){
alert( $(this).text() );
});
trigger(type,data):在每一個匹配的元素上觸發(fā)某類事件
提交第一個表單
$("form:first").trigger("submit")
給一個事件傳遞參數(shù)
$("p").click( function (event, a, b) {
// 一個普通的點擊事件時,a和b是undefined類型
// 如果用下面的語句觸發(fā),那么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):這個特別的方法將會觸發(fā)指定的事件類型上所有綁定的處理函數(shù)。但不會執(zhí)行瀏覽器默認動作
例:如果你對一個focus事件執(zhí)行了 .triggerHandler(),瀏覽器默認動作將不會被觸發(fā),只會觸發(fā)你綁定的動作。
<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" )
刪除特定函數(shù)的綁定,將函數(shù)作為第二個參數(shù)傳入
var foo = function () {
// code to handle some kind of event
};
$("p").bind("click", foo);
$("p").unbind("click", foo);
交互處理
hover(over,out):一個模仿懸停事件的方法(修正了使用mouseout事件的一個常見錯誤)。
over (Function) : 鼠標移到元素上要觸發(fā)的函數(shù)
out (Function) : 鼠標移出元素要觸發(fā)的函數(shù)
鼠標懸停的表格加上特定的類
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn,fn):每次點擊時切換要調用的函數(shù)
fn (Function) : 第奇數(shù)次點擊時要執(zhí)行的函數(shù)。
fn (Function) : 第偶數(shù)次點擊時要執(zhí)行的函數(shù)。
對表格的切換一個類
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
ALL事件
blur()/blur(fn)
說明:觸發(fā)每一個匹配元素的blur事件/或者綁定一個事件處理函數(shù)
使用:$("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) 當文檔窗口改變大小時觸發(fā)
$(document).resize(function(){
alert("Stop it!");
});
scroll(fn) 當滾動條發(fā)生變化時觸發(fā)
$(document).scroll( function() { /* ...do something... */ } );
select()/select(fn)
submit()/submit(fn)
$("form").submit( function () {
return false;
} );
upload(fn)
頁面卸載的時候彈出一個警告框: $(document).unload( function () { alert("Bye now!"); } );
-- 學海無涯