博客

jQuery ready()方法

  • Post category:jquery

jQuery是一个JavaScript库，它能够简化JavaScript编程。而ready()方法是jQuery的一个基础方法，它是一个事件。当HTML文档载入并完成解析时，ready事件被触发，jQuery绑定到该事件上的函数将被执行。

语法

$(document).ready(function(){
  // 在文档载入完成后执行的方法
});

或者更简洁的写法

$(function() {
  // 在文档载入完成后执行的方法
});

实例1

在下面的HTML代码中，jQuery的ready()方法将在页面加载完毕后执行，它将改变页面的文本颜色。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>jQuery ready()方法</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("body").css("color", "green");
    });
  </script>
</head>
<body>
  <h1>jQuery ready()方法示例</h1>
  <p>点击查看效果</p>
</body>
</html>

实例2

在下面的HTML代码中，jQuery的ready()方法将在页面加载完毕后执行，它将在页面中添加一个新的段落。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>jQuery ready()方法</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("body").append("<p>这是一个新的段落。</p>");
    });
  </script>
</head>
<body>
  <h1>jQuery ready()方法示例</h1>
</body>
</html>

在这个例子中，用jQuery选择器选中了body元素，并使用了jQuery的append()方法添加了一个新的段落。

总结

ready()方法在页面加载完成后自动执行绑定的函数，它能够保证在操作DOM元素之前，元素已经被完全载入并解析完成。因此，该方法是jQuery编程的一个重要技巧。

Tags: