茫茫網海中的冷日 - 對這文章發表回應
茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1523727 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_60D_00344.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

對這文章發表回應

發表限制: 非會員 可以發表

發表者: 冷日 發表時間: 2009/7/8 9:11:14
補充兩點

[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 一個蠻貼心的設計。

原文出處:jQuery 教學 - 基礎篇
內容圖示
url email imgsrc image code quote
樣本
bold italic underline linethrough   












 [詳情...]
validation picture

注意事項:
預覽不需輸入認證碼,僅真正發送文章時才會檢查驗證碼。
認證碼有效期10分鐘,若輸入資料超過10分鐘,請您備份內容後,重新整理本頁並貼回您的內容,再輸入驗證碼送出。

選項

Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|