javascript/jquery - $(document).ready()和脚本位置
#！关于$(document).ready()和脚本位置的问题，这是一个常见的JavaScript/jQuery开发中的关键概念。以下是完整的解答：
基础概念
$(document).ready()这是jQuery提供的函数，用于在DOM完全加载后（但不必等待图片等外部资源加载完成）执行代码。等效于原生JS的DOMContentLoaded事件。- 脚本位置
指
<script>标签在HTML文档中的放置位置（如<head>或<body>末尾），会影响脚本的执行时机和DOM访问能力。
对比与优势
| 特性 | $(document).ready() | 直接放置脚本（无ready） |
|---------------------|-----------------------------------------------|--------------------------------------|
| 执行时机 | DOM解析完成后立即执行 | 取决于脚本位置（可能阻塞渲染） |
| 资源依赖 | 不等待图片/样式表加载 | 无特殊控制 |
| 多次调用 | 可安全重复调用（按声明顺序执行） | 可能因DOM未就绪报错 |
| 兼容性 | 跨浏览器统一处理 | 需自行处理DOM加载事件 |
脚本位置的影响
<head>中放置脚本<head>中放置脚本- 优点：集中管理脚本依赖
- 缺点：可能阻塞页面渲染（除非用
async/defer）
<body>末尾放置脚本<body>末尾放置脚本- 优点：无需等待事件，DOM自然就绪
- 缺点：需确保依赖顺序
常见问题与解决方案
问题1：脚本报错"$ is not defined"
原因：jQuery库未加载或加载顺序错误 解决：
<!-- 正确顺序 -->
<script src="jquery.js"></script>
<script>
$(document).ready(...);
</script>问题2：事件绑定失效
原因：元素尚未加载时尝试绑定 解决：
// 方案1：使用ready()
$(document).ready(function() {
$("#button").click(...);
});
// 方案2：事件委托
$(document).on("click", "#button", ...);问题3：性能优化
建议：
- 合并多个
ready()回调 - 对动态内容使用事件委托
- 现代浏览器可用原生替代：
- 现代浏览器可用原生替代：
应用场景推荐
- 必须用
ready()的情况- 脚本必须放在
<head>中时 - 需要操作DOM但无法控制脚本位置
- 脚本必须放在
- 可省略
ready()的情况- 脚本放在
</body>前 - 使用模块化打包工具（如Webpack）
- 脚本放在
- 现代替代方案
- 现代替代方案
希望这些信息能帮助你全面理解两者的区别和使用场景！
相关·内容
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
