何时使用jQuery的document.ready函数？
当我第一次开始使用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库和应用程序代码)都位于页面的底部，我在加载AJAX的页面上使用包含jQuery的脚本的defer属性，以便在这些页面上访问jQuery库。
回答 8
Stack Overflow用户
发布于 2012-10-25 05:46:24
简单来说，
$(document).ready是一个在document准备就绪时触发的事件。
假设您已经将jQuery代码放置在head部分并试图访问dom元素(锚、img等)，您将无法访问它，因为html是从上到下解释的，并且在运行jQuery代码时不存在html元素。
为了克服这个问题，我们将jQuery/javascript代码(使用DOM)放置在$(document).ready函数中，当可以访问所有dom元素时，该函数将被调用。
这就是为什么，当您将$(document).ready代码放在底部(毕竟是dom元素，就在</body>之前)时，就不需要了
仅当您在on上使用on方法时，才需要在document中放置on方法，原因与我前面解释的原因相同。
//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 () {
});编辑
从评论来看，
$(document).ready不等待图像或脚本。这就是$(document).ready和$(document).load之间的巨大区别- 只有访问DOM的代码才应该处于就绪处理程序中。如果它是一个插件，它不应该在就绪事件。
Stack Overflow用户
发布于 2012-10-25 05:51:56
答案：
jQuery的.on()方法:我对AJAX使用了相当多的.on()方法(动态创建DOM元素)。.on()单击处理程序应该始终在document.ready中吗？
不，不总是这样。如果将JS加载到文档头中，则需要加载JS。如果要在页面通过AJAX加载之后创建元素，则需要这样做。如果脚本位于html元素下面，则不需要添加处理程序。
性能:在document.ready内部或外部保留各种javascript/jQuery对象是更好的性能吗(另外，性能差异很大吗？)
那得看情况。附加处理程序将花费同样的时间，这仅仅取决于您是否希望在页面加载时立即发生这种情况，或者希望它等待直到加载整个文档。因此，这将取决于您在页面上做的其他事情。
对象范围:AJAX加载的页面无法访问上一页的document.ready中的对象，对吗？它们只能访问document.ready之外的对象(即真正的“全局”对象)？
它本质上是它自己的函数，因此它只能访问在全局范围(外部/最重要的函数)或使用window.myvarname = '';声明的vars。
Stack Overflow用户
发布于 2012-10-25 06:03:02
在安全使用jQuery之前，您需要确保页面处于可操作的就绪状态。使用jQuery，我们通过将代码放入函数中，然后将该函数传递给$(document).ready()来实现这一点。我们传递的函数可以只是一个匿名函数。
$(document).ready(function() {
console.log('ready!');
});一旦文档准备就绪，这将运行我们传递给.ready()的函数。这里发生了什么事？我们使用$( document )从页面的文档创建一个jQuery对象，然后调用该对象上的.ready()函数，将我们要执行的函数传递给它。
由于您会发现自己做了很多事情，所以如果您愿意的话，有一个简化的方法--如果您传递一个函数，$()函数作为$(document).ready()的别名执行双重任务：
$(function() {
console.log('ready!');
}); 这是一个很好的阅读：Jquery基本面
https://stackoverflow.com/questions/13062246
复制相似问题
腾讯云开发者
