document.ready与window.onload执行时机差异解析
本文详细解析了jQuery中document.ready与原生JavaScript中window.onload的执行时机差异。document.ready在DOM树构建完成后即触发，不等待图片等外部资源，执行效率更高；而window.onload需等待所有资源加载完毕。文章还探讨了两者混用时的注意事项及多次注册ready事件的执行顺序。
DOM加载与执行时机基础
JavaScript 必须在 DOM 元素定义完成后才能对其执行操作，该问题在“javascript执行顺序”https://www.jb51.net/article/44577.htm 一文中有详细介绍。
jQuery通过document.ready机制确保代码在DOM元素加载完成后执行。例如在基础教程中使用的jQuery代码如下：
代码如下:
<!-- $(document).ready(function ()
{
alert("我的第一个jQuery代码!");
});
// -->该代码的作用是：当DOM树加载完毕后，弹出警告信息。
document.ready与onload的区别
document.ready()与传统<body onload="load()">方法类似，但关键区别在于：onload事件需等待页面所有元素（包括图片等外部资源）加载完成后才触发，
因此，document.ready()的执行速度通常快于onload()。
使用注意事项与多次注册
最后需注意两点（源自jQuery官方文档）：
1. 确保<body>元素的onload事件中没有注册函数，否则可能导致$(document).ready()事件无法触发。（作者尝试通过示例演示此情况但未成功，故认为该情形仅可能发生。）
代码如下:
<html>
<head>
<title>My second jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript">
<!-- //下面是load的函数含有jquery注册函数$
function load(){ $("p").append("<b>Hello</b>"); }
//下面是jQuery的代码
$(document).ready(function ()
{ $("p").append("我的第一个jQuery代码!"
);
$("p").append("<b>Hello</b>"); }); // -->
</mce:script>
</head>
<body onload="load()">
<h2>jQuery 简单例子2</h2>
<p>I would like to say: </p>
</body>
</html>2. 同一页面中可无限次使用$(document).ready()事件，其中注册的函数将严格按照代码中的先后顺序依次执行。
JS转整数出现NaN怎么办？常见异常处理方案
2026-11-05 16:27:31
推荐几款免安装的在线JS压缩工具
2026-11-05 14:54:53
JS怎么使用JSON.stringify实现JSON格式化与缩进
2026-11-04 10:47:30
CodePen、JSFiddle 与 StackBlitz：主流 JS 在线编辑器对比
2026-11-03 21:07:49
JS字符串转数字后怎么正确判断是否为有效数值
2026-11-03 20:04:15