狼翔天地

[document ready 事件]

有些時候，我們必須在網頁下載完成之後立即執行一些程式，可能是想要把游標放在預設的輸入框，或是馬上顯示一些歡迎訊息等等。過去你可能用過 window.onload 來處理，或是直接在

標籤上加入 onload 的事件處理函數，但是 jQuery 提供了另一種選擇，請參考下面的範例：

$(document).ready(function() {

  alert('您好，歡迎來到 jsGears.com ～');

});

先透過 $() 取得 document 物件，接著使用 ready() 帶入一個函數，就可以在網頁下載完成後立即執行。jQuery 的 document ready 事件是模擬 W3C DOM 標準的 DOMContentLoaded 事件，DOMContentLoaded 和 window.onlad 的差異在於前者是在 DOM 文件下載完成後觸發，而後者是文件和所有文件內的元件，包含圖檔等等全部下載完成後才會觸發，因此通常 window.onload 的發生時間要比 DOMContentLoaded 晚一點(如果你的網頁內確實有用到一些圖檔)，有時候你所需要執行的程式並不需要等所有圖檔都下載完成，因此，放到 DOMContentLoaded 事件內處理是比較合適的。但是，IE 目前的版本 6 和 7 並不支援 DOMContentLoaded 事件，所以 jQuery 用了一些技巧來達到模擬 DOMContentLoaded 的事件，而成果就是上面看到的這個例子的用法。



DOMContentLoaded 和 window.onlad 的另一個差異在於 window.onload 並沒有辦法多次指定不同的函數來執行，最後指定的那個函數會複寫掉先前的，例如以下範例：

window.onload = function() {

  alert('Hello world!');

};

window.onload = function() {

  alert('您好，歡迎來到 jsGears.com ～');

};

上面的例子在同一個頁面上用了兩次 window.onload，結果將會是後面的函數會被執行到，前面的函數將消失無影蹤，當然，只要你稍具 javascript 處理 Event 的技巧，真要連續指定兩個函數來執行也不是太困難，不過用 jQuery 會更容易，看看以下相同的範例：

$(document).ready(function() {

  alert('Hello world!');

});

$(document).ready(function() {

  alert('您好，歡迎來到 jsGears.com ～');

});

相同的例子使用 jQuery 的 document ready 函數，則帶入的兩個函數都會被執行到，很簡單吧，完全不需用到什麼技巧。再提供一個精簡的語法， document ready 函數也可以這樣用：

$(function() {

  alert('您好，歡迎來到 jsGears.com ～');

});

直接把函數放到 $() 裡面就可以了，是不是超精簡啊。





[$() 別名]



前面用到了很多 $()，包含剛介紹的 document ready 及先前的選取功能，都是透過這個簡短的錢記號來達成，其實這個錢記號是 「jQuery」這個物件的縮寫，也就是剛剛所有你看到用 $() 的地方，都可以改寫成用 jQuery()，例如：

jQuery(document).ready(function() {

  jQuery("div").addClass("special");

});

沒事應該不會有人想用比較長的名稱來寫程式，簡短的 $ 不是挺好的。但是，某些情況可能你無法使用 $()，例如你進行中的專案已經使用了其他的 javascript Library，而 $ 這個名稱已經被使用了，例如另一套知名的 prototype，也使用了 $() 這樣的函數名稱，這時如果你需要再搭配使用 jQuery 的話，jQuery 本身有提供一個方式來避免 $() 的衝突：

jQuery.noConflict();

jQuery(document).ready(function() {

  jQuery("div").addClass("special");

});

使用 jQuery 前，先下達 jQuery.noConflict() 這樣就可以避免掉 $() 衝突的問題，接著再用 jQuery 物件來進行操作即可。此外，你也可以自行幫 jQuery 這個物件設定另一個別名，例如：

var $j = jQuery.noConflict();

$j(document).ready(function() {

  $j("div").addClass("special");

});

使用一個變數來接 jQuery.noConflict() 的回傳值，這個變數就可以做為 jQuery 的一個別名，透過這個別名不但避免了和其他 Library 錢記號的衝突，也可以將函數名稱縮短，算是 jQuery 一個蠻貼心的設計。