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

一尘不染

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

javascript

刚开始使用Javascript / jQuery时，我被告知要使用document.ready，但我从未真正了解原因。

有人可能会提供一些基本准则，说明何时在jQuery的内部包装javascript / jquery代码document.ready吗？

我感兴趣的一些主题：

jQuery的.on()方法：我.on()对AJAX 使用了很多方法（通常在动态创建的DOM元素上使用）。.on()单击处理程序是否应该始终在内部 document.ready？
性能：将各种javascript / jQuery对象保留在 document.ready 内部或外部是否更具性能（性能差异是否显着？）？
对象范围：AJAX加载页面不能说是访问对象中的前一页的的document.ready，正确吗？他们只能访问document.ready 之外的 对象（即真正的“全局”对象）吗？

更新： 为了遵循最佳实践，我所有的JavaScript（jQuery库和应用程序的代码）都位于HTML页面的底部
，并且我在defer加载AJAX的页面上使用jQuery脚本中的属性，以便可以访问这些页面上的jQuery库。

阅读 531

2020-04-25

共1个答案

一尘不染

简单来说

$(document).ready是document准备就绪时触发的事件。

假设您已将jQuery代码放在head一节中并尝试访问dom元素（锚点，img等），则将无法访问它，因为它html是从上到下解释的，并且当jQuery代码时不存在html元素运行。

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

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

出于与我上面解释的相同原因，仅在使用method 时才需要将onmethod放入内部。$(document).ready``on``document

    //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的代码才应位于就绪处理程序中。如果是插件，则不应处于ready事件中。

2020-04-25