1. 程式人生 > >jQuery中的事件與驅動

jQuery中的事件與驅動

效果 代碼 產生 down ESS 名稱 用戶 use 註意

1.jQuery中的事件

在jQuery中,事件總體分為倆大類:基礎事件和符合事件。 jQuery中的簡單事件,與Javascript中的事件

幾乎一樣,都含有鼠標事件、鍵盤事件、載件事件等,只是其對應的方法名稱有略微不同。

符合事件則是截取組合了用戶操作,並且以多個函數作為響應而自定義的處理程序。

常用事件分類:

基礎事件:鼠標事件、鍵盤事件、window事件、表單事件

符合事件:鼠標光標懸停、鼠標連續點擊

1.事件綁定和處理函數的語法格式如下:

基礎事件語法:

事件名=“函數名()”;

或者:

DOM 對象 . 事件名=函數;

在事件綁定處理函數後,可以通過DOM對象 . 事件名() 的方式顯示調用處理函數。

2.載入事件:

在jQuery中,常用的window事件有文檔載入事件,它對應的方法是ready();

3.鼠標事件:

技術分享圖片

在上圖可以看到,jQuery中事件的方法名稱與JavaScript 的事件方法名稱不一樣,如單擊事件。

在javascript 中寫作 onclick,而在jQuery中為click。

mouseenter() 和 mouseover()用法一樣,都是鼠標指針移至頁面元素上時觸發事件。

區別如下:

mouseover();鼠標指針進入被選元素時會觸發mouseover事件,如果鼠標指針在其被選元素的子元素上來回

進入時也會觸發mouseover事件。

mouseenter();鼠標指針進入被選元素時會觸發mouseenter事件,如果鼠標指針在其被選元素的子元素上來

回進入時不會觸發mouseenter事件。

mouseout();鼠標指針進入被選元素時會觸發mouseout事件,如果鼠標指針在其被選元素的子元素上來回

進入時也會觸發mouseout事件。

mouseleave();鼠標指針進入被選元素時會觸發mouseleave事件,如果鼠標指針在其被選元素的子元素上來

回進入時不會觸發mouseleave事件。

簡單區別:

技術分享圖片

進入代碼環節:

技術分享圖片

效果圖:

1:但鼠標懸浮的時候 頁面的背景顏色為:orange

技術分享圖片

2:但鼠標懸浮的時候 頁面的背景顏色為:pink

技術分享圖片

4.鍵盤事件:

常用的鍵盤事件有 keydown、keyup、keypress

keydown 事件發生在鍵盤被按下的時候,keyup事件發生在鍵盤釋放的時候,在keydown 和 keyup 之間會

觸發另一個事件------keypress事件。當按下鍵重復產生字符時,在keyup事件之前可能產生很多

技術分享圖片

下面進入代碼案例環節:

樣式:

技術分享圖片

環境設置:

技術分享圖片

技術分享圖片

效果如技術分享圖片下:

技術分享圖片

技術分享圖片

技術分享圖片

註意:輸入密碼時 下邊同樣會顯示所調用方法的屬性,在密碼框是點擊回車 就會彈出右邊的提示框

技術分享圖片

keyCode==13 意思是當按下enter鍵時,CmdLogoln獲得焦點

綁定事件和移除事件

1:綁定事件

語法:

bind(type ,[data],fn)

技術分享圖片

案例:

技術分享圖片

技術分享圖片

除了bind方法之外 還有on() live() one()

移除事件:

語法:

nubind([type],[fn])

技術分享圖片

復合事件:

方法:hover() 和 toggle()

hover():

語法:

hover(enter, leave);

toggle()

語法:

有參

toggle(fn1 ,fn2,fn3,........fnN);

無參

toggle();

toggleClass(className);

技術分享圖片

代碼:

技術分享圖片

技術分享圖片

效果圖:

技術分享圖片

技術分享圖片

技術分享圖片

元素的顯示和隱藏

控制元素的顯示:

語法:

$(selector).show([speed],[callback]);

技術分享圖片

控制元素隱藏:

語法:

$(select).hide([speed],[callback]);

改變元素的透明度:

$(select).fadeId([speed],[callback]);

控制元素淡出

語法:

$(select).fadeOut([speed],[callback]);

改變元素的高度:

$(selector).slidUp([speed],[callback]);

$(selector).slidDown([speed],[callback]);

自定義動畫:

語法:

$(selector ).animate({params},speed,callback)

jQuery中的事件與驅動