Question

当我第一次开始使用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库。

Answer 1

简单来说，

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

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

为了解决这个问题，我们将每个jQuery / javascript代码（使用DOM）放在html函数中，当可以访问所有$(document).ready元素时调用它。

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

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

document

修改

来自评论，

//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 () { });不会等待图片或脚本。这是$(document).ready和$(document).ready

之间的巨大差异

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

Answer 2

数目：

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

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

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

这取决于。附加处理程序需要相同的时间，这取决于您是否希望在页面加载时立即发生，或者您希望它等到加载整个文档。所以它将取决于你在页面上做的其他事情。

对象范围：加载AJAX的页面无法访问内部对象上一页的文件。准备好了吗？他们只能访问对象哪些是在document.ready之外（即真正的＆＃34;全球＆＃34;对象）？

它本质上是它自己的功能所以它只能访问在全局范围内声明的vars（在所有函数之外/之上）或window.myvarname = '';

Answer 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

Answer 4

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

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

以下是all jQuery Methods

的列表

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

Answer 5

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

Answer 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...);
}

Answer 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');
    });
});

Answer 8

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

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

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

提示：ready（）方法不应与。

一起使用

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

8 个答案: