一:DOM的加載
$(document).ready(function(){
…
});
$().ready(function(){
…
});
$(function(){
…
});
三種加載有相同的功能。
$(window).load(function(){
…
})和
Window.onload=function(){
…
}具有相同的功能。
這兩種加載方式和上面三種加載方式區(qū)別在于:
第一類加載方式:DOM就緒就會執(zhí)行,并不考慮關(guān)聯(lián)文件的加載情況。
第二類加載方式:DOM對象的所有內(nèi)容全部加載才會執(zhí)行。
二:事件綁定
bind(type, [data], fn):
為每一個匹配元素的特定事件(像click)綁定一個事件處理器函數(shù)。
這個事件處理函數(shù)會接收到一個事件對象,可以通過它來阻止(瀏覽器)默認(rèn)的行為。如果既想取消默認(rèn)的行為,又想阻止事件起泡,這個事件處理函數(shù)必須返回false。
$("p").bind("click", function(){
alert( $(this).text() );
});
function handler(event) {
alert(event.data.foo);
};
$("p").bind("click", {foo: "bar"}, handler);
三:簡單事件綁定
有些事件經(jīng)常被用到,jquery提供了簡寫的方法,它和bind()具有相同的效果和類似的使用方法。惟一的區(qū)別是減少了代碼量。
$("p").blur( function () { alert("Hello World!"); } );
四:事件的切換
hover(over, out)
當(dāng)鼠標(biāo)移動到一個匹配的元素上面時,會觸發(fā)指定的第一個函數(shù)。當(dāng)鼠標(biāo)移出這個元素時,會觸發(fā)指定的第二個函數(shù)。
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn, fn2, [fn3, fn4, ...])
每次點擊后依次調(diào)用函數(shù)。
如果點擊了一個匹配的元素,則觸發(fā)指定的第一個函數(shù),當(dāng)再次點擊同一元素時,則觸發(fā)指定的第二個函數(shù),如果有更多函數(shù),則再次觸發(fā),直到最后一個。隨后的每次點擊都重復(fù)對這幾個函數(shù)的輪番調(diào)用。
可以使用unbind("click")來刪除。
$("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":""});
}
);
五:事件冒泡
多個元素可以響應(yīng)同一事件。假設(shè)有兩個元素,一個嵌套在另一個當(dāng)中,并且綁定了同一事件。那個點擊了最里層的元素以后,不但里層元素觸發(fā)事件,外層元素也會觸發(fā)事件。所謂“冒泡”,是指事件會按照DOM的層次結(jié)構(gòu)從內(nèi)向外,直至頂端的依次觸發(fā)。
事件對象
在jquery中,只需為函數(shù)增加一個參數(shù)就可以使用事件對象。
事件對象的屬性:
Event.type
Event.preventDefault()
Event.stopPropagation()
Event.target()
Event.relatedTarget()
Event.pageX(),event.pageY();
…
事件對象的用處?
1:停止事件冒泡
$("form").bind("submit", function(event){
event.stopPropagation();
});
2:阻止默認(rèn)行為
$("form").bind("submit", function(event){
event.preventDefault();
});
六:移除事件
一個元素可以綁定多個事件,多個元素可以綁定同一事件。
unbind([type], [data])
bind()的反向操作,從每一個匹配的元素中刪除綁定的事件。
如果沒有參數(shù),則刪除所有綁定的事件。
你可以將你用bind()注冊的自定義事件取消綁定。
如果提供了事件類型作為參數(shù),則只刪除該類型的綁定事件。
如果把在綁定時傳遞的處理函數(shù)作為第二個參數(shù),則只有這個特定的事件處理函數(shù)會被刪除。
七:模擬事件
trigger(type, [data])
在每一個匹配的元素上觸發(fā)某類事件。
這個函數(shù)也會導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行。比如,如果用trigger()觸發(fā)一個'submit',則同樣會導(dǎo)致瀏覽器提交表單。如果要阻止這種默認(rèn)行為,應(yīng)返回false。
你也可以觸發(fā)由bind()注冊的自定義事件而不限于瀏覽器默認(rèn)事件。
事件處理函數(shù)會收到一個修復(fù)的(規(guī)范化的)事件對象,但這個對象沒有特定瀏覽器才有的屬性,比如keyCode。
jQuery也支持 命名空間事件。這允許你觸發(fā)或者解除綁定一組特定的事件處理函數(shù),而無需一一個指定。你可以在事件類型后面加上感嘆號 ! 來只觸發(fā)那些沒有命名空間的事件處理函數(shù)。