jQuery 的 $(document).ready() 方法用于在 DOM 完全加载后执行代码。由于它在所有 DOM 元素都可用时执行给定的函数，因此可以确保尝试访问或操作元素能够正常工作。
在 jQuery 3.0 之前，使用匿名函数的典型用法如下：
$(document).ready(function() {
// .ready() 的处理程序被调用。
});document.ready 方法确保代码仅在所有 DOM 元素安全可操作时才执行，但在 jQuery 3.0 中已发生重大更改，所有语法方法（除了 $(handler);）都已弃用。DOMContentLoaded 事件是 jQuery ready 方法的纯 JavaScript 替代方案，可用于现代浏览器和 IE9 。对于旧版本的 IE，可以使用 onreadystatechange 事件。</body> 之前，就能确保 DOM 已完成加载。ready() 的更改在 3.0 版本发布之前，您可以通过几种方式调用 ready 方法：
$(document).ready(handler);$().ready(handler);$(handler);以上所有变体在功能上都是等效的。无论在哪个元素上调用，只要 DOM 完全加载，指定的处理程序都会被调用。换句话说，在图像元素 $("img") 上调用它与在文档元素上调用它并没有区别，回调函数的触发时间与指定元素的加载无关。相反，它将在整个 DOM 完全加载后被调用。
在 jQuery 3.0 中，除了 $(handler); 之外的所有其他语法方法都已弃用。官方的理由是：
这是因为选择与
.ready()方法的行为无关，这效率低下，并可能导致对该方法行为的错误假设。
ready 事件和 load 事件之间的区别ready 事件在 DOM 完全加载并可以安全访问元素时触发。另一方面，load 事件在 DOM 和所有资源加载完毕后触发。
load 事件可以使用如下方式：
$(window).on("load", function(){
// 所有资源（包括图像）加载完毕时的处理程序
});这不仅等待 DOM 准备好进行交互，还等待图像完全加载（这可能需要一些时间，具体取决于图像大小）。
对于普通的 DOM 操作，您可能不需要 load 事件，但如果您想在所有资源加载完毕之前显示加载微调器，或者如果您想使用图像大小进行一些计算，它可能是正确的选择。
ready 方法确保代码仅在所有 DOM 元素安全可操作时才执行。但这意味着什么？当您在 HTML 文档的 <body> 部分执行 JavaScript 代码时，这将确保代码在浏览器也加载所有后续元素（例如 <code><p> 元素）后执行：
$(document).ready(function() {
// .ready() 的处理程序被调用。
});如果您将 JavaScript 代码作为 <body> 中的最后一件事执行，您可能不需要将其包装在 ready() 中，因为您可能尝试操作或访问的所有元素都已加载：
$(window).on("load", function(){
// 所有资源（包括图像）加载完毕时的处理程序
});ready() 替代方案对于现代浏览器和 IE9 ，您可以监听 DOMContentLoaded 事件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>.ready() 教程</title> <🎜> </head> <body> <🎜> <p>我是这个网站的内容</p> </body> </html>
但是，请注意，如果事件已经触发，则不会执行回调函数。为了确保始终运行回调函数，jQuery 会检查文档的 readyState（引用），如果它已经完成，则立即执行回调函数：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>.ready() 教程</title> </head> <body> <p>我是这个网站的内容</p> <🎜> <🎜> </body> </html>
您还可以包含 domReady 库，该库已经实现了此解决方案。
对于小于或等于 8 的 IE 版本，您可以使用 onreadystatechange 事件来检测文档的 readyState：
document.addEventListener("DOMContentLoaded", function(){
// DOM 完全加载时的处理程序
});或者，您可以像 jQuery 一样使用 load 事件，因为这将在任何浏览器中都能工作。这也导致时间延迟，因为它将等待所有资源加载完毕。请注意，您还必须像上面解释的那样检查 readyState，以确保即使事件已经触发，回调函数仍然会被执行。
如果您正在寻找 ready 方法的纯 JavaScript 替代方案，您可以使用 DOMContentLoaded 事件。如果您的系统需求包括 IE，那么您可能需要使用 onreadystatechange 事件或 load 事件。
如果您在项目中使用 jQuery，您可以安全地继续使用 jQuery 的 document.ready 函数，但请记住避免像前面提到的那样在元素上使用（已弃用）的 ready() 方法（例如 $(document).ready()）。
最后，不要忘记在许多情况下您可能不需要任何这些解决方案——只需将您的 JavaScript 代码移动到结束标签
以上是用JavaScript替换jQuery文档就绪功能的详细内容。更多信息请关注PHP中文网其他相关文章！
