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

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

hover()方法

hover()方法的語(yǔ)法結(jié)構(gòu)為：
hover(enter,leave);

hover()方法用于模擬光標(biāo)懸停事件。當(dāng)光標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第1個(gè)函數(shù)(enter);當(dāng)光標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第2個(gè)函數(shù)(leave)。

代碼為：

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

代碼運(yùn)行后的效果與下面代碼運(yùn)行后的效果是一樣的。當(dāng)光標(biāo)滑過(guò)“標(biāo)題”鏈接時(shí)，相應(yīng)的“內(nèi)容”將被顯示；當(dāng)光標(biāo)滑出“標(biāo)題”鏈接后，相應(yīng)的“內(nèi)容”則被隱藏。

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

注意：

1. CSS中有偽類選擇符，例如“:hover"，當(dāng)用戶光標(biāo)懸停在元素上時(shí)，會(huì)改變?cè)氐耐庥^。在大多數(shù)符合規(guī)范的瀏覽器中，偽類選擇符可以用于任何元素。然而在IE 6瀏覽器中，偽類選擇符僅可用于超鏈接元素。對(duì)于其他元素，可以使用jQuery的hover()方法。

2. hover()方法準(zhǔn)確來(lái)說(shuō)是替代jQuery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")。因此當(dāng)需要觸發(fā)hover()方法的第2個(gè)函數(shù)時(shí)，需要用trigger("mouseleave")來(lái)觸發(fā)，而不是trigger("mouseout")。

toggle()方法

toggle()方法的語(yǔ)法結(jié)構(gòu)為：
toggle(fnl, fn2, ...fnN);

toggle()方法用于模擬鼠標(biāo)連續(xù)單擊事件。第1次單擊元素，觸發(fā)指定的第1個(gè)函數(shù)(fn1)；當(dāng)再次單擊同一元素時(shí)，則觸發(fā)指定的第2個(gè)函數(shù)(fh2)；如果有更多函數(shù)，則依次觸發(fā)，直到最后一個(gè)。隨后的每次單擊都重復(fù)對(duì)這幾個(gè)函數(shù)的輪番調(diào)用。

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

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

通過(guò)使用toggle()方法不僅實(shí)現(xiàn)了同樣的效果，同時(shí)也簡(jiǎn)化了代碼。

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

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

為了能有更好的用戶體驗(yàn)，現(xiàn)在需要在用戶單擊“標(biāo)題”鏈接后，不僅顯示“內(nèi)容”，而且高亮顯示“標(biāo)題”。代碼為：

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

運(yùn)行代碼后，如果“內(nèi)容”是顯示的，“標(biāo)題”則會(huì)高亮顯示：如果“內(nèi)容”是隱藏的，則不會(huì)高亮顯示“新聞標(biāo)題”。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

最新評(píng)論