邊做邊學jQuery系列03 - jQuery常用的Javascript技巧

課程錄製時間: 2009年

jQuery常用的Javascript技巧

要正式使用jQuery之前，我們先做些基本功課。

【jQuery初步】

jQuery架構的主要應用概念是"由Selector取得一個或多個元素組成的群組(Set)，然後再串接我們要對群組裡各元素所做的各項動作"。舉例來說:

jQuery("div.clsEditor").hide();

jQuery("div.clsEditor")會傳回一個所謂的jQuery物件，"div.clsEditor"就是所謂的Selector，可以對DOM裡的所有元素進行篩選，得到一個由所有CSS類別為clsEditor的<div>元素組成的群組，而之後所加上的.hide()即意味著對群組裡的每一個元素進行隱藏(style.display="none")。jQuery物件具備類似陣列的特性，我們可以透過.length得知群組內的元素個數，一樣可以用[n]存取第n個元素，get()則會真的傳回由HTML元素所組成的陣列。在實際寫程式時，我們多半會用"$"符號代替"jQuery"幾個字，換句話說，jQuery("div.clsEditor")可以寫成$("div.clsEditor")，效果完全相同。

上面所提的hide()方法，是jQuery所延伸擴充的功能，並非原本DOM所內建的，因此元素要被包裝在jQuery物件中才能引用呼叫；當傳回結果是jQuery物件時，也別把它當成DOM元素操作，試圖設定style.display、innerHTML之類的元素屬性。這是初學jQuery容易混淆的地方，jQuery小抄上有傳回資料型別提示，可以幫上一些忙。

除了用Selector選取，我們也可以直接提供HTML標籤當場創造元素，例如:

$("<span>New</span>").appendTo("body");

這樣就可以立即建立一個<span>並安插在網頁的最下方。至於要對已取得的元素上套用jQuery的各項函數，只需將元素傳入$(...)中即可，例如以下的例子:

$(document.body).css("margin", "0px");

最後提醒一點，所有對網頁內容的更動(例如: 新增元素)，應該都要等待瀏覽器載入網頁完成後再進行，更動載入中的網頁結構可能導致錯誤或不可知的結果。因此，網頁初始化就要執行的程式碼，要放在<body onload="...">的onload函數中才保險。在jQuery中，我們可以寫成

$(document).ready(function () {
//初始階段要做的事...
});

jQuery的終極精神就是中就是要追求"write less, do more"，所以jQuery提供了jQuery(callback)的語法，讓我們可將以上的程式碼再簡化成:

$(function() {
//初始階段要做的事...
});

補充一點，$()的快捷別名在一些AJAX Framework或Javascript中(例如: Prototype)也被用掉了(好像$在哪裡都很受歡迎:D)。透過jQuery.noConflict();函數，便可將$符號讓給其他Framework使用，算是考慮得十分周到。

由以上陸續出現的例子，我們大概可以體會到，jQuery在應用時，操作手法很一致，都是先取得要處置的對象，後面再逐一接上要進行的操作，要處置的對象可以是一個群組，而該操作也會一一套用在群組裡每個成員上。例如: $(".clsInput").css("color", "red").css("border", "solid 1px blue").val("Test") 就等於取得所有CSS類別為clsInput的元素，改變它們的顏色、再改變它們的框線、最後設定它們的value值，邏輯上很直覺易懂，加上函數可以一再串接，這樣的特性讓jQuery的程式碼極為精簡。

【Javascript進階語法】

會想到要補充這些Javsscript進階語法是基於我自己的經驗，即便已搞過好幾年網站，也用Javascript寫過不少前端函數，但有些進階(而且好用)語法卻是在接觸jQuery後才慢慢學會的，這些技巧後來也很普遍地應用在其他寫Javascript程式的場合，大幅提高了我程式的簡潔度。而搞懂這些技巧，將有助於我們看懂jQuery的程式與範例。

以下介紹幾個補充重點:

物件屬性操作
雖然嚴格來說，Javascript不算是一種物件導向語言，但Javascript也可以產生類似的物件屬性(Property)、方法(Method)效果。例如以下的示範:

        function say(msg) {
        alert(this.Name + " 說: " + msg);
    }
    
    var person = new Object();
    person.Name = "Jeffrey";
    person.Say = say;
    
    //取得屬性
    alert("Name=" + person.Name);
    //呼叫方法
    person.Say("Hello");
    //透過名稱字串取得屬性
    alert("Name=" + person["Name"]);
    //透過名稱字串呼叫方法
    person["Say"]("Hello");

匿名函數(Anonymous Function)
傳統上，大家已經很熟悉用function funcName(args) { ... }的方式宣告函數，再用函數名稱設定為某個元素的事件。但在jQuery中，為了精簡起見，針對只使用在一個特定地方的函數，常常會省略另外宣告函數名稱的步驟，而直接用function(msg) { ... }定義函數內容。例如: 前述例子中的say(msg)若只專屬給person使用，我們可以寫成:
```
    var person = new Object();
    person.Name = "Jeffrey";
    person.Say = function(msg) { 
        alert(this.Name + " 說: " + msg); 
    };
    person.Say("匿名函數呼叫成功!");
		
```

匿名物件(Anonymous Object)
以上的寫法已經夠簡潔了嗎? 還不夠，更進一步，我們可以直接將new Object()的過程省略，直接寫成以下形式:

    var person2 = {
            Name: "Jeffrey", 
            Say: function(msg) { alert(this.Name + " 說: " + msg); }
        };
    person2.Say("匿名物件耶!");

陣列表示法
傳統上，要建立一個陣列，我們會先var ary = new Array();再ary[0]="AAA"; ary[1]="BBB";逐一寫入值。其實Javascript有更簡潔的寫法，寫成 var ary = [ "AAA", "BBB", "CCC" ]; 即可!

jQuery廣泛地使用了上述幾項技巧，尤其是要傳遞多個參數時，常用匿名物件來包裝多組數值。舉例來說，我們要變更某個<span>的CSS，改為藍色、加上底線並修改游標使其像個連結，我們可以分別呼叫三次css()，也可以將三個CSS屬性包成匿名物件再一次傳給css()，結果相同。其中，直接宣告屬性名稱不可包含連字線，所以寫成textDecoration: "underline"，但也可以寫成"text-decoration": "underline"，效果相同。

    $(function() {
        $("span").css("color", "blue")
        .css("text-decoration", "underline")
        .css("cursor", "pointer");
        //可改為以下寫法，更為簡潔
        $("span").css({ color: "blue", textDecoration: "underline", cursor: "pointer" });
    });

在Visual jQuery中，當參數型別有提到是Key/Value Pairs的地方，都可以使用上述技巧。

此外，在函數宣告上，jQuery也大量使用匿名函數的寫法。例如: 當我們宣告事件或指定回應處理(Callback)時，若函數邏輯為專屬性質，無他處要共用，多半就直接寫成匿名函數，讓程式更簡短一些，同時也該相關邏輯更集中，較易閱讀。例如:

$("span").click(function() { alert("Clicked!"); });

最後，再補充一個技巧，有時我們會針對不同的條件呼叫不同的jQuery方法，例如條件成立時顯示、不成立時隱藏: if (a=="1") $("#boo").show(); else $("#boot").hide(); 。針對這種動態決定不同函數的需求，我們可以善用前述"透過名稱字串呼叫方法"的小技巧，改寫成$("#boo")[(a=="1")?"show":"hide"]();。是不是更簡潔呢? (註: jQuery從1.3版起，新增了toggle(true/false)可達到前述依條件決定show或hide的功能)

經由以上的討論，我們不難體會"力求簡潔"正是jQuery的核心精神所在，而陸續介紹的語法特性裡，還會有更多精彩的簡潔化實例。

【範例檔案下載】

jQueryDemo3.zip

歡迎推文分享: