深入理解JQuery中的事件與動畫，深入理解jquery事件

深入理解JQuery中的事件與動畫，深入理解jquery事件

首先，使用JQuery事件與動畫的效果比使用原生js來的方便得多，當然，最重要的是考慮到了瀏覽器的相容性。

事件：

基於原生js，常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等，不再贅述。

事件綁定:

在文檔載入完成後，使用bind(type,[data],func())方法綁定事件.

合成事件:

hover(enter-func,leave-func)相當於bind("mouseover")和bind("mouseleave").

toggle()類比滑鼠連點情況下的顯示與隱藏事件toggle(show-func,hide-func).

事件冒泡：

在學習js高程（三）時，曾提及到大部分瀏覽器的事件處理機制是事件冒泡，也就是事件是逐級向上發生的。如果給你個內嵌元素繫結了事件，給他的父元素也綁定了一個相同type的事件，那麼當事件處理內嵌元素時，父元素的事件也會隨之觸發，JQuery用一個方法可以阻止事件冒泡，使用event(事件對象).stopPropagation().

既讓可以阻止事件冒泡，那麼也可以阻止事件的預設行為，比如錨點元素a，當我們為a綁定一個click事件時，他不僅會實現我們綁定的事件函數，也會跳轉到指定的href,那麼要阻止這一跳轉行為，需要用到event.preventDefault()來實現。這個方法也經常用在表單驗證的過程中，當驗證的欄位不通過是，使用event.preventDefault()來阻止表單的submit。

當然，對於阻止事件冒泡和阻止預設行為，我們也可以使用return false，當我們要知道，return  false同時阻止了冒泡與預設行為，所以要慎用。

事件對象：

寫在回呼函數中的參數event即為事件對象。

type屬性，擷取事件的類型。

preventDefault()方法，阻止預設行為

stopPropagation()方法，阻止事件冒泡

target屬性，擷取事件觸發的元素

pageX,pageY屬性，擷取游標相對於頁面的座標

mataKey屬性，擷取crtl按鍵

事件移除：

unbind(type,func-name)

第一個參數是移出事件的類型，第二個為移除事件的變數名，如果沒有參數，刪除該元素的所有事件，如果提供了type，則刪除該元素所有類型為type的事件，若制訂了第二個參數，則刪除指定事件。

事件類比：

trigger()，利用該函數實現進入頁面時就觸發指定事件（這個事件的類型是可以自訂的），trigger()有連個參數，第一個為type，第二個為[data]，這個是可選的，用於傳遞資料。我認為trigger()實際是上呼叫事件的過程。

動畫：

Jquery中的動畫用起來十分的方便。jquer所有的動畫效果都可以添加時間參數。

show()與hide()：

顯示與隱藏元素，hide()相當於display:none，而show()則把他還原（之前的display屬性是什麼，還原後還是什麼）。可以通過設定參數來實現動畫效果，show(),hide()接收關鍵字和時間值（ms）,關鍵字有slow(0.6s),fast(.2s),nomal(.4s)，他會同時改變元素的高度，寬度和不透明度。

fadeIn()與fadeOut():

改變元素的不透明度，fadeIn()提高不透明度，fadeOut()降低不透明度，直到display:none.

slideDown與SlideUp()

改變元素的高度，slideDown()元素自上到下延伸，slideUp()元素自下向上收縮。

animate()

當上面的方法實現的動畫無法滿足我們時，可以使用animate()來自訂動畫。

animate(params,speed,callback)

params:包含樣式的映射，如{left:"100px",heiget:"100px"}

speed:動畫實現需要的事件(ms)

callback:動畫完成時執行的函數。

像上面所寫的params的栗子，實現的時left與height的同時改變，若不想同時改變，使用鏈式寫法分開寫。需要注意一點，css()不算動畫，要想在動畫執行完成後改變樣式，需要把css()寫入callback中.

判斷元素是否處於動畫狀態is(":animated").

延遲操作:animate().delay(time).

其他動畫:

toggle()顯示與隱藏

slideToggle()改變高度的顯示與隱藏。

fadeTo(time,op)通過指定時間將元素的不透明度變為op

fadeToggle()改變不透明度的顯示與隱藏。

以上這篇深入理解JQuery中的事件與動畫就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。