返回列表 發帖
歡迎引用,如有網路版的報告文件,歡迎在此分享給大家
To infinity and beyond!

TOP

引用

此篇內容可以借我引用當報告嗎? 謝謝

TOP

看完上述的基礎教學後,建議您前往:

1. 本站的範例區尋找實用的 jQuery Plugins,每個範例都附有 Demo 喔!
2. 本站關於 jQuery 的文章,希望您有所收穫。
3. 我推薦的 jQuery 中文教學連結
To infinity and beyond!

TOP

補充兩點

[document ready 事件]


有些時候,我們必須在網頁下載完成之後立即執行一些程式,可能是想要把游標放在預設的輸入框,或是馬上顯示一些歡迎訊息等等。過去你可能用過 window.onload 來處理,或是直接在 <body> 標籤上加入 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 一個蠻貼心的設計。
To infinity and beyond!

TOP

返回列表 回復 發帖