如果代碼位於底部，那么放置$（document）.ready函數有什么意義呢？

Question

這里對Jquery來說相當新......但是我被告知和正在做的一件事是在閱讀html之后在我的頁面底部添加我的Javascript。

現在，我看到人們添加了$（document）.ready（function（），即使代碼位於頁面底部。在讀取HTML時是不是逐步構建DOM？在閱讀HTML結束時，不應該自動准備DOM，因此，添加此檢查的重點是什么？

例如，小型演示：

<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
<script>
alert("In Page");
</script>

</div><!-- End demo -->

<script>
$(function() {
    alert("Dom is READY");
    $( "#sortable" ).sortable({
    revert: true
    });

    $( "#accordion" ).accordion();
});
</script>

“In Page”總是首先出現......是因為HTML不夠“大”嗎？

Answer 1

真相是document.ready和文檔底部幾乎是一回事，因為在文檔末尾所有控件都存在。 我個人仍然會更喜歡document.ready，因為它是JQuery框架識別文檔結束的方式（理想情況下我們應該堅持框架的推薦方式），其次它會照顧任何人錯誤地移動代碼。

Answer 2

當你以這種方式內聯編寫代碼時，假設你在頭部加載jQuery，可能沒有必要使用文檔onReady。

當您的頁面代碼通過文檔中的外部JavaScript資源（可能不在底部）加載時，它開始有所不同。 這樣做的原因主要是因為您的瀏覽器可以緩存代碼，從而減少網絡開銷。