什麼是文件準備好以及我應該如何使用它

jQuery 程式碼通常包含在 jQuery(function($) { ... }); 中，因此它只在 DOM 載入完成後執行。

<script type="text/javascript"> 
  jQuery(function($) {
    // this will set the div's text to "Hello".
    $("#myDiv").text("Hello");
  });
</script>

<div id="myDiv">Text</div>

這很重要，因為 jQuery（通常是 JavaScript）無法選擇尚未呈現給頁面的 DOM 元素。

<script type="text/javascript">
  // no element with id="myDiv" exists at this point, so $("#myDiv") is an
  // empty selection, and this will have no effect
  $("#myDiv").text("Hello");
</script>

<div id="myDiv">Text</div>

請注意，你可以通過將自定義處理程式傳遞到 .ready() 方法來為 jQuery 名稱空間新增別名。這對於另一個 JS 庫使用與 jQuery 相同的縮短的 $ 別名的情況很有用，這會產生衝突。為了避免這種衝突，你必須呼叫 $.noConflict(); - 這迫使你只使用預設的 jQuery 名稱空間（而不是短的 $ 別名）。
通過將自定義處理程式傳遞給 .ready() 處理程式，你將能夠選擇別名以使用 jQuery 。

$.noConflict();

jQuery( document ).ready(function( $ ) {
   // Here we can use '$' as jQuery alias without it conflicting with other 
   // libraries that use the same namespace 
   $('body').append('<div>Hello</div>')
});

jQuery( document ).ready(function( jq ) {
   // Here we use a custom jQuery alias 'jq' 
   jq('body').append('<div>Hello</div>')
});

使用 $(document).ready 函式不是簡單地將 jQuery 程式碼放在頁面底部，而是確保已呈現所有 HTML 元素，並且整個文件物件模型（DOM）已準備好執行 JavaScript 程式碼。