文档就绪函数

介绍jQuery的文档就绪函数，包括$(document).ready()的用法和与window.onload的区别。

为什么需要文档就绪函数

jQuery 代码通常需要在文档完全加载后才能执行。如果在文档加载完成前执行代码，可能会导致操作失败。

$(document).ready() 基本语法

$(document).ready(function(){
  // jQuery 代码
});

简写形式

$(function(){
  // jQuery 代码
});

与 window.onload 的区别

特性	$(document).ready()	window.onload
执行时机	DOM 结构加载完成	所有资源（图片、CSS等）加载完成
执行次数	可多次执行	只能执行一次
执行速度	快	慢
覆盖性	不覆盖	后面的会覆盖前面的

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档就绪函数示例</title>
<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .demo-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 200px;
    border-radius: 8px;
    margin: 10px auto;
  }
  button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
  .log-box {
    padding: 15px;
    margin-top: 15px;
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
  }
  .log-item {
    padding: 5px 0;
    border-bottom: 1px solid #34495e;
  }
  .log-item:last-child {
    border-bottom: none;
  }
</style>
</head>
<body>

<div class="container">
  <h1>文档就绪函数</h1>

  <div class="demo-section">
    <h3>$(document).ready() 测试</h3>
    <div class="box" id="testBox">测试盒子</div>
    <button onclick="testReady()">测试 ready</button>
    <button onclick="testOnload()">测试 onload</button>
    <button onclick="clearLog()">清空日志</button>
    <div id="logBox" class="log-box"></div>
  </div>

  <div class="demo-section">
    <h3>语法示例</h3>
    <pre style="background-color: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 5px;">
// 完整写法
$(document).ready(function(){
  console.log("文档就绪");
});

// 简写形式
$(function(){
  console.log("文档就绪");
});</pre>
  </div>
</div>

<script>
function addLog(message) {
  var time = new Date().toLocaleTimeString();
  $("#logBox").prepend(`<div class="log-item">[${time}] ${message}</div>`);
}

function clearLog() {
  $("#logBox").empty();
}

$(document).ready(function(){
  addLog("$(document).ready() 执行");
});

$(function(){
  addLog("$(function(){}) 执行");
});

window.onload = function() {
  addLog("window.onload 执行");
};

function testReady() {
  $(document).ready(function(){
    addLog("测试 $(document).ready()");
    $("#testBox").fadeOut(500).fadeIn(500);
  });
}

function testOnload() {
  window.onload = function() {
    addLog("测试 window.onload");
    $("#testBox").slideUp(500).slideDown(500);
  };
}
</script>

</body>
</html>

最佳实践

始终使用文档就绪函数：确保 DOM 加载完成后再执行代码
使用简写形式：代码更简洁
避免在头部执行：将脚本放在 body 底部或使用文档就绪函数
多次使用没问题：可以多次调用 $(document).ready()

总结

$(document).ready() 是 jQuery 中最重要的函数之一，它确保代码在 DOM 加载完成后执行，比 window.onload 更快、更灵活。

上一章：jQuery 符号

下一章：链式调用