建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
jquery 是為事件處理特別設(shè)計(jì)的。
專(zhuān)注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)永川免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
什么是事件？
頁(yè)面對(duì)不同訪(fǎng)問(wèn)者的響應(yīng)叫做事件。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法。
實(shí)例：
- 在元素上移動(dòng)鼠標(biāo)。
- 選取單選按鈕
- 點(diǎn)擊元素
在事件中經(jīng)常使用術(shù)語(yǔ)"觸發(fā)"（或"激發(fā)"）例如： "當(dāng)您按下按鍵時(shí)觸發(fā) keypress 事件"。
常見(jiàn) DOM 事件：
| 鼠標(biāo)事件 | 鍵盤(pán)事件 | 表單事件 | 文檔/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
jQuery 事件方法語(yǔ)法
在 jQuery 中，大多數(shù) DOM 事件都有一個(gè)等效的 jQuery 方法。
頁(yè)面中指定一個(gè)點(diǎn)擊事件：
$("p").click();
下一步是定義什么時(shí)間觸發(fā)事件。您可以通過(guò)一個(gè)事件函數(shù)實(shí)現(xiàn)：
$("p").click(function(){
// action goes here!!
});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允許我們?cè)谖臋n完全加載完后執(zhí)行函數(shù)。該事件方法在 jQuery 語(yǔ)法 章節(jié)中已經(jīng)提到過(guò)。
click()
click() 方法是當(dāng)按鈕點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù)。
該函數(shù)在用戶(hù)點(diǎn)擊 HTML 元素時(shí)執(zhí)行。
在下面的實(shí)例中，當(dāng)點(diǎn)擊事件在某個(gè)
元素上觸發(fā)時(shí)，隱藏當(dāng)前的
元素：
實(shí)例
$("p").click(function(){
$(this).hide();
});
嘗試一下 ?
dblclick()
當(dāng)雙擊元素時(shí)，會(huì)發(fā)生 dblclick 事件。
dblclick() 方法觸發(fā) dblclick 事件，或規(guī)定當(dāng)發(fā)生 dblclick 事件時(shí)運(yùn)行的函數(shù)：
實(shí)例
$("p").dblclick(function(){
$(this).hide();
});
嘗試一下 ?
mouseenter()
當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)，會(huì)發(fā)生 mouseenter 事件。
mouseenter() 方法觸發(fā) mouseenter 事件，或規(guī)定當(dāng)發(fā)生 mouseenter 事件時(shí)運(yùn)行的函數(shù)：
實(shí)例
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
嘗試一下 ?
mouseleave()
當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)，會(huì)發(fā)生 mouseleave 事件。
mouseleave() 方法觸發(fā) mouseleave 事件，或規(guī)定當(dāng)發(fā)生 mouseleave 事件時(shí)運(yùn)行的函數(shù)：
實(shí)例
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
嘗試一下 ?
mousedown()
當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí)，會(huì)發(fā)生 mousedown 事件。
mousedown() 方法觸發(fā) mousedown 事件，或規(guī)定當(dāng)發(fā)生 mousedown 事件時(shí)運(yùn)行的函數(shù)：
實(shí)例
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
嘗試一下 ?
mouseup()
當(dāng)在元素上松開(kāi)鼠標(biāo)按鈕時(shí)，會(huì)發(fā)生 mouseup 事件。
mouseup() 方法觸發(fā) mouseup 事件，或規(guī)定當(dāng)發(fā)生 mouseup 事件時(shí)運(yùn)行的函數(shù)：
實(shí)例
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
嘗試一下 ?
hover()
hover()方法用于模擬光標(biāo)懸停事件。
當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave)。
實(shí)例
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
嘗試一下 ?
focus()
當(dāng)元素獲得焦點(diǎn)時(shí)，發(fā)生 focus 事件。
當(dāng)通過(guò)鼠標(biāo)點(diǎn)擊選中元素或通過(guò) tab 鍵定位到元素時(shí)，該元素就會(huì)獲得焦點(diǎn)。
focus() 方法觸發(fā) focus 事件，或規(guī)定當(dāng)發(fā)生 focus 事件時(shí)運(yùn)行的函數(shù)：
實(shí)例
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
嘗試一下 ?
blur()
當(dāng)元素失去焦點(diǎn)時(shí)，發(fā)生 blur 事件。
blur() 方法觸發(fā) blur 事件，或規(guī)定當(dāng)發(fā)生 blur 事件時(shí)運(yùn)行的函數(shù)：
實(shí)例
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
嘗試一下 ?
比較keypress、keydown與keyup
- keydown：在鍵盤(pán)上按下某鍵時(shí)發(fā)生，一直按著則會(huì)不斷觸發(fā)（opera瀏覽器除外），它返回的是鍵盤(pán)代碼;
- keypress：在鍵盤(pán)上按下一個(gè)按鍵，并產(chǎn)生一個(gè)字符時(shí)發(fā)生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下并不會(huì)產(chǎn)生字符，所以監(jiān)聽(tīng)無(wú)效，換句話(huà)說(shuō)，只有按下能在屏幕上輸出字符的按鍵時(shí)keypress事件才會(huì)觸發(fā)。若一直按著某按鍵則會(huì)不斷觸發(fā)。
- keyup：用戶(hù)松開(kāi)某一個(gè)按鍵時(shí)觸發(fā)，與keydown相對(duì)，返回鍵盤(pán)代碼.
當(dāng)前標(biāo)題：創(chuàng)新互聯(lián)jQuery教程：jQuery事件
文章鏈接：http://www.dlmjj.cn/article/djgspij.html
