知识问答

jQuery之$.ready使用介绍

发布时间：2026-05-09 23:47:57 浏览量：0

当网页加载完毕后，我们可能需要执行一些JavaScript代码来操作DOM元素或者进行其他操作。然而，有时候我们的JavaScript代码会因为DOM还没加载完毕而无法正确执行，这时就需要使用jQuery中的$(document).ready()来保证我们的代码在DOM完全加载后才执行。下面是$(document).ready()的详细介绍：

什么是$(document).ready()？

$(document).ready()是jQuery中一个非常重要的函数，它用来在页面DOM元素加载完成后执行JavaScript代码。当HTML文档完成解析，但是DOM元素还没完成解析时，$(document).ready()函数会被触发。

如何使用$(document).ready()？

$(document).ready()的使用非常简单，只需要将需要执行的代码包裹在$(document).ready()的回调函数中即可。示例代码如下：

$(document).ready(function(){  // 需要执行的代码});

$(document).ready()和window.onload的区别

window.onload事件是当整个页面及其相关资源（如图片、CSS等）全部加载并渲染完成后触发的。而$(document).ready()事件是当DOM树解析完成后（不等待图片等其他资源加载完成）触发的。所以，如果我们只需要等待DOM解析完成后再执行一些JavaScript代码，就可以使用$(document).ready()，否则需要使用window.onload。

$(document).ready()的示例

下面是两条使用$(document).ready()的示例：

示例1

在页面DOM元素加载完成后，隐藏ID为test的元素。示例代码如下：

<!DOCTYPE html><html><head>  <title>$(document).ready()示例</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <script>    $(document).ready(function(){      $("#test").hide();    });  </script></head><body>  <h1>Hello World</h1>  <p id="test">测试隐藏元素</p></body></html>

示例2

在页面DOM元素加载完成后，动态插入一个p元素。示例代码如下：

<!DOCTYPE html><html><head>  <title>$(document).ready()示例</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <script>    $(document).ready(function(){      $("body").append("<p>动态插入的元素</p>");    });  </script></head><body>  <h1>Hello World</h1></body></html>