公告

Collapse
No announcement yet.

jQuery 教學 - 基礎篇4

Collapse
X
Collapse
Who has read this thread:
 
  • Filter
  • Time
  • Show
全部清除
新帖子

  • jQuery 教學 - 基礎篇4

    [document ready 事件]
    有些時候,我們必須在網頁下載完成之後立即執行一些程式,可能是想要把游標放在預設的輸入框,或是馬上顯示 一些歡迎訊息等等。過去你可能用過 window.onload 來處理,或是直接在 <body> 標籤上加入 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 一個蠻貼心的設計。
    有一種漂亮是為自己堅強
Working...
X