下面是对于 jQuery Ready函数的完整攻略。

标题：jQuery 源码分析笔记(4) Ready函数

什么是 Ready函数？

Ready函数是 jQuery 中一个非常重要的函数。它用于在文档 ready 时执行指定的代码，即文档所表示的 HTML 文件已加载并解析完成时执行的代码。

Ready函数的语法和参数说明

$(document).ready(function(){ 
   // Code to execute when the document is ready
});

或者：

$(function(){
   // short form of document ready function
});

上面函数的参数是一个匿名函数，用于指定要执行的代码块。

Ready函数的执行过程分析

jQuery 程序通过实现一个名为 DOMContentLoaded 的事件来实现Ready函数的执行。如果 DOMContentLoaded 对象在当前浏览器中可用，则用它来触发处理程序。否则，使用其他处理方式来检测文档是否解析完成。

Ready函数示例说明

示例 1：使用 ready() 函数展示 div 元素

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>jQuery Ready函数示例</title>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>
   <body>
      <div id="myDiv">
         <h1>Hello, World!</h1>
      </div>
      <script>
         $(document).ready(function(){
           $("#myDiv").fadeIn();
         });
      </script>
   </body>
</html>

上面示例中，增加了一个 div 元素，使用 ready() 函数并绑定了一个匿名函数。这个函数使得 div 元素通过jQuery的fadeIn()方法进行显示。

示例 2：使用 document.write()实现相同的效果

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>jQuery Ready函数示例</title>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script>
         document.write("<style>#myDiv{display:none;}</style>");
      </script>
   </head>
   <body>
      <div id="myDiv">
         <h1>Hello, World!</h1>
      </div>
      <script>
         $(document).ready(function(){
           $("#myDiv").fadeIn();
         });
      </script>
   </body>
</html>

上面示例中，通过增加一个 style 标签，设置元素初始的显示为 none，使用 document.write() 方法。然后在一个jQuery的ready()函数里，用到了一般的fadeIn()函数。通过设置元素起始状态为不可见，该元素在调用jQuery的fadeIn()方法前，将不会被显示出来。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 源码分析笔记(4) Ready函数 - Python技术站

jQuery 源码分析笔记(4) Ready函数