默認(rèn)的js代碼是window.onload()
jq代碼是$(document).ready()
js的onload是等待所有元素文件和相關(guān)聯(lián)的文件加載完成论寨,而jq是等待dom加載完成即可花吟。
$(document).ready(function(){codes..})
$(function({codes..})
$().ready(function(){codes..})
1.事件綁定
方法:bind(type[,data],fn)
type:指事件類(lèi)型
data:指可選參數(shù)
fn:指綁定的處理函數(shù)
2.合成事件
1)hover(enter,leave)
模擬光標(biāo)懸停事件鲤脏,第一個(gè)參數(shù)是移動(dòng)到元素上觸發(fā)第一個(gè)函數(shù)们颜,第二個(gè)參數(shù)是移出元素觸發(fā)第二個(gè)函數(shù)
2)toggle()
模擬鼠標(biāo)連續(xù)點(diǎn)擊的事件
3.事件冒泡
包裹的元素會(huì)從內(nèi)側(cè)元素向外側(cè)元素冒泡。
停止冒泡事件:evernt.stopPropagation()
阻止默認(rèn)行為:event.preventDefault()
4.事件捕獲
與事件冒泡相反
jq不支持
5.事件對(duì)象的屬性
1)event.type
獲取事件的類(lèi)型
2)event.preventDefault()
阻止事件的默認(rèn)行為
3)event.stopPropagation()
阻止事件的冒泡方法
4)event.target
獲取觸發(fā)事件的元素
5)event.relatedTarget
發(fā)生事件的相關(guān)元素
6)event.pageX和event.pageY
獲取光標(biāo)相對(duì)于頁(yè)面的x坐標(biāo)或者y坐標(biāo)
7)event.which
獲得鼠標(biāo)單擊中的左中右鍵
8)event.metaKey
為鍵盤(pán)獲取Ctrl按鍵
6.移除事件
1)移除按鈕元素以前注冊(cè)的事件
方法:unbind([type],[data])
type:事件類(lèi)型
data:要移除的函數(shù)
2)一次觸發(fā)事件one(type,[data],fn)
7.常用模擬
1.觸發(fā)點(diǎn)擊操作:$("#btn").trigger("click")
簡(jiǎn)寫(xiě):$("#btn").click()
2.觸發(fā)自定義事件:元素需要先綁定一個(gè)事件
$("#btn").bind("myClick",function(){
$('#test').append("<p>xxx</p>")
})
$("#btn").trigger("myClick")
3.傳遞數(shù)據(jù):trigger(type,[data])
type: 事件類(lèi)型
data:傳遞給函數(shù)的參數(shù)
4.執(zhí)行默認(rèn)操作
trigger()方法如果觸發(fā)事件猎醇,會(huì)執(zhí)行瀏覽器的默認(rèn)操作窥突。
例如:$("input").trigger("focus")
這個(gè)代碼布局會(huì)觸發(fā)input的focus操作,而且input本身也會(huì)得到焦點(diǎn)
如果只觸發(fā)綁定的focus事件硫嘶,$("input").triggerHandler("focus")
bind技巧:
1.綁定多個(gè)事件類(lèi)型
$(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
})
})
2.添加事件的命名空間阻问,便于管理
$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>code</p>");
})
})
3.相同事件名稱(chēng),不同命名空間的執(zhí)行方法
$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>code1</p>");
});
$("div").bind("click",function(){
$("body").append("<p>code2</p>");
})
$("button").click(function(){
$("div").trigger("click!");//匹配所有不包含在命名空間中的方法
})
})