jQuery 事件
jQuery 是為事件處理特別設計的。
什麼是事件?
頁面對不同訪問者的響應叫做事件。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
實例:
在元素上移動滑鼠。
選取單選按鈕
點擊元素
在事件中經常使用術語"觸發"(或"激發")例如: "當您按下按鍵時觸發 keypress 事件"。
常見 DOM 事件:
滑鼠事件 | 鍵盤事件 | 表單事件 | 文檔/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
jQuery 事件方法語法
在 jQuery 中,大多數 DOM 事件都有一個等效的 jQuery 方法。
Advertisements
頁面中指定一個點擊事件:
$("p").click();
下一步是定義什麼時間觸發事件。您可以通過一個事件函數實現:
$("p").click(function(){// 動作觸發后執行的代碼!!});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允許我們在文檔完全載入完后執行函數。該事件方法在 jQuery 語法 章節中已經提到過。
click()
click() 方法是當按鈕點擊事件被觸發時會調用一個函數。
該函數在用戶點擊 HTML 元素時執行。
在下面的實例中,當點擊事件在某個 <p> 元素上觸發時,隱藏當前的 <p> 元素:
Advertisements
實例
$("p").click(function(){ $(this).hide();});
dblclick()
當雙擊元素時,會發生 dblclick 事件。
dblclick() 方法觸發 dblclick 事件,或規定當發生 dblclick 事件時運行的函數:
實例
$("p").dblclick(function(){ $(this).hide();});
嘗試一下 »
mouseenter()
當滑鼠指針穿過元素時,會發生 mouseenter 事件。
mouseenter() 方法觸發 mouseenter 事件,或規定當發生 mouseenter 事件時運行的函數:
實例
$("#p1").mouseenter(function(){alert('您的滑鼠移到了 id="p1" 的元素上!');});
嘗試一下 »
mouseleave()
當滑鼠指針離開元素時,會發生 mouseleave 事件。
mouseleave() 方法觸發 mouseleave 事件,或規定當發生 mouseleave 事件時運行的函數:
實例
$("#p1").mouseleave(function(){alert("再見,您的滑鼠離開了該段落。");});
嘗試一下 »
mousedown()
當滑鼠指針移動到元素上方,並按下滑鼠按鍵時,會發生 mousedown 事件。
mousedown() 方法觸發 mousedown 事件,或規定當發生 mousedown 事件時運行的函數:
實例
$("#p1").mousedown(function(){alert("滑鼠在該段落上按下!");});
嘗試一下 »
mouseup()
當在元素上鬆開滑鼠按鈕時,會發生 mouseup 事件。
mouseup() 方法觸發 mouseup 事件,或規定當發生 mouseup 事件時運行的函數:
實例
$("#p1").mouseup(function(){alert("滑鼠在段落上鬆開。");});
嘗試一下 »
hover()
hover()方法用於模擬游標懸停事件。
當滑鼠移動到元素上時,會觸髮指定的第一個函數(mouseenter);當滑鼠移出這個元素時,會觸髮指定的第二個函數(mouseleave)。
實例
$("#p1").hover(function(){alert("你進入了 p1!"); }, function(){alert("拜拜! 現在你離開了 p1!"); });
focus()
當元素獲得焦點時,發生 focus 事件。
當通過滑鼠點擊選中元素或通過 tab 鍵定位到元素時,該元素就會獲得焦點。
focus() 方法觸發 focus 事件,或規定當發生 focus 事件時運行的函數:
實例
$("input").focus(function(){ $(this).css("background-color","#cccccc");});
嘗試一下 »
blur()
當元素失去焦點時,發生 blur 事件。
blur() 方法觸發 blur 事件,或規定當發生 blur 事件時運行的函數:
實例
$("input").blur(function(){ $(this).css("background-color","#ffffff");});
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!