[document ready 事件]



有些時候,我們必須在網頁下載完成之後立即執行一些程式,可能是想要把游標放在預設的輸入框,或是馬上顯示一些歡迎訊息等等。過去你可能用過 window.onload 來處理,或是直接在 標籤上加入 onload 的事件處理函數,但是 jQuery 提供了另一種選擇,請參考下面的範例:

 


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

  2.   alert('您好,歡迎來到 jsGears.com ~');   

  3. });  




先透過 $() 取得 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 並沒有辦法多次指定不同的函數來執行,最後指定的那個函數會複寫掉先前的,例如以下範例:

 


  1. window.onload = function() {   

  2.   alert('Hello world!');   

  3. };   

  4. window.onload = function() {   

  5.   alert('您好,歡迎來到 jsGears.com ~');   

  6. };  




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

 


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

  2.   alert('Hello world!');   

  3. });   

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

  5.   alert('您好,歡迎來到 jsGears.com ~');   

  6. });  




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

 


  1. $(function() {   

  2.   alert('您好,歡迎來到 jsGears.com ~');   

  3. });  




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





[$() 別名]



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

 


  1. jQuery(document).ready(function() {   

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

  3. });  




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

 


  1. jQuery.noConflict();   

  2. jQuery(document).ready(function() {   

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

  4. });  




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

 


  1. var $j = jQuery.noConflict();   

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

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

  4. });  




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

狼翔月影 發表在 痞客邦 PIXNET 留言(0) 人氣()