📌  相关文章
📜  jQuery | ready() 示例(1)

📅  最后修改于: 2023-12-03 14:43:15.672000             🧑  作者: Mango

jQuery | ready() 示例

在网页开发中，为了防止页面元素渲染不完整或者尚未加载就尝试操作元素导致出错，我们需要确保页面加载完成后再执行JS代码。而jQuery库提供了一个非常方便的方法——ready()。本文将介绍jQuery | ready() 的用法和示例。

jQuery | ready() 方法

jQuery库提供的ready()方法用于在DOM树加载完成后执行操作。当DOM树加载完成，即HTML页面的元素结构被解析为DOM树之后，就会触发ready()方法执行。

使用方法

在页面中引用jQuery库后，我们可以使用如下方法注册ready()方法：

$(document).ready(function(){
  //code here
});

也可以简写为：

$(function(){
  //code here
});
示例

下面是一个jQuery | ready() 的示例：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <h1 id="title">Hello World!</h1>
    <script>
      $(function(){
        $('#title').text('Hello jQuery!');
      });
    </script>
  </body>
</html>

在这个示例中，我们在DOM树加载完成后使用jQuery库选择h1元素，并将它的文本内容修改为'Hello jQuery!'。

注意事项
  • 如果在HTML页面中使用ready()方法，必须确保jQuery库已被加载。
  • 如果将JS代码放在标签中，必须放在body结束标签之后，否则可能会阻塞DOM树的渲染。
总结

jQuery的ready()方法是一个非常有用的工具，它可以让开发者在网页加载完成后执行必要的操作。在使用jQuery的过程中，我们应该熟练掌握该方法，并结合实际情况使用。