什么时候应该使用jQuery的document.ready函数？
当我第一次开始使用Javascript / jQuery的时候，我被告知要使用document.ready，但我从来没有真正明白为什么。
可能有人提供了一些基本的指导，什么时候在jQuery的document.ready包装javascript / jquery代码是有道理的？
我感兴趣的一些话题：
- jQuery的
.on()方法：我对AJAX使用.on()方法相当多（通常在dynamic创build的DOM元素上）。.on()点击处理程序是否总是 在document.ready？ - 性能： 在 document.ready 内部或外部保存各种javascript / jQuery对象是否更高效（性能差异是否显着？）？
- 对象范围：AJAX加载的页面无法访问上一页的文档内部的对象。是否正确？ 他们只能访问document.ready 之外的对象（即真正的“全局”对象）？
更新：为了遵循最佳实践，我的所有javascript（jQuery库和我的应用程序的代码）位于我的HTML页面的底部 ，并且在装载了AJAX的页面上的包含jQuery的脚本上使用了defer属性，以便我可以访问这些页面上的jQuery库。
简而言之，
$(document).ready是document准备就绪时触发的事件。
假设你已经把你的jQuery代码放在head部分，试图访问一个dom元素（一个锚，一个img等），你将无法访问它，因为html是从上到下的解释，而你的html元素不存在你的jQuery代码运行。
为了克服这个问题，我们把每个jQuery / javascript代码（使用DOM）放在$(document).ready函数中，当所有的dom元素都可以被访问的时候被调用。
这就是为什么当你把jQuery代码放在底部时（在</body>之前的所有dom元素之后）， 不需要$(document).ready
只有当你在document on方法上使用时，没有必要在$(document).ready里面on方法，因为我上面解释的原因相同。
//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和$(document).load之间的巨大差异 -
只有访问DOM的代码应该在ready handler中。 如果它是一个插件，它不应该在准备好的事件。
回答：
jQuery的.on（）方法：我对AJAX使用.on（）方法相当多（dynamic创buildDOM元素）。 .on（）点击处理程序是否总是在document.ready中？
不，不总是。 如果你加载你的JS文档头，你将需要。 如果在通过AJAX加载页面之后创build元素，则需要。 如果脚本位于html元素下方，则不需要添加处理程序。
性能：在document.ready内部或外部保存各种javascript / jQuery对象是否更高效（性能差异是否显着？）？
这取决于。 附加处理程序需要花费相同的时间，这取决于您希望在页面加载时立即发生，还是希望等待整个文档加载。 所以这将取决于你在页面上做了什么其他的事情。
对象范围：AJAX加载的页面无法访问上一页的文档内部的对象。是否正确？ 他们只能访问document.ready之外的对象（即真正的“全局”对象）？
它本质上是它自己的函数，所以它只能访问在全局作用域（外部/高于所有函数）或window.myvarname = '';声明的variableswindow.myvarname = '';
在您可以安全地使用jQuery之前，您需要确保页面处于可以被操作的状态。 使用jQuery，我们通过将代码放入一个函数中，然后将该函数传递给$(document).ready() 。 我们传递的函数可以是一个匿名函数 。
$(document).ready(function() { console.log('ready!'); });
这将运行我们传递给.ready（）的函数，一旦文档准备就绪。 这里发生了什么？ 我们使用$（document）从页面文档创build一个jQuery对象，然后调用该对象上的.ready（）函数，并将它传递给我们要执行的函数。
由于这是你会发现自己做了很多事情，如果你愿意的话，有一个简写方法 – 如果你传递一个函数$（）函数作为$（document）.ready（）的别名，$（）
$(function() { console.log('ready!'); });
这是一个很好的阅读： jquery基础
.ready（） – 指定一个函数在DOM完全加载时执行。
$(document).ready(function() { // Handler for .ready() called. });
这里是所有jQuery方法的列表
阅读介绍$（document）.ready（）
实际上， document.ready对于其他任何操作DOM都不是必须的，而且并不总是需要或最好的select。 我的意思是说，当你开发一个大型的jQuery插件时，你很less在整个代码中使用它，因为你试图保持它干，所以你尽可能抽象的方法来操纵DOM，但是打算被调用稍后的。 当所有代码紧密集成时， document.ready暴露的唯一方法通常是所有DOM魔术发生的init 。 希望这回答你的问题。
您应该绑定document.ready中的所有操作，因为您应该等待文档完全加载。
但是，您应该为所有操作创build函数，并从document.ready中调用它们。 当你创build函数（你的全局对象）时，可以随时调用它们。 所以一旦你的新数据加载并创build了新的元素，再次调用这些函数。
这些function是您绑定事件和操作项目的function。
$(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...); }
我附加了一个链接到一个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'); }); });
当DOM（文档对象模型）已经被加载时，他准备好的事件发生。
因为这个事件是在文档准备好之后发生的，所以它是一个拥有所有其他jQuery事件和函数的好地方。 就像上面的例子一样。
ready（）方法指定发生就绪事件时发生的情况。
提示：ready（）方法不应该和。
