共用方式為

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

  • 發行項

邊做邊學 jQuery 系列 3-jQuery 常用的 Javascript 技巧教學影片

> [!VIDEO https://www.microsoft.com/zh-tw/videoplayer/embed/589beaad-8d03-4df6-90ab-1f7bd278980d]

邊做邊學 jQuery 系列

更多邊做邊學影片...

要正式使用 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 的程式與範例。

以下介紹幾個補充重點:

1. 物件屬性操作
雖然嚴格來說，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");

2. 匿名函數 (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("匿名函數呼叫成功!");

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

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

4. 陣列表示法
傳統上，要建立一個陣列，我們會先 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 的核心精神所在，而陸續介紹的語法特性裡，還會有更多精彩的簡潔化實例。

【範例檔案下載】