jQuery hover()方法和jQuery toggle()方法用法樣本

標籤：http   java   使用   io   strong   ar   art   div   

jQuery hover()方法和jQuery toggle()方法是兩個合成事件，類似ready()方法，都屬於jQuery自訂的方法。下面來講解這兩個方法的屬性和如何使用。

一、hover()方法：文法結構為： hover(enter,leave)。用於類比游標懸停事件。當游標移動到目標元素上時，會觸發指定第1個函數(enter);當移出這個元素時，會觸發第2個函數(leave)。前端架構UI分享

下面是一段範例程式碼：

.代碼  

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

 

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

.代碼  

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

 

注意：CSS中有偽類選擇符，例如“:hover”，當游標懸停於元素上時，會改變元素的外觀。偽類選擇符可以用於任何元素。然而在IE 6瀏覽器中，偽類選擇符僅可用於超連結元素。對於其他元素，可以使用jQuery的hover()方法。前端架構UI分享

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

二、toggle()方法：文法結構為：toggle(fnl, fn2, …fnN)。主要用於類比滑鼠連續單擊事件。第1次單擊元素，觸發指定的第1個函數(fn1)；當再次單擊同一元素時，則觸發指定的第2個函數(fh2)；如果有更多函數，則依次觸發，直到最後一個。隨後的每次單擊都重複對這幾個函數的迴圈調用。

在前面的加強效果的例子中，使用了以下jQuery代碼：

.代碼  

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

 

使用toggle()不僅獲得了相同效果，而且也簡化了代碼。

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

.代碼  

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

 

為了能有更好的使用者體驗，現在需要在使用者單擊“標題”連結後，不僅顯示“內容”，而且高亮顯示“標題”。代碼為： 前端架構UI分享

.代碼  

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

 

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