實作 | jQuery簡易選單運用

May.20, 2011 (Friday)

一直對jQuery的特效很感興趣，而且結合jQuer做出來的網站可以更加生動活潑，而且又不會Loading很久，搭配HTML5+CSS3，說不定還能取代Flash呢。

當然，一開始都是先從套用開始，後來漸漸看得懂一些語法(畢竟把語法拆開來看，也不是很難的英文單字)，但是如果要自己完整的寫出一個小特效，還是不知道從何寫起，雖然有四年資管系的基礎，可是我的土法煉鋼非常的嚴重哈。(恩扯遠了)

總之，因為想學習寫jQuery，就請了身旁的大師 - SR，幫我上了一堂簡單的課程。

說到SR，就要好好來讚揚他一下，如果你做網頁超過十年，一定聽過「SR資源館」，說不定還是會員之一。SR資源館的站長就是SR，這個網站的整站程式完全是他一手打造出來的，我崇拜了他十年之久，現在可以跟他變成朋友，還可以請他教我jQuery，我真的感到非常榮幸。

作業一

那麼，這就是SR給我出的第一道作業 (其實已經出到作業三了，但是我看作業二好難所以遲遲還未動工OTL)
第一道作業有三個重點：

1. 滑鼠移動主選單，次選單會由上而下展開來
2. 滑鼠離開始，會由下而上慢慢消失
3. 點選次選單項目時，上方圖片會變成相對應的圖片

這是最後我寫出來的特效：jQuery簡易選單運用

寫出來的成就感真的很高，當然也不是一開始就做對的，所以我想就把自己寫的code記錄起來，並且做些註解，筆記一下我寫程式的過程吧
以下是我寫的code：

<script type="text/javascript">
$(document).ready(function(){
$("#menu li a").mouseenter(
// 本來一開始是用hover將滑鼠移過跟移入的效果寫在一起，但是因為兩個ID的控制項不同，所以最後決定將他們分開。改用mouseenter (滑鼠移入) & mouseleave (滑鼠移出)
function() {
$(this).next().show(150);
// next()表示他的下一個可以搜尋到的元素
return false;
// 從以前寫程式就不知道為什麼要加return false，不過在這邊是為了讓超連結沒有作用，所以回傳一個false值給他。
});
$("#menu li").mouseleave(
function() {
$(this).find("ol").hide(150);
//其實這邊是我寫最久的地方.... 因為腦子一下轉不過來，是要把 ol 給hide阿~
});

$("#menu ol li a").click(
function() {
$("#demo").attr("src",this.href);
//這邊也頗困難的，簡單來說，就是將 #demo 他的屬性「src」改成 #menu ol li a 的「href」屬性。(其實這邊有偷看一下解答才知道可以用一行解決，雖然我知道要用attr，但是寫了三行換來換去的東西還是寫不出來:( )
return false;
});

});
</script>