Jquery中的事件與動畫

一:Jquery中的事件 加載DOM事件:

　　　　(1)執行時機:Window.onload()方法實在網頁中全部的元素徹底加載到瀏覽器後才執行.而jquery中的$(document).ready()方法註冊的事件處理程序,在DOM徹底就緒時能夠直接調用.

　　　　(2)執行次數:Window.onload()方法只執行一次,而$(document).ready()方法能夠執行屢次.

　　　　 (3)簡約寫法:

　　　　　　  Window.onload()方法沒有簡約寫法,

　　　　　　　而$(documen).ready()方法有三種簡寫方法,而且這三種方法徹底等價.

　　　　　　   分別是:$(document).ready(function(){}),

　　　　　　　　      $().ready(function(){}),

　　　　　　　　     $(function(){}).

             事件綁定:

　　　　　　　　(1)方法:bind(type,[data],fn),type表示事件類型,data可選參數,做爲event.data屬性值傳遞給事件對象的的額外數據對象.fn表示用來綁定的處理函數.

　　　　　　　　(2)做用:爲對象註冊事件.

　　　　　　　　(3)對比:Jquery中的事件綁定類型比普通的javascript事件綁定事件類型少了on,如鼠標單擊事件在jquery中對應的click事件,在javascript中對應的是onclick事件.

　　　　　　　　(4)綁定方法還用one()方法,它與bind()方法同樣,只不過one()方法只有一次,bind()能夠有屢次.

　　　　　　　　　　　　合成事件:

　　　　　　　　　　　　(1)方法:hover()方法用於模擬光標懸浮事件,是mouseover()和mouseout()方法事件的組合.toggle()方法用於模擬鼠標連續單擊事件,不停循環處理函數.

　　　　　　　　　　　　(2)togger()方法的做用:當沒有參數時,註冊該事件在顯示和隱藏狀態之間不停的切換.

　　　　　　　　　　 　  (3)定義:多個事件組合在一塊兒使用. 事件冒泡:

　　　　　　　　　　　　　　　　 (1)定義:當DOM樹不一樣的層級綁定相同的事件,當某一層級的事件觸發,該層上部的綁定了該事件的層級都會觸發該類型的事件. 　　 　　　　　　　　　　　　　　　(2)方法:stopPropagation()方法用於中止事件冒泡,只能觸發該層級的事件,而其它層級不會觸發,還可使用return false來中止事件冒泡. preventDefaut()方法用於阻止默認行爲,即阻止DOM對象的默認行爲.

　　　　　　　　　　　　　　　　 (3)註釋:stopPropagation()方法與preventDefault()方法都須要參數來調用,而這個參數實在fn處理函數中傳入的.

　　　　　　　　　　　　　　　　 事件對象的屬性:

　　　　　　　　　　　　　　　　(1)做用:對事件對象的經常使用屬性進行封裝,使得事件處理函數在各大瀏覽器下均可以正常運行,不須要對瀏覽器進行類型判斷.

　　　　　　　　　　　　　　　　(2)方法:都須要參數來調用,而這個參數是fn處理函數傳入的,

　　　　　　　　　　　　　　　　　　 type()方法:該方法用於獲取到事件的類型.

　　　　　　　　　　　　　　　　　 　preventDefault()方法:該方法用於阻止默認的事件行爲.

　　　　　　　　　　　　　　　　　 　stopProPagaion()方法:該方法用於阻止事件冒泡.

　　　　　　　　　　　　　　　　　　 target()方法:該方法用於獲取到觸發事件的元素。

　　　　　　　　　　　　　　　　　　 relaedTarge()方法:

　　　　　　　　　　　　　　　　　　　　該方法用於對jquery進行封裝,使之能兼容各類瀏覽器.

　　　　　　　　　　　　　　　　　　 pageX()與pageY()方法:

　　　　　　　　　　　　　　　　　　　　該放過的用於獲取到光標對相對與頁面的X座標和Y座標.

　　　　　　　　　　　　　　　　　　 which()方法:

