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

javascript dom jquery event-handling document-ready

2022-08-30 05:43:04

当我第一次开始使用Javascript /jQuery时，我被告知要使用document.ready，但我从来没有真正了解为什么。

有人可以提供一些基本的指导方针，说明何时将javascript/jquery代码包装在jQuery的代码中是有意义的？document.ready

我感兴趣的一些主题：

jQuery的方法：我经常使用AJAX的方法（通常在动态创建的DOM元素上）。单击处理程序是否应始终位于内部？.on().on().on()document.ready
性能：在 document.ready 内部或外部保持各种 javascript/jQuery 对象的性能是否更高（另外，性能差异是否显著？）？
对象范围：AJAX 加载的页面无法访问前一页文档中的对象。ready，对吗？他们只能访问 document.ready 外部的对象（即真正的“全局”对象）？

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

答案 1

简单来说，

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

假设你已经把你的jQuery代码放在部分，并试图访问一个元素（锚点，img等），你将无法访问它，因为它是从上到下解释的，并且当你的jQuery代码运行时，你的html元素不存在。headdomhtml

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

这就是原因，当你把你的jQuery代码放在底部（毕竟是dom元素，就在之前），就不需要$（document）.ready。</body>

没有必要只在使用方法时才将方法放在里面，因为与我上面解释的相同原因。on$(document).readyondocument

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

答案 2

答案：

jQuery的.on（）方法：我对AJAX使用.on（）方法（动态创建DOM元素）。.on（）单击处理程序是否应始终位于 document.ready 内部？

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

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

这要视情况而定。附加处理程序将花费相同的时间，这只取决于您是否希望它在页面加载时立即发生，或者您是否希望它等待整个文档加载。因此，这将取决于您在页面上正在执行的其他操作。

对象范围：AJAX 加载的页面无法访问前一页文档中的对象。ready，对吗？他们只能访问 document.ready 外部的对象（即真正的“全局”对象）？

它本质上是它自己的函数，因此它只能访问在全局范围（外部/高于所有函数）或具有window.myvarname = '';