jQuery document.ready

我對jQuery中的document.ready有點困惑。jQuery document.ready

你什麼時候在 $（document）.ready（）裏面定義了javascript函數，什麼時候沒有？

只需將$（document）.ready（）中的所有javascript代碼放在裏面足夠安全嗎？

當你不這樣做時會發生什麼？

例如，我使用通常的jQuery選擇器，當你點擊東西時會做某些事情。如果你沒有用document.ready包裝這些有什麼危害？

如果有人在加載頁面之前在分割秒中單擊某個元素，是否會導致問題？還是會導致其他問題？

來源

2012-03-11 Dave31415

當DOM已被瀏覽器加載並準備好被操作時，會觸發document.ready處理程序。

是否應該使用它取決於您將自定義腳本放在哪裏。如果你把它們放在文檔的末尾，就在關閉</body>標籤之前，你不需要使用document.ready，因爲當你的腳本執行的時候，DOM已經被加載了，你將能夠操作它。

如果另一方面您將腳本放在文檔的<head>部分中，則應該使用document.ready確保DOM在嘗試修改它或將事件處理程序附加到各個元素之前已完全加載。如果你不這樣做，並且你試圖將一個事件處理函數附加到一個按鈕上，這個事件將永遠不會被觸發，因爲在腳本運行的那一刻，你用來查找按鈕的jQuery選擇器沒有返回任何元素，並且您沒有成功附加處理程序。

來源

2012-03-11 18:21:40

感謝。我想知道這是爲什麼我會出現一些奇怪的行爲。 – Dave31415 2012-03-11 18:38:09

如果您正在調用href屬性中的js函數，那麼在ready（）中添加事件處理函數並沒有什麼壞處。如果您使用jQuery添加它們，那麼您必須確保這些處理程序引用的對象已加載，並且此代碼必須在文檔被視爲就緒（）之後出現。這並不意味着他們必須在ready（）調用中，但是，您可以在自己內部調用ready（）函數中調用它們。

來源

2012-03-11 18:21:26

當您需要該代碼在執行前等待DOM加載時，您將代碼放入$(document).ready。如果代碼不需要首先加載DOM，則可以將其放在$（document）.ready之外。

順便說一句，$(function() { })是短手$ (document).ready();

$(function() { 
    //stuff here will wait for the DOM to load 
    $('#something').text('foo'); //should be okay 
}); 

//stuff here will execute immediately. 
/* this will likely break */ 
$('#something').text('weee!');

來源

2012-03-11 18:22:14

謝謝！從來不知道'$ function（）' – 2012-05-22 20:00:54

實際上，它比這更有趣。由於這個構造，你可以在技術上將任何函數引用傳遞給'$（）'，並且在文檔準備就緒時將它踢掉：'$（myfunction）'。由於少了一次關閉，因此可以節省記憶。 – 2012-05-22 20:17:12

話又說回來，你可以做到這一點有太多的其他方式：'$（文件）。就緒（myfunction的）'是一樣的'$（myfunction的）' – 2012-05-22 20:18:04

如果在文檔的末尾有你的腳本，你不需要的document.ready。

示例：有一個按鈕，單擊它時，您需要顯示警報。您可以將單擊事件綁定到document.ready中的按鈕。您可以在文檔的末尾編寫jquery腳本，或者將元素加載到標記中。

在document.ready事件中寫入所有內容會使您的頁面變得臃腫。

來源

2012-03-11 18:22:21 Asdfg

什麼時候在$（document）裏面定義javascript函數。準備好（），你什麼時候沒有？

如果職能應該是全球可訪問（這可能表明你的應用程序的設計不好），那麼你必須定義它們的ready處理程序之外。

僅僅是把$（document）.ready（）中的所有javascript代碼放在裏面足夠安全嗎？

見上文。

當你不這樣做時會發生什麼？

取決於您的JavaScript代碼在做什麼以及它的位置。最糟糕的情況是，您將會遇到運行時錯誤，因爲您正試圖在DOM元素存在之前訪問它們。如果您的代碼位於head中，並且您不僅定義函數，而且已嘗試訪問DOM元素，則會發生這種情況。

例如，我使用通常的jQuery選擇器，當您點擊東西時會執行某些操作。如果你沒有用document.ready包裝這些有什麼危害？

有沒有「傷害」本身。如果腳本位於head中，那麼它將不起作用，因爲DOM元素尚不存在。這意味着，jQuery無法找到並將處理程序綁定到它們。
但是，如果你在結束body標記之前放置腳本，那麼DOM元素將存在。

爲了安全起見，只要你想訪問DOM元素，將在ready事件處理到DOM被加載後才能被調用的函數這些調用。

由於jQuery tutorial（你應該看它）已經指出：

我們什麼時候使用jQuery讀取或操縱文檔對象模型（DOM）做

由於幾乎所有的東西，我們需要確保我們開始添加事件等，只要DOM準備就緒。

要做到這一點，我們註冊的文件ready事件。
$(document).ready(function() { 
    // do stuff when DOM is ready 
}); 

要提供一個更完整的例子：

<html> 
    <head> 
     <!-- Assuming jQuery is loaded --> 
     <script> 

      function foo() { 
       // OK - because it is inside a function which is called 
       // at some time after the DOM was loaded 
       alert($('#answer').html()); 
      } 

      $(function() { 
       // OK - because this is executed once the DOM is loaded 
       $('button').click(foo); 
      }); 

      // OK - no DOM access/manipulation 
      alert('Just a random alert ' + Math.random()); 

      // NOT OK - the element with ID `foo` does not exist yet 
      $('#answer').html('42'); 

     </script> 
    </head> 
    <body> 
     <div id="question">The answer to life, the universe and everything</div> 
     <div id="answer"></div> 
     <button>Show the answer</button> 

     <script> 
      // OK - the element with ID `foo` does exist 
      $('#answer').html('42'); 
     </script> 
    </body> 
</html>

來源

2012-03-11 18:25:06

有爲什麼函數foo（）被排除在外的document.ready其他任何理由比範圍？這僅僅是一種慣例，還是有一種像表演一樣的理由？當我使用全局作用域時，我使用「window.foo = function（）{};」樣式來使用顯式範圍定位。這不會推動JS執行，它會稍後聲明變量，從而允許瀏覽器在聲明函數之前繼續加載HTML，並因此呈現可見（可忽略的）更快的東西？ – Nenotlep 2013-02-26 08:47:56

@Nenotlep：我想說，在ready handler中移動函數的速度可能會更快，這正是你提到的原因。這就是爲什麼將所有腳本放在主體尾部也是很好的做法。但是如果性能影響可以忽略不計，那也歸結爲個人偏好。這個具體的例子只是爲了展示什麼*有*進入'ready'處理程序什麼不需要。 – 2013-02-26 10:40:21

jQuery document.ready

回答

相關問題