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

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

hover()方法

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

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

代碼為：

1 2 3 4 5 6 7 $(function(){ $("#panel h5.head").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }) })

代碼運行後的效果與下面代碼運行後的效果是一樣的。當光標滑過“標題”鏈接時，相應的“內容”將被顯示；當光標滑出“標題”鏈接後，相應的“內容”則被隱藏。

1 2 3 4 5 6 7 8 $(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代碼：

1 2 3 4 5 6 7 $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }) })

通過使用toggle()方法不僅實現了同樣的效果，同時也簡化了代碼。

toggle()方法在jQuery中還有另外一個作用：切換元素的可見狀態。如果元素是可見的，單擊切換後則為隱藏；如果元素是隱藏的，單擊切換後則為可見的。因此上面的代碼還可以寫成如下jQuery代碼：

1 2 3 4 5 6 7 $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().toggle(); },function(){ $(this).next().toggle(); }) })

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

1 2 3 4 5 6 7 8 9 $(function(){ $("#panel h5.head").toggle(function(){ $(this).addClass("highlight"); $(this).next().show(); },function(){ $(this).removeClass("highlight"); $(this).next().hide(); }); })

運行代碼後，如果“內容”是顯示的，“標題”則會高亮顯示：如果“內容”是隱藏的，則不會高亮顯示“新聞標題”。