jQuery ready()用法及代码示例

在本文中，我们将了解如何使用ready()提供的函数 jQuery 库.这ready()函数用于仅在 HTML DOM 完全加载时执行一些 javascript 代码。在 DOM 完全加载之前，我们不应该对其进行操作。ready()方法可以非常方便地检测 DOM 何时加载成功。

用法:

$(selector).ready(handler)

这里‘handler’是一个JavaScript函数，一旦DOM准备好就会执行。括号内的选择器并不重要。例如，下面的三种语法含义相同。

例子：在下面的示例中，我们借助 ready() 函数将 h1 的文本更改为“DOM 现在已准备好”，该函数在 DOM 完全加载时触发。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1></h1> 
    <script> 
        $.holdReady(true); 
        setTimeout(() => { 
            $.holdReady(false); 
        }, 2000); 
        function onDOMReady() { 
            $().ready(() => { 
                $("h1").text("DOM is now ready"); 
            }); 
        } 
        onDOMReady(); 
    </script> 
</body> 
  
</html>

输出：这里我们使用holdReady()函数将DOM就绪事件保持2秒，以便我们可以模拟DOM加载的延迟进行测试ready()函数。

相关用法

注：本文由纯净天空筛选整理自vpsop大神的英文原创作品 What is the use of ready() function in jQuery ?。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。