JQuery學習筆記(2)

 

jQuery中的事件和動畫

1.jQuery中的事件

JavaScript和html之間的交互經過用戶在瀏覽器操做頁面引起的事件來處理。jQuery提供了優雅的事件處理語法和強大的事件處理能力。

加載DOM $(document).ready()方法

事件模塊中最重要的一個函數，極大提升了web應用程序的響應速度。在DOM徹底就緒時就能夠被調用。

$(document).ready(function(){})等價於$(function(){})

事件綁定 bind()方法（事件解綁定，unbind()）

格式爲bind(type [, data] ,fn);

示例：$(#pannel h5.head).bind("click",function(){ $(this).next().show();})

Tips: this 引用的是攜帶響應行爲的dom元素，將其直接轉換爲jQuery對象

合成事件 hover()方法 toggle()方法

hover()用於模擬光標懸停事件，hover(enter , leave);

toggle()用於模擬鼠標連續點擊事件，toggle(fn1,fn2,...fnN); 第一次點擊觸發fn1，第二次觸發fn2...

事件對象

IE-DOM和DOM實現事件對象的方法各不相同，jQuery對此進行了擴展和封裝，使任何瀏覽器中都能很輕鬆的獲取事件對象以及事件對象的一些屬性。

$(element).bind("click",function(event){}); //event爲事件對象

冒泡事件

點一個span，也會觸發其外部的div以及外部的body的已經定義的click事件，可經過 event.stopPropagation();來中止冒泡。

默認事件

點擊表單中的提交就會提交，有時候須要阻止元素的默認行爲。 event.preventDefault();

Tips:若是想同時中止冒泡和默認，能夠在事件處理函數中 return false; 這是一種簡寫。

模擬操做

有些時候咱們定義了事件，能夠經過 trigger() 來觸發。

$('#btn').bind("myClick",function(){.....});

$('#btn').trigger("myClick");

2.jQuery中的動畫

show()方法與hide()方法

show()除了能夠使元素顯示，還能夠添加速度參數，show(1000)就是1000毫秒顯示出來。 高、寬、不透明度同時變。

$("element").show("slow");//還有normal,fast

fadeIn()方法和fadeOut()方法

他們只改變元素的不透明度，一樣能夠設置速度參數。

自定義動畫：animate()方法

animate(params,speed,callback)爲其結構，params爲屬性和值的映射組，callback爲在動畫完成時的執行參數，可選。示例爲left當前位置上減500px,最後改變樣式。

$(this).animate({left:"+=500px"},3000，function(){$(this).css("border","5px solid blue")})

Tips：若是想延遲動畫可在animate後加 .delay(1000)

Tips：動畫animate()方法鏈式書寫，動畫是順序發生的。

中止動畫: stop()方法

stop([clearQueue],[gotoEnd]);爲其結構。stop()方法會結束當前正在進行的動畫，並當即執行隊列中的下一個動畫。clearQueue參數設爲true時，能夠當即中止並把剩下的動畫都清空。gotoEnd參數能夠讓正在執行的動畫直接到達結束時刻的狀態。

$(this).stop(true).animate({height:"150"},200).animate({width:"300"},300)

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

if(!$(document).is(":animated")){//若是沒動畫，則添加新動畫....}

其餘動畫方法

toggle()方法: 切換元素可見狀態： $(this).next().toggle();

slideToggle()方法: 經過高度變化切換元素可見狀態 $(this).next().sildeToggle();

fadeToggle()方法: 經過不透明度變化切換元素可見狀態 $(this).next().fadeToggle();

fadeTo()方法: 以漸進方式調整元素的不透明度到指定的值。$(this).next().fadeTo(600,0.2);