什么是文档准备好以及我应该如何使用它

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 代码。