$(document).ready()

時間 2019-12-02

標籤 document ready 简体版

原文原文鏈接

document.ready和onload的區別——JavaScript文檔加載完成事件

頁面加載完成有兩種事件

一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）

二是onload，指示頁面包含圖片等文件在內的全部元素都加載完成。

用jQ的人不少人都是這麼開始寫腳本的：

$(function(){

// do something

});

其實這個就是jq ready()的簡寫，他等價於：

$(document).ready(function(){

//do something

})

//或者下面這個方法，jQuer的默認參數是：「document」；

$().ready(function(){

//do something

})

這個就是jq ready()的方法就是Dom Ready，他的做用或者意義就是:在DOM加載完成後就能夠能夠對DOM進行操做。

通常狀況先一個頁面響應加載的順序是：域名解析-加載html-加載js和css-加載圖片等其餘信息。

學習jQuery的第一件事是：若是你想要一個事件運行在你的頁面上，你必須在$(document).ready()裏調用這個事件。全部包括在$(document).ready()裏面的元素或事件都將會在DOM完成加載以後當即加載，而且在頁面內容加載以前。javascript

實例

在文檔加載後激活函數：css

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});

親自試一試html

定義和用法

當 DOM（文檔對象模型）已經加載，而且頁面（包括圖像）已經徹底呈現時，會發生 ready 事件。java

因爲該事件在文檔就緒後發生，所以把全部其餘的 jQuery 事件和函數置於該事件中是很是好的作法。正如上面的例子中那樣。jquery

ready() 函數規定當 ready 事件發生時執行的代碼。瀏覽器

ready() 函數僅能用於當前文檔，所以無需選擇器。ide

容許使用如下三種語法：函數

語法 1

$(document).ready(function)

語法 2

$().ready(function)

語法 3

$(function)

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. 學習

複製代碼代碼以下:

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

有不少方法能夠確保事件在頁面上正常工做，$(document).ready()比其它方法要更有優點。首先，你沒必要在HTML上放置任何「行爲性的」標記。另外，你能夠將JavaScript/jQuery寫入一個獨立的js文件，這樣既容易維護，又保證了js與頁面內容的隔離。若是你在瀏覽網頁時更加細心，你就會經常看見這種狀況：當你將鼠標懸停在一個鏈接時，有時狀態欄中會在顯示「javascript:void()」這樣的消息。這就是你把一個事件直接放在<a href>標籤裏所形成的。

在一些使用traditional JavaScript的頁面，你會在<body>標籤中看見「onload」屬性。這會致使一個問題：它限定了在body上只能有一個函數事件。是的，由於它又往內容中添加的「行爲性的」標籤。若是你想解決這個問題，請參考Jeremy Keith的書：DOM Scripting，裏面講述瞭如何在一個單獨的js文件裏建立一個「addLoadEvent」函數，它容許多個函數能夠在body裏被加載。可是這種方法須要爲原本很簡單的問題編寫至關數量的代碼，另外，這種方法是在加載window時觸發這些事件的，這不得不讓我再一次想起 $(document).ready()的好處。

使用 $(document).ready()，你能讓你的事件在window加載以前加載或觸發。全部你寫在這個方法裏面的都準備在最先的時刻加載或觸發。也就是說，一旦DOM在瀏覽器中註冊後，$(document).ready()裏的代碼就開始執行。這樣用戶在第一眼看見頁面元素時，特效就能夠運行了。 spa

相關標籤/搜索

document.ready

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。