首頁 > web前端 > js教程 > JQuery中的事件和DOM動畫操作總結

JQuery中的事件和DOM動畫操作總結

伊谢尔伦
發布: 2017-06-17 15:53:10
原創
1316 人瀏覽過

JQuery中的事件

     

1.載入DOM

在頁面載入完畢後,瀏覽器會透過 JavaScript 為 DOM 元素新增事件。在常規的 JavaScript 程式碼中,通常使用 window.onload 方法,在JQuery 中使用$(document).ready() 方法。 JQuery中的簡化寫法「$()」。在window.onload中註冊事件時,只能在一個window.onload體中註冊。但使用JQuery,可以在多個$(document).ready()或$()中註冊。

 

2.事件綁定

     對符合的元素對指定的事件綁定。如,昨天我們在window.onload中綁定事件的方法:"$("p").onclick(function(){

 alert( $(this).text() );

});」
     在JQuery的$(document).ready()中可以這樣綁定:
「$("p").click(function(){

 alert( $(this).text() );

});」
          使用bind(),可以這樣綁定:
$("p") .bind("click", function(){

 alert( $(this).text() );

});

 

3.合成事件

    hover():類比遊標停留時間。當遊標移到元素上時,會觸發指定的第一個函數,當遊標移出這個元素時,會觸發指定的第二個函數。如,懸停效果:
$("td").hover(
 function () {$(this).addClass("hover");},
 function () {$(this) .removeClass("hover");}
);

 

toggle():用於模擬滑鼠連續點選事件。第一次單擊元素,觸發指定的第一個函數,當再次單擊同一個元素時,則觸發指定的第二個函數,如果有更多個函數,則依次觸發,直到最後一個。如,設定元素的選擇與非選取效果:

$("td").toggle(
function () {$(this).addClass("selected");},
function () {$(this).removeClass("selected");}
);

 

使用toggle()而不傳遞參數,效果為切換元素的可見狀態。

 

4.事件的冒泡

         事件會以 DOM 層次結構像水泡一樣不斷向上只止頂端。

解決:在事件處理函數中傳回 false,會對事件停止冒泡。也可以停止元素的預設行為。

         目前的所有UI互動或其事件,都支援此功能。在自己的事件處理函數傳回false將中止事件的繼續向下傳遞。傳回true事件繼續向下傳遞。

 

5.事件物件的屬性

         事件物件:當觸發事件時,事件物件就建立了。在程式中使用事件只需要為處理函數新增一個參數。在事件處理函數中使用些參數。如,當取得​​事件發生時,相對於頁面的位置:event.pageX, event.pageY,event則是事件處理函數的參數

 

6.移除事件

          移除某按鈕上的所有click 事件:$(「btn」).unbind(「click ”)

移除某按鈕上的所有事件:$(“btn”).unbind();

one():此方法可以為元素綁定處理函數。當處理函數觸發一次後,事件立即被刪除。即在每個物件上,事件處理函數只會被執行一次。

JQuery中的DOM動畫

透過設定DOM物件的顯示與隱藏方式,可以產生動畫效果。

 

1.無動畫效果的隱藏與顯示

hide():在HTML文件中,為一個元素呼叫hide()方法會將該元素的display樣式改為none。程式碼功能同css(“display”, “none”);相同。

show():將元素的display樣式改為先前的顯示狀態。

toggle():切換元素的可見狀態:如果元素時可見的,則切換為隱藏;如果元素時隱藏的,則切換為可見的。

 

2.透過設定透明度效果的隱藏與顯示,達到淡入淡出的動畫效果

fadeIn(),fadeOut():只改變元素的透明度。 fadeOut() 會在指定的一段時間內降低元素的不透明度,直到元素完全消失。 fadeIn() 則相反。如,用600毫秒緩慢的將段落淡入:$("p").fadeIn("slow");。

fadeTo():把不透明度以漸近的方式調整到指定的值(0 – 1 之間)。並在動畫完成後可選地觸發一個回調函數。如,用200毫秒快速將段落的透明度調整到0.25,動畫結束後,顯示一個「Animation Done」訊息框:「$("p").fadeTo("fast", 0.25, function(){ alert(" Animation Done."); });」。

 

3.透過設定高度效果的隱藏與顯示,達到滑下與收起的動畫效果

slideDown(),slideUp():只會改變元素的高度。如果一個元素的display屬性為none,當呼叫slideDown() 方法時,這個元素會從上到下延伸顯示。 slideUp() 方法正好相反,元素由下至上縮短隱藏。如,用600毫秒緩慢的將段落滑下:$("p").slideDown("slow");。

slideToggle():透過高度變化來切換匹配元素的可見性。如,200毫秒快速將段落滑上或滑下,動畫結束後,會顯示一個「Animation Done」訊息框:「$("p").slideToggle("fast",function(){ alert("Animation Done ."); });」。

以上是JQuery中的事件和DOM動畫操作總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板