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

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中文網其他相關文章！