　　　　　　　　　　　　　　　　　　　　該方法用於在鼠標單擊事件中獲取到鼠標的左,中,右鍵,在鍵盤事件中獲取鍵盤的按鍵.

　　　　　　　　　　　　　　　　　　metaKey()方法:

　　　　　　　　　　　　　　　　　　　　該方法用於獲取觸發事件時鍵盤的鍵值.

　　　　　　　　　　　　　　　　　　originaIEvent()方法:

　　　　　　　　　　　　　　　　　　　　該方法用於指向原始的事件對象. 移除事件:

　　　　　　　　　　　　　　　　　　　　(1)做用:移除元素上已經註冊的事件(移除特定的事件類型).

　　　　　　　　　　　　　　　　　　　  (2)方法:onBind([type],[data])方法,type表示事件類型,data表示將要移除的函數.若是沒有參數,則刪除全部的綁定事件.

　　　　　　　　　　　　　　 模擬操做:

　　　　　　　　　　　　　　　　(1)方法:trigger(type,[data]),type表示要觸發的事件類型,data表示要傳遞給事件處理函數的附加數據,以數組形式傳遞. 　　　　　　　　　　　　　　　　　　　　　　triggerHandler()方法:

　　　　　　　　　　　　　　　　　　　　　　該方法觸發元素上綁定的特定事件,同時取消瀏覽器對此事件的默認操做.

　　　　　　　　　　　　　　　　 (2)做用:模擬事件操做. jquery中的動畫:

　　　　　　　　　　　　　　　　　　　　(1)做用:經過jquery中的動畫方法,給網頁添加精彩的視覺效果.

　　　　　　　　　　　　　　　　　　　　 (2)方法: show(speed,callback)與hide(speed,callback)方法是jquery中最基本的動畫方法,用於顯示和隱藏對象,speed表示動畫執行的時間,

　　　　　　　　　　　　　　　　　　　　　　　　　　callback表示動畫執行完時的處理函數.執行的時間:

　　　　　　　　　　　　　　　　　　　　　　　　　　slow表示元素在600毫秒內顯示和隱藏,normal表示元素在400毫秒內顯示和隱藏,

　　　　　　　　　　　　　　　　　　　　　　　　　　fast表示元素在200毫秒內顯示和隱藏.

　　　　　　　　　　　　　　　　　　　　　　　　　  fadeIn(speed,callback)和fadeOut(speed,callback)方法:做用:只改變元素的不透明度.

　　　　　　　　　　　　　　　　　　　　　　　　　　fadeOut()方法相反.

　　　　　　　　　　　　　　　　　　　　　　　　　　 slideUp(speed,callback)和slideDown(speed,callback)方法:做用:改變元素的高度.

　　　　　　　　　　　　　　　　　　　　　　　　　　 slideUp()表示元素將由上到下縮短隱藏,

　　　　　　　　　　　　　　　　　　　　　　　　　　slideDown()方法表示元素將由下到上的擴展顯示.

　　　　　　　　　　　　　　　　　　　　　　　　　  animate(params,speed,callback)方法:表示自定義動畫,

　　　　　　　　　　　　　　　　　　　　　　　　　　params表示樣式屬性及值的映射,如：{top:"100px",left:"+=100px"},

　　　　　　　　　　　　　　　　　　　　　　　　　　speed表示速度,callback表示回調函數.即事件處理函數.

　　　　　　　　注意:在使用animate()方法以前,爲了影響該元素的top,left,bottom,right樣式屬性,必須先把元素的 position樣式設置爲relative或者absolute.還需將整個多餘的內容頁用overflow樣式設置hidde隱藏起來.

　　　　　　　　　　　　　　　　　　　　　　　　　　 stop([clearQueue],gotoEnd)方法:做用:中止動畫.clearQueue表示是否清空執行完的動畫列隊,gotoEnd表示是否直接將正在執行的動畫跳轉到末狀態. $(element).is(":animated")表示該對象是否在執行動畫.

 

下面是Jquery中的事件與動畫的具體內容，全屏觀看，請點擊：Jquery中的事件與動畫