什么时候应该使用jQuery的document.ready函数？ [英] When should I use jQuery's document.ready function?
问题描述
当我第一次开始使用Javascript / jQuery时，我被告知要使用document.ready，但我从来没有真正了解过为什么。
可能有人提供一些基本准则在jQuery的 document.ready 中包装javascript / jquery代码是有意义的？
我感兴趣的一些话题：
- jQuery的
.on（）方法：我使用AJAX的.on（）方法（通常是动态创建的DOM元素）。如果.on（）点击处理程序始终在内部document.ready？ - 性能：在内部之间保留各种javascript / jQuery对象更强大的文档document.ready还有，性能差异是否显着？）？
- 对象范围：加载AJAX的页面无法访问内部之前的页面的document.ready，正确？他们只能访问外部的文档document.ready（即真正的全局对象）？
更新：要遵循最佳做法，我所有的JavaScript（jQuery库和我的应用程序的代码）位于我的HTML页面的底部，我在我的AJAX加载的页面上的jQuery包含脚本上使用 defer 属性，以便我可以访问这些页面上的jQuery库。
简单来说，
$（document）.ready是一个事件，当文档是
准备好。
假设您已将jQuery代码放在 head 部分，并尝试访问 dom（/锚点，img等）元素，您将无法访问它，因为 html 从上到下解释，当您的jQuery代码运行时，您的html元素不存在。
为了克服这个问题，我们将每个jQuery / javascript代码（使用DO在$ code> $（document）.ready 中，当所有 dom 元素被访问时，该函数被调用。 p>
这是原因，当您将jQuery代码放在底部（所有dom元素之后，就在< / body> ），不需要 $（document）.ready
只有使用<$ c时，才需要在 $（document）.ready 中的方法上放置 $ c> $ 方法在文件，因为我上面解释了相同的原因。
//不需要放入$（document）.ready
$（document）.on（'click'，'a'，function（）{
}）
//如果放在< head>< / head>内，则需要放入$（document）.ready内。
$（'。container'）。on（'click'，'a'，function（）{
}）;
编辑
从评论中，
-
$（document）.ready不等待图像或脚本。这是$（document）.ready和$（document）.load -
只有访问DOM的代码应该处于就绪处理程序中。如果它是一个插件，它不应该在准备好的事件。
I was told to use document.ready when I first started to use Javascript/jQuery but I never really learned why.
Might someone provide some basic guidelines on when it makes sense to wrap javascript/jquery code inside jQuery's document.ready?
Some topics I'm interested in:
- 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 insidedocument.ready? - Performance: Is it more performant to keep various javascript/jQuery objects inside or outside document.ready (also, is the performance difference significant?)?
- 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)?
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.
In simple words,
$(document).readyis an event which fires up whendocumentis ready.
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.
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.
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
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 put inside $(document).ready
$(document).on('click','a',function () {
})
// Need to put inside $(document).ready if placed inside <head></head>
$('.container').on('click','a',function () {
});
EDIT
From comments,
$(document).readydoes not wait for images or scripts. Thats the big difference between$(document).readyand$(document).loadOnly code that accesses the DOM should be in ready handler. If it's a plugin, it shouldn't be in the ready event.
这篇关于什么时候应该使用jQuery的document.ready函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
