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

IT技术 javascript jquery dom event-handling document-ready
2021-01-10 14:25:54

当我第一次开始使用 Javascript/jQuery 时，有人告诉我使用 document.ready，但我从来没有真正了解原因。

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

我感兴趣的一些主题：

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

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

6个回答

简单来说，

$(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 的代码才应该在就绪处理程序中。如果它是一个插件，它不应该在就绪事件中。

我们不会将所有jQuery代码都放在就绪处理程序中。只有访问 DOM 的代码。如果是插件，则不应出现在ready 事件中
2021-03-13 14:25:54
@elclanrs 查看我更新的问题。在那之后，我正在我的 HTML 页面底部加载 jQuery，其中包含我的应用程序特定代码。
2021-03-20 14:25:54
@Jashwant dom.ready 与 not 的性能差异如何？那些相关吗？
2021-03-23 14:25:54
只要您head在元素被操作之后加载 jQuery并且您是脚本，document.ready就不需要。图像是一个特例，虽然...
2021-03-29 14:25:54
@Dipaks 是的，为什么不呢？我们只是非常习惯使用$(document).ready. 看到这个
2021-04-10 14:25:54

答案：

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

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

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

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

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

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

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

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

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

因为这是你会发现自己经常做的事情，如果你愿意的话，有一个速记方法 - 如果你传递一个函数， $() 函数作为 $(document).ready() 的别名执行双重任务：

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

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

不要与(function($){ })(jQuery);which 包装您的代码混淆，以便 $ 是该闭包内的 jQuery
2021-03-18 14:25:54

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

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

这是所有 jQuery 方法的列表

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

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

其它你可能感兴趣的问题
上一篇"(function ( ) { } ) ( )" 和 "(function ( ) { } ( ) )" 在 JavaScript 中功能相同吗？ 下一篇在 DOM 环境中什么时候会发生回流？