什么时候应该使用 jQuery 的 document.ready 函数？

Posted

技术标签:

【中文标题】什么时候应该使用 jQuery 的 document.ready 函数？【英文标题】：When should I use jQuery's document.ready function? 【发布时间】：2012-10-15 06:17:42 【问题描述】：

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

可能有人提供一些基本指南，说明何时将 javascript/jquery 代码包装在 jQuery 的 document.ready 中是有意义的？

我感兴趣的一些话题：

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

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

【问题讨论】：

因为如果DOM没有准备好，你可能会得到意想不到的结果，仅此而已。 2.- 我使用 outside 只是为了调试并且可以通过控制台调用一些 var/function， @RobertHarvey 什么样的“意外”结果？你能举个例子吗？ 您尝试修改尚未进入 DOM 的元素或属性。 【参考方案1】：

简单来说，

$(document).ready 是一个在document 被触发时触发的事件 准备好了。

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

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

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

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

    //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 () 
    );

编辑

来自 cmets，

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

    只有访问 DOM 的代码才应该在就绪处理程序中。如果它是一个插件，它不应该在 ready 事件中。

【讨论】：

@Dipaks 是的，为什么不呢？我们只是非常习惯使用$(document).ready。见this 只要在head 中加载jQuery 并且在元素被操作后是脚本，就不需要document.ready。图片是个特例…… @elclanrs 查看我更新的问题。在那之后，我在我的 HTML 页面的底部加载了 jQuery，并使用了我的应用程序特定的代码。 @Jashwant dom.ready 与 not 的性能差异如何？这些是否相关？ 我们不会将所有jQuery 代码放入就绪处理程序中。仅访问 DOM 的代码。如果是插件，则不应出现在ready 事件中【参考方案2】：

答案：

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

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

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

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

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

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

【讨论】：

【参考方案3】：

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

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

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

由于这是您会发现自己经常做的事情，如果您愿意，可以使用一种简写方法 - 如果您传递 $() 函数作为 $(document).ready() 的别名，它会起到双重作用一个函数：

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

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

【讨论】：

不要与 (function($) )(jQuery); 混淆，它包装了您的代码，以便 $ 是该闭包内的 jQuery【参考方案4】：

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

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

这里是all jQuery Methods的列表

继续阅读Introducing $(document).ready()

【讨论】：

【参考方案5】：

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

【讨论】：

【参考方案6】：

您应该在 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...);

【讨论】：

【参考方案7】：

我附加了一个指向 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');
    );
);

【讨论】：

【参考方案8】：

当 DOM（文档对象模型）已加载时，会发生就绪事件。

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

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

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

一起使用

【讨论】：

以上是关于什么时候应该使用 jQuery 的 document.ready 函数？的主要内容，如果未能解决你的问题，请参考以下文章

Vuejs - 啥时候应该初始化 jquery 插件

jQuery UI - 我啥时候应该在小部件上使用 destroy 方法

什么时候 AngularJS 会超越 jQuery

在 jQuery 中，如何添加小数位数的值？

jQuery .attr("checked")得undefined 问题解决

Developer Test-Jquery-阻止冒泡