108

当我第一次开始使用 Javascript/jQuery 时，我被告知要使用 document.ready，但我从来没有真正了解过为什么。

可能有人提供一些关于何时将 javascript/jquery 代码包装在 jQuery 中的基本指南document.ready？

我感兴趣的一些话题：

  1. jQuery 的.on()方法：我经常使用.on()AJAX 的方法（通常在动态创建的 DOM 元素上）。.on()点击处理程序应该总是在里面 document.ready吗？
  2. 性能：在 document.ready内部或外部保留各种 javascript/jQuery 对象是否更高效（另外，性能差异是否显着？）？
  3. 对象范围：AJAX 加载的页面无法访问前一页面文档中的对象。准备好，对吗？他们只能访问document.ready之外的对象（即真正的“全局”对象）？

更新：为了遵循最佳实践，我的所有 javascript（jQuery 库和我的应用程序代码）都位于我的 HTML 页面的底部，并且我defer在我的 AJAX 加载页面上使用包含 jQuery 的脚本上的属性，以便我可以访问这些页面上的 jQuery 库。

4

8 回答 8

146

简单来说，

$(document).ready是准备就绪时触发的事件document。

假设您已将 jQuery 代码放在head部分中并尝试访问一个dom元素（锚点、img 等），您将无法访问它，因为它html是从上到下解释的，并且当您的 jQuery 代码时您的 html 元素不存在运行。

为了克服这个问题，我们将每个 jQuery/javascript 代码（使用 DOM）放在$(document).ready函数中，当所有dom元素都可以访问时，该函数会被调用。

这就是原因，当您将 jQuery 代码放在底部（在所有 dom 元素之后，就在之前</body>）时，不需要$(document).ready

由于与我上面解释的相同原因，仅当您使用方法时才需要将on方法放入其中。$(document).readyondocument

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

编辑

从评论来看，

  1. $(document).ready不等待图像或脚本。$(document).ready这就是和之间的最大区别$(document).load

  2. 只有访问 DOM 的代码才应该在准备好的处理程序中。如果它是一个插件，它不应该出现在 ready 事件中。

于 2012-10-25T05:46:24.290 回答
7

答案：

jQuery 的 .on() 方法：我在 AJAX 中经常使用 .on() 方法（动态创建 DOM 元素）。.on() 点击处理程序是否应该始终在 document.ready 中？

不，并非总是如此。如果您将 JS 加载到文档头中，您将需要这样做。如果您在通过 AJAX 加载页面后创建元素，则需要这样做。如果脚本位于要添加处理程序的 html 元素下方，则无需这样做。

性能：在 document.ready 内部或外部保留各种 javascript/jQuery 对象是否更高效（另外，性能差异是否显着？）？

这取决于。附加处理程序将花费相同的时间，这取决于您是否希望它在页面加载时立即发生，或者您是否希望它等到整个文档加载完毕。因此，这将取决于您在页面上执行的其他操作。

对象范围：AJAX 加载的页面无法访问前一页面文档中的对象。准备好，对吗？他们只能访问 document.ready 之外的对象（即真正的“全局”对象）？

它本质上是它自己的函数，因此它只能访问在全局范围（在所有函数之外/在所有函数之上）声明的变量或使用window.myvarname = '';

于 2012-10-25T05:51:56.353 回答
6

在您可以安全地使用 jQuery 之前，您需要确保页面处于可以操作的状态。使用 jQuery，我们通过将代码放入一个函数中，然后将该函数传递给$(document).ready(). 我们传递的函数可以只是一个匿名函数。

$(document).ready(function() {  
    console.log('ready!');  
});

一旦文档准备好，这将运行我们传递给 .ready() 的函数。这里发生了什么？我们使用 $(document) 从我们页面的文档中创建一个 jQuery 对象，然后在该对象上调用 .ready() 函数，将我们想要执行的函数传递给它。

由于这是您会发现自己经常做的事情，因此如果您愿意，可以使用一种速记方法 - 如果您将函数传递给 $() 函数，它作为 $(document).ready() 的别名具有双重作用：

$(function() {  
    console.log('ready!');  
});

这是一个很好的阅读：Jquery Fundamentals

于 2012-10-25T06:03:02.990 回答
3

.ready() - 指定在 DOM 完全加载时执行的函数。

$(document).ready(function() {
  // Handler for .ready() called.
});

这是所有 jQuery 方法的列表

阅读介绍 $(document).ready()

于 2012-10-25T05:44:54.230 回答
3

实际上，document.ready除了准确地操作 DOM 之外不需要其他任何东西，而且它并不总是需要或最佳选择。我的意思是，例如，当您开发一个大型 jQuery 插件时，您几乎不会在整个代码中使用它，因为您试图保持它 DRY，因此您在操作 DOM 但要被调用的方法中尽可能地抽象稍后的。当所有代码都紧密集成时，唯一暴露的方法document.ready通常init是所有 DOM 魔法发生的地方。希望这能回答你的问题。

于 2012-10-25T05:47:18.310 回答
1

您应该在 document.ready 中绑定所有操作，因为您应该等到文档完全加载。

但是，您应该为所有操作创建函数并从 document.ready 中调用它们。当您创建函数（您的全局对象）时，请随时调用它们。因此，一旦加载了新数据并创建了新元素，请再次调用这些函数。

这些函数是您绑定事件和操作项的函数。

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}
于 2012-10-25T05:47:48.080 回答
0

我将一个链接附加到一个 div 并希望在点击时执行一些任务。我在 DOM 中的附加元素下方添加了代码，但它不起作用。这是代码：

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

它不起作用。然后我将 jQuery 代码放在 $(document).ready 中，它运行良好。这里是。

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});
于 2017-09-25T06:37:09.343 回答
-2

当 DOM（文档对象模型）被加载时，ready 事件发生。

因为这个事件是在文档准备好之后发生的，所以它是一个拥有所有其他 jQuery 事件和函数的好地方。就像上面的例子一样。

ready() 方法指定发生就绪事件时会发生什么。

提示：ready() 方法不应与 .

于 2015-01-19T08:35:22.910 回答