作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing
我用兩篇文章的時間講述瞭如何利用jquery去查詢找到dom節點,現在又要用兩篇文章的時間來說明jquery的事件驅動,在上一篇裡已經明確說明瞭這一點,包括js裡最常用到的點擊click事件的使用,諸如其他事件,都是和click類似的處理。如表單事件submit,寫時$("form").submit(/*fuc*/);又如鍵盤事件keydown,$("p").keydown(/*fuc*/);還有鼠標的mouveover(鼠標移入對象時觸發),所以,這節就沒有必要再次去說明這些常用事件瞭,這節我們要講的是事件的切換hover|toggle。
本文案例及源碼請點擊 這裡。
先來看API裡對於hover(over/*function*/,out/*function*/)的說明:
一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。這是一個自定義的方法,它為頻繁使用的任務提供瞭一種“保持在其中”的狀態。
它的人類語言說法就是,當鼠標移入一個對象時,它會觸發一個方法,移出時又會觸發另一個方法,說白瞭,就是onmouseover和onmouseout的結合體,也就是一個節點上同時綁定瞭這兩個事件。
好,我們用它來完成一個功能來說明它的用法,比如上前一節裡,頁面上有一個表格式形式的數據,由於數據量較大,或許我們需要在鼠標移上去時,讓該行的背景色變深,這樣更能夠集中註意力,然後鼠標移去這一行時,我們需要把背景色還原,代碼如下:
js:
$(".list tr").hover(function(){
$(this).css("backgroundColor","blue");
},function(){
$(this).css("backgroundColor","#fff");
});
這樣寫很好理解是吧,不過有個問題是如果原來table就有背景色的話,這樣寫會把原有的背景色變成白色,假設我們還是讓奇偶數行的顏色不一樣
$(".list tr:even").css("backgroundColor","#ddddee");
$(".list tr:odd").css("backgroundColor","#999");
那我要怎麼做才能移進去有色,移出來還原成原來的顏色呢?我們可以使用css裡的class,我們建一個class類.brTR
<style>
.brTR{ background-Color:blue;}
</style>
然後把剛才的JS改成:
$(".list tr").hover(function(){
$(this).addClass("brTR");
},function(){
$(this).removeClass("brTR");
});
結果你一試,發現還是不行,為什麼呢,因為你剛才把奇偶行變色時用的是css(),這個設置的是style,又因為style的權重比class要大,所以瀏覽器會優先使用style的樣式,所以剛才的變色還得這樣改:
css:
tr.brTR{background-color:blue;}
.odd{background-color:#999;}
.even{background-color:#ddddee;}
JS:
$(".list tr:even").addClass("event");
$(".list tr:odd").addClass("odd");
這裡我把brTR改成瞭tr.brTR,這樣是為瞭提升這個class的權重,不然的話它的權重和.odd是一樣的,而.odd是在後面,所以還是隻會顯示.odd或.even的背景.在CSS權重中,一般情況是style>ID>class>p,如果是同等級的話,越詳細權重就越大,這個如果你有興趣可以查閱相關資料。
我們發現這種寫法是簡便瞭許多,但還是覺得有點重復,因為在移入和移出事件中,都是添加刪除相同的class,jquery有沒有更簡便的方法呢,答案是肯定地,在jquery還有一個toggleClass,就是針對這種狀態在兩種之間切換的樣式而出的。它的作用是如果有該class就移除,沒有就添加。所以上面的代碼還可以繼續簡化為:
$(".list tr").hover(function(){
$(this).toggleClass("brTR");
});
我們甚至連第二個函數都省略掉瞭,隻有這一行就可以完成,鼠標移動變色還原的效果瞭,在省略第二個參數out/*function*/時,它默認會在out時繼續調用第一個參數,所以toggleClass也是有它的用武之地的。
又有需求瞭,我想查看多個行的數據,這樣方便對比,我希望它們保持不同的背景色,比如一級用紅色,二級用綠色,三級用黃色等。好,那我們就要引入下一個jquery切換事件瞭toggle, 它的說明是:每次點擊都依次調用參數函數。所以這個功能很簡單,可以這樣做:
$(".list tr").toggle(function(){
$(this).css("backgroundColor","red");
},function(){
$(this).css("backgroundColor","green");
},function(){
$(this).css("backgroundColor","yellow");
});
這樣你就可以完成多個狀態間的切換瞭,toggle做的就是click事件,它就是把多個click按順序來一次性執行。正因為它可以切換click事件,所以我們最常用的點擊顯示隱藏功能就可以用它來完成瞭。比如我們有個廣告浮動條,想點擊之後關閉,然後再有個還原點擊,應該怎麼做呢,考慮30秒。
好瞭,30秒到瞭,請看下面的代碼片斷:
html:
<p class="ad">
<a class="close">關閉</a>
<img src="index.jpg" width="50px"/>
</p>
js:
$(".ad a.close").toggle(function(){
$(".ad img").hide();
$(this).html("還原");
},function(){$(".ad img").show();$(this).html("關閉");});
好,今天就到這裡瞭,大傢可以多試用下這兩個切換方法,比如常用的導航菜單,模擬復選框等。如果你有任何的疑問都不要問我,請重復再重復閱讀本文。或加入我的Q群70210212進行討論。
本文案例及源碼請點擊這裡。