JQuery中DOM事件合成用法實例分析_jquery

本文實例講述了JQuery中DOM事件合成用法。分享給大家供大家參考。具體分析如下：

jQuery有兩個合成事件－hover()方法和toggle()方法，類似前面講過的ready()方法，hover()方法和toggle()方法都屬於jQuery自訂的方法。

hover()方法

hover()方法的語法結構為：
hover(enter,leave);

hover()方法用於模擬遊標懸停事件。當遊標移到元素上時，會觸發指定的第1個函數(enter);當遊標移出這個元素時，會觸發指定的第2個函數(leave)。

代碼為：

$(function(){
 $("#panel h5.head").hover(function(){
  $(this).next().show();
 },function(){
  $(this).next().hide(); 
 })
})

程式碼運行後的效果與下面程式碼運行後的效果是一樣的。當遊標滑過「標題」連結時，相應的「內容」將被顯示；當遊標滑出「標題」連結後，相應的「內容」則被隱藏。

$(function(){ 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").show(); 
 }); 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").hide(); 
 }) 
});

注意：

1. CSS中有偽類選擇符，例如“:hover"，當使用者遊標懸停在元素上時，會改變元素的外觀。在大多數符合規範的瀏覽器中，偽類選擇符可以用於任何元素。然而在IE 6瀏覽器中，偽類選擇符僅可用於超連結元素。對於其他元素，可以使用jQuery的hover()方法。

2. hover()方法精確來說是替代jQuery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")。因此當需要觸發hover()方法的第2個函數時，就需要用trigger("mouseleave")來觸發，而不是trigger("mouseout")。

toggle()方法

toggle()方法的語法結構為：
toggle(fnl, fn2, ...fnN);

toggle()方法用於模擬滑鼠連續單擊事件。第1次點選元素，觸發指定的第1個函數(fn1)；當再次按一下相同元素時，則觸發指定的第2個函數(fh2)；如果有更多函數，則依序觸發，直到最後一個。隨後的每次單擊都重複對這幾個函數的輪番呼叫。

在前面的加強效果的範例中，使用了以下jQuery程式碼：

$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next().show();
 },function(){
  $(this).next().hide();
 })
})

透過使用toggle()方法不僅實現了相同的效果，同時也簡化了程式碼。

toggle()方法在jQuery中還有另一個功能：切換元素的可見狀態。如果元素是可見的，按一下切換後則為隱藏；如果元素是隱藏的，則按一下切換後則為可見的。因此上面的程式碼還可以寫成如下jQuery程式碼：

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
  $(this).next().toggle(); 
 },function(){ 
  $(this).next().toggle(); 
 }) 
})

為了能有更好的用戶體驗，現在需要在用戶點擊“標題”連結後，不僅顯示“內容”，而且高亮顯示“標題”。代碼為：

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
   $(this).addClass("highlight"); 
  $(this).next().show(); 
 },function(){ 
  $(this).removeClass("highlight"); 
   $(this).next().hide(); 
 }); 
})

執行程式碼後，如果「內容」是顯示的，「標題」則會高亮顯示：如果「內容」是隱藏的，則不會高亮顯示「新聞標題」。

希望本文所述對大家的jQuery程式設計有所幫助。