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

2022-01-15 00:00:00 event-handling jquery dom javascript document-ready

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

I was told to use document.ready when I first started to use Javascript/jQuery but I never really learned why.

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

Might someone provide some basic guidelines on when it makes sense to wrap javascript/jquery code inside jQuery's document.ready?

我感兴趣的一些话题:

  1. jQuery 的 .on() 方法:我在 AJAX 中使用了很多 .on() 方法(通常用于动态创建的 DOM 元素)..on() 点击处理程序always是否应该inside document.ready?
  2. 性能:将各种 javascript/jQuery 对象 inside 还是 outside document.ready 保持在性能更高(另外，性能差异是否显着?)?
  3. 对象范围:AJAX 加载的页面无法访问在前一个页面的文档中的对象.准备好了，对吗?他们只能访问 外部 document.ready 的对象(即真正的全局"对象)?
  1. jQuery's .on() method: I use the .on() method for AJAX quite a bit (typically on dynamically created DOM elements). Should the .on() click handlers always be inside document.ready?
  2. Performance: Is it more performant to keep various javascript/jQuery objects inside or outside document.ready (also, is the performance difference significant?)?
  3. Object scope: AJAX-loaded pages can't access objects that were inside the prior page's document.ready, correct? They can only access objects which were outside document.ready (i.e., truly "global" objects)?

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

Update: To follow a best practice, all my javascript (the jQuery library and my app's code) is at the bottom of my HTML page and I'm using the defer attribute on the jQuery-containing scripts on my AJAX-loaded pages so that I can access the jQuery library on these pages.

推荐答案

简单来说，

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

$(document).ready is an event which fires up when document is ready.

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

Suppose you have placed your jQuery code in head section and trying to access a dom element (an anchor, an img etc), you will not be able to access it because html is interpreted from top to bottom and your html elements are not present when your jQuery code runs.

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

To overcome this problem, we place every jQuery/javascript code (which uses DOM) inside $(document).ready function which gets called when all the dom elements can be accessed.

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

And this is the reason, when you place your jQuery code at the bottom (after all dom elements, just before </body>) , there is no need for $(document).ready

只有在 document 上使用 on 方法时，才需要在 $(document).ready 中放置 on 方法 原因和我上面解释的一样.

There is no need to place on method inside $(document).ready only when you use on method on document because of the same reason I explained above.

    //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

  1. $(document).ready does not wait for images or scripts. Thats the big difference between $(document).ready and $(document).load

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

Only code that accesses the DOM should be in ready handler. If it's a plugin, it shouldn't be in the ready event.

相关文章