快捷導(dǎo)航

jQuery之$(document).ready()使用介紹

更新時(shí)間：2012年04月05日 23:03:37 作者：

學(xué)習(xí)jQuery的第一件事是：如果你想要一個(gè)事件運(yùn)行在你的頁(yè)面上，你必須在$(document).ready()里調(diào)用這個(gè)事件

學(xué)習(xí)jQuery的第一件事是：如果你想要一個(gè)事件運(yùn)行在你的頁(yè)面上，你必須在$(document).ready()里調(diào)用這個(gè)事件。所有包括在$(document).ready()里面的元素或事件都將會(huì)在DOM完成加載之后立即加載，并且在頁(yè)面內(nèi)容加載之前。
If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
// put all your jQuery goodness in here. 
}); 

有很多方法可以確保事件在頁(yè)面上正常工作，$(document).ready()比其它方法要更有優(yōu)勢(shì)。首先，你不必在HTML上放置任何“ 行為性的”標(biāo)記。另外，你可以將JavaScript/jQuery寫(xiě)入一個(gè)獨(dú)立的js文件，這樣既容易維護(hù)，又保證了js與頁(yè)面內(nèi)容的隔離。如果你在瀏覽網(wǎng)頁(yè)時(shí)更加細(xì)心，你就會(huì)常?？匆?jiàn)這種情況：當(dāng)你將鼠標(biāo)懸停在一個(gè)連接時(shí)，有時(shí)狀態(tài)欄中會(huì)在顯示“javascript:void()”這樣的消息。這就是你把一個(gè)事件直接放在<a href>標(biāo)簽里所造成的。

在一些使用traditional JavaScript的頁(yè)面，你會(huì)在<body>標(biāo)簽中看見(jiàn)“onload”屬性。這會(huì)導(dǎo)致一個(gè)問(wèn)題：它限定了在body上只能有一個(gè)函數(shù)事件。是的，因?yàn)樗滞鶅?nèi)容中添加的“行為性的”標(biāo)簽。如果你想解決這個(gè)問(wèn)題，請(qǐng)參考Jeremy Keith的書(shū)：DOM Scripting，里面講述了如何在一個(gè)單獨(dú)的js文件里創(chuàng)建一個(gè) “addLoadEvent” 函數(shù)，它允許多個(gè)函數(shù)可以在body里被加載。但是這種方法需要為本來(lái)很簡(jiǎn)單的問(wèn)題編寫(xiě)相當(dāng)數(shù)量的代碼，另外，這種方法是在加載window時(shí)觸發(fā)這些事件的，這不得不讓我再一次想起 $(document).ready()的好處。

使用 $(document).ready()，你能讓你的事件在window加載之前加載或觸發(fā)。所有你寫(xiě)在這個(gè)方法里面的都準(zhǔn)備在最早的時(shí)刻加載或觸發(fā)。也就是說(shuō)，一旦DOM在瀏覽器中注冊(cè)后，$(document).ready()里的代碼就開(kāi)始執(zhí)行。這樣用戶在第一眼看見(jiàn)頁(yè)面元素時(shí)，特效就可以運(yùn)行了。

您可能感興趣的文章: