使用jQuery快速高效制作網頁交互特效——07 第七章 jQuery中的事件與動畫
1、 jQuery中的事件:
●和WinForm一樣,在網頁中的交互也是需要事件來實現的,例如tab切換效果,可以通過鼠標單擊事件來實現 |
●jQuery事件是對JavaScript事件的封裝,常用事件分類 ●基礎事件
●復合事件
|
2、基礎事件:
●語法: 時間名=”函數名()”; 或: DOM 對象.事件名=函數 |
|||||||||||||||||||||||||||||
●載入事件:在jQuery中,常用的window事件有文檔載入事件,它對應的方法是ready()。 |
|||||||||||||||||||||||||||||
●鼠標事件:當用戶在文檔上移動或單擊鼠標而產生的事件。
★ $(this).css("background-color","#f01e28"); }); $(".nav-ul a").mouseout(function(){ //當鼠標移出菜單時 $(this).css("background-color","#ff2832"); }); ◆鼠標事件方法的區別:
|
|||||||||||||||||||||||||||||
●鍵盤事件:鍵盤事件是指當鍵盤聚焦到Web瀏覽器時,用戶每次按下或釋放鍵盤上的按鍵時都會產生事件。常用的鍵盤事件有keydown、keyup、keypress。
◆eg:$("[type=password]").keyup(function () { //當鍵盤釋放時 $("#events").append("keyup"); }).keydown(function (e) { //當鍵盤按下時 $("#events").append("keydown"); }).keypress(function () { //向密碼框輸入字符時 $("#events").append("keypress"); }); $(document).keydown(function (event) { if (event.keyCode == "13") { //按下回車鍵時 alert("確認要提交麽?"); } }); |
|||||||||||||||||||||||||||||
●瀏覽器事件:在瀏覽網頁時,大家經常會調整瀏覽器窗口的大小。這些都是通過jQuery中的resize()方法觸發resize事件,進而處理相關的函數,來完成頁面的一些特效。 語法: $(selector).resize(); |
3、 綁定事件與移除事件:
●綁定事件:在jQuery中,如果需要為匹配的元素同時綁定一個或多個事件,則可以使用bind()方法。 語法: bind(type,[data],fn);
★除了bind()方法之外,還有on()、live()和one()等事件綁定方法; ★上面這種已經過時,建議使用on: On(type,[data],fn); |
|||||||||||||
◆綁定單個事件: Eg:使用綁定實現鼠標移至“我的當當”顯示二級菜單 $(document).ready(function(){ $(".on").bind("mouseover",function(){ $(".topDown").show(); }); }); 效果:
|
◆綁定多個事件: Eg:使用綁定多個事件實現“我的當當” 二級菜單的顯示和隱藏 $(".top-m .on").bind({ mouseover:function(){ //為mouseover綁定方法 $(".topDown").show(); }, mouseout:function(){ //為mouseout綁定方法 $(".topDown").hide(); } }); |
||||||||||||
●移除事件:當事件執行完了,需要把綁定的事件通過一定的方法取消。在jQuery中提供了移除事件的方法,同樣可以移除單個或多個事件,可以使用unbind()方法。 語法: unbind([type],[fn]) //type:事件類型,主要包括:blur、focus、click、mouseout等基礎事件,此外,還可以是自定義事件; //fn:處理函數,用來解除綁定的處理函數; // Undind()方法有兩個參數,這兩個參數不是必須的。當unbind()不帶參數時,表示移除所綁定的全部事件。 |
4、 復合事件:
●在jQuery中有兩個復合事件方法-hover()和toggle(),這兩個方法與ready()類似,都是jQuery自定義的方法。 |
●hover()方法:在jQuery中,hover()方法用於模擬鼠標移入和移出事件。 當鼠標移入時,會觸發指定的第一個函數(enter); 當鼠標移除這個函數時,會觸發指定的第二個函數(leave), 該方法相當於mouseenter和mouseleave事件的組合。 語法: hover(enter,leave); eg:$(".top-m .on").hover(function(){ $(".topDown").show(); }, function(){ $(".topDown").hide(); } ); |
●toggle()方法:在jQuery中,toggle()方法分為帶參數和不帶參數。 ◆帶參數的方法用於模擬鼠標連續click事件。第一次單擊元素,觸發指定的第一個函數,再次單擊則觸發指定的第二個函數,如果有更多函數,則依次觸發,直到最後一個。隨後的單擊都重復對幾個函數的輪番調用。 語法: toggle(fn1,fn2…..fnN); eg:$("input").toggle( function(){$("body").css("background","#ff0000");}, function(){$("body").css("background","#00ff00");}, function(){$("body").css("background","#0000ff");} ) ◆toggle()不帶參數時,與show()和hide()方法的作用一樣,切換元素的可見狀態。如果是可見的,則切換為隱藏狀態;如果是隱藏的,則切換為可見狀態。 語法: toggle(); eg:$("input").click(function(){ $("p").toggle(); }) ◆與jQuery中的toggle()方法一樣,toggleClass()可以對樣式進行切換,實現事件觸發時某元素在“加載某個事件”和“移除某個事件”之間切換。 語法: toggleClass(className); eg:$("input").click(function(){ $("p").toggleClass("red"); }) |
●toggle( )和toggleClass( )總結 1、 toggle( fn1,fn2...)實現單擊事件的切換,無須額外綁定click事件 2、toggle( )實現事件觸發對象在顯示和隱藏狀態之間切換 3、toggleClass( )實現事件觸發對象在加載某個樣式和移除某個樣式之間切換 |
5、 jQuery中的動畫:
jQuery提供了很多動畫效果 1、 控制元素顯示與隱藏 2、改變元素的透明度 3、改變元素高度 4、自定義動畫 |
||||||
●控制元素的顯示:在jQuery中,可以使用show()方法控制元素的顯示,除此之外,它還能定義顯示時的效果,如顯示速度。 語法: $(selector).show([speed],[callback]);
|
||||||
●控制元素的隱藏:用法與show()方法類似。 語法: $(selector).hide([speed],[callback]); |
||||||
●改變元素的透明度: 1.控制元素淡入:在jQuery中,如果元素是隱藏的,則可以使用fadeIn()方法控制元素淡入,它與show()方法相同,可以定義淡入時的效果,如顯示速度 語法: $(selector).fadeIn([speed],[callback]);
2.控制元素淡出 語法: $(selector).fadeOut([speed],[callback]); |
||||||
●改變元素的高度:在jQuery中,用於改變元素高度的方法是slideUp()和slideDown()。若元素中的display屬性值為none,當調用slideDown()方法時,這個元素會從上向下延伸顯示,而slideUp()方法正好相反,元素下到上縮短直至隱藏。 語法: $(selector).slideUp([speed],[callback]); $(selector).slideDown([speed],[callback]); |
||||||
JQuery中的所有動畫效果,都可以設置三種速度參數,即slow、normal、fast(三者對應的時間分別為0.6秒,0.4秒,0.2秒); 當使用關鍵字作為速度的參數時,需要使用雙引號引起來,如:fadeIn(“slow”), 而使用時間數值作為速度參數時,則不需要使用雙引號,如:fadeIn(500),需要註意的是,當使用數值作為參數時,單位為毫秒而不是秒; |
||||||
●自定義動畫:在jQuery中,可以創建自定義動畫,實現各種比較復雜的動畫。 語法: $(selector).animate({params},[speed],[callback]); //params:必選項目,定義形成動畫的CSS屬性。 //speed:可選,規定效果時長,取值:毫秒、fast、slow; //callback:選項,滑動完成後執行的函數名稱。 |
6、 事件冒泡:
附加: ●事件冒泡:當一個父元素的子元素有與父元素相同的事件時,那麽父元素的事件執行時,子元素的事件也會執行,那麽父元素的一次click事件相當於執行了2次。
◆阻止冒泡事件 Eg:下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分別將三種元素都註冊click事件。 那麽,click事件會按照DOM的層次結構,像水泡一樣不斷向上直到頂端,所以稱之為事件冒泡。 <body><div><span>我是****</span></div></body> $("span").bind("click", function(){ alert(‘span click‘); }); $("div").bind("click", function(){ alert(‘div click‘); }); $("body").bind("click", function(){ alert(‘body click‘); }); 解決這個問題的辦法是:在SPAN執行完click事件後,停止事件冒泡。 $("span").bind("click", function(event){ alert(‘span click‘); event.stopPropagation(); //停止冒泡 }); |
||
js之事件冒泡和事件捕獲: (1)冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕獲型事件(event capturing):事件從最不精確的對象(document 對象)開始觸發,然後到最精確(也可以在窗口級別捕獲事件,不過必須由開發人員特別指定)。 (3)DOM事件流:同時支持兩種事件模型:捕獲型事件和冒泡型事件,但是,捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象,從document對象開始,也在document對象結束。 DOM事件模型最獨特的性質是,文本節點也觸發事件(在IE中不會)。 支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法,基中第3個參數useCapture是一個Boolean值,用來設置事件是在事件捕獲時執行,還是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法,此方法沒有相關設置,不過IE的事件模型默認是在事件冒泡時執行的,也就是在useCapture等於false的時候執行,所以把在處理事件時把useCapture設置為false是比較安全,也實現兼容瀏覽器的效果。 事件捕獲階段:事件從最上一級標簽開始往下查找,直到捕獲到事件目標(target)。 Netscape中,div先觸發,這就叫做事件捕獲。 Microsoft中,p先觸發,這就叫做事件冒泡。 兩種事件處理順序剛好相反。IE只支持事件冒泡,Mozilla, Opera 7 和 Konqueror兩種都支持,舊版本的Opera‘s 和 iCab兩種都不支持 。 事件捕獲 事件冒泡 W3C模型 程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡,方法就是綁定事件時通過addEventListener函數,它有三個參數,第三個參數若是true,則表示采用事件捕獲,若是false,則表示采用事件冒泡。 ele.addEventListener(‘click‘,doSomething2,true) true=捕獲 false=冒泡 傳統綁定事件方式 ele.onclick = doSomething2 IE瀏覽器 ele.attachEvent("onclick", doSomething2); 附:事件冒泡(的過程):事件從發生的目標(event.srcElement||event.target)開始,沿著文檔逐層向上冒泡,到document為止。 事件的傳播是可以阻止的: |
||
Eg: <!DOCTYPE html> |
||
理解: 他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點,即自上而下的去觸發事件。相反的,事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數,就是控制事件觸發順序是否為事件捕獲。true,事件捕獲;false,事件冒泡。默認false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡,意思就是到我為止,我的爹和祖宗的事件就不要觸發了。 這是HTML結構
現在我們給它們綁定上事件 document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被觸發,"+this.id); }) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被觸發,"+this.id) }) 結果: child事件被觸發,child parent事件被觸發,parent 結論:先child,然後parent。事件的觸發順序自內向外,這就是事件冒泡。 現在改變第三個參數的值為true document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被觸發,"+e.target.id); },true) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被觸發,"+e.target.id) },true) 結果: parent事件被觸發,parent child事件被觸發,child 結論:先parent,然後child。事件觸發順序變更為自外向內,這就是事件捕獲。 |
使用jQuery快速高效制作網頁交互特效——07 第七章 jQuery中的事件與動畫