JQ筆記04.Jquery中的事件和動畫

$(document).ready() 方法是事件模塊中重要的函數,可以極大地提高web應用程序的響應速度。

load()方法:

$(window).load(function(){
    //代碼……
})

等價於JS中的如下代碼:
Window.onload=function(){
    //代碼……
}

$(document).ready(function(){})相當於$().ready(function(){})相當於$(function(){})

4.1.2【事件綁定】使用bind()方法對對匹配元素進行特定事件的綁定

【代碼4.1.2.1】單擊菜單展開內容,再次單擊合併內容

★使用is()方法判斷元素是否顯示

【代碼4.1.2.2】擴展思維:當鼠標經過的時候出現內容,鼠標離開的時候隱藏內容:

4.1.3【合成事件】hover()方法、toggle()方法,都屬於Jquery自定義的方法。

【代碼4.1.3.1】

這個方法在測試的時候,jquery-1.9.1.js 和書上寫的jquery-1.3.1.js 效果是不一樣的,注意區分。

【代碼4.1.3.2】

【代碼4.1.3.3】

【代碼4.1.3.4】加強效果:單擊標題後,標題高亮顯示。

4.1.4【事件冒泡】

【代碼4.1.4.1】什麼是事件冒泡——單擊內部<span>元素,會輸出3條記錄。

【代碼4.1.4.2】項目中,經常需要做的事“停止事件冒泡”,可以阻止事件中其他對象的事件處理函數被執行,使用stopPropagation()方法。

【代碼4.1.4.3】阻止默認行爲——preventDefault()方法。項目中經常需要驗證表單,當不符合條件時要用此方法。

備註:表單中event.preventDefault()可以替換爲 return false;

事件冒泡中 event.stopPropagation()可以替換爲 return false;

代碼4.1.5【事件對象的屬性】

event.Type()方法——獲取事件類型

event.preventDefault()方法——阻止默認的事件行爲。

event.stopPropagation()方法——阻止事件的冒泡。

event.target()方法——獲取到觸發事件的元素

event.relatedTarget()方法:

event.pageX()方法和event.pageY()方法——獲取光標相對於頁面的x座標和y座標

event.which()方法——鼠標單擊事件中獲取鼠標的左中右鍵;鍵盤事件中獲取鍵盤的按鍵。

event.metaKey()方法——鍵盤事件中獲取<Ctrl>按鍵

4.1.6【移除事件】unbind()方法

【代碼4.1.6.1】可以爲同一個元素綁定多個事件

【代碼4.1.6.1】移除按鈕元素上以前註冊的事件

【代碼4.1.6.2】移除按鈕元素其中一個事件

【代碼4.1.6.3】one()方法——爲元素綁定處理函數,該函數觸發一次後立即被刪除,即在每個對象上事件處理函數只會被執行一次。

注:使用one()方法爲<button>元素綁定單擊事件後,只在用戶第一次單擊按鈕時處理函數才執行,之後的單擊毫無作用。

4.1.7【模擬操作】

【代碼4.1.7.1】常用模擬操作:使用trigger()方法。

$('#btn').trigger("click");可以簡寫爲$('#btn').click();

【代碼4.1.7.2】trigger()方法不僅能觸發瀏覽器支持的具有相同名稱的事件,也可以觸發自定義名稱的事件。

【代碼4.1.7.3】trigger(type[,data])方法傳遞參數。第二個參數以數組形式傳遞,

通常可以通過傳遞一個參數給回調函數,用來區別這次事件是代碼觸發的還是用戶觸發的。

【代碼4.1.7.4】執行默認操作:trigger()可以獲取焦點,triggerHandler()不能獲取焦點。

4.1.8【其他方法】

【代碼4.1.8.1】綁定多個事件類型

【代碼4.1.8.2】添加事件命名空間,便於管理。(沒明白)

【代碼4.1.8.3】相同事件名稱,不同命名空間執行方法。(沒明白)

4.2【Jquery中的動畫】2013年4月17日12:00:31

【代碼4.2.1.1】show()方法和hide()方法(之前使用過)

【代碼4.2.1.2】$(this).next().hide(600);添加速度參數(毫秒),可以讓元素動起來

這個參數可以是”slow”(600ms)、”normal”(400ms)、”fast”(200ms) [slow要加引號]

【代碼4.2.2】fadeIn()方法和fadeOut()方法——只改變元素的不透明度

【代碼4.2.3】slideUp()方法和slideDown()方法——只會改變元素的高度。本例比較常見,實現拉窗簾式。

【代碼4.2.4】自定義動畫方法animate()…

後面的都不怎麼常用,就不看了,有需要的話自己看代碼和演示。

【代碼4.3】視頻展示效果示例,點擊箭頭切換內容,很經典!

【代碼】https://github.com/rxbook/study-jquery-1/tree/master/04.Jquery%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E5%8A%A8%E7%94%BB

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章