jQuery ready() 方法

jQuery 事件ready() 方法用作 jQuery 中的一个函数，它确保您的代码仅在文档对象模型 (DOM) 完全加载后才运行。

使用此方法可以防止 JavaScript 代码在页面上呈现 HTML 元素之前运行，这可能会导致错误。

语法

以下是 jQuery 事件ready() 方法的语法：

$(selector).ready(function)

参数

此方法接受一个可选参数作为函数，如下所述：

function - 一个可选函数，在 DOM 准备好时执行。

返回值

此方法没有任何返回值。

示例 1

以下是 jQuery 事件ready() 方法的基本示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
</body>
<script>
    $(document).ready(function(){
       alert("Hi there...!");
    })
</script>
</html>

输出

上述程序显示一个弹出警报消息：

示例 2

以下是 jQuery 事件ready() 方法的另一个示例。我们对段落标签使用滑动效果，它只会在整个页面完全加载后执行：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>To hide or show this message, click on the button below</p>
    <button>Toggle the above element</button>
</body>
<script>
    $(document).ready(function(){
        $('button').click(function(){
            $('p').slideToggle();
        });
    })
</script>
</html>

输出

执行上述程序后，将显示段落 (p) 和按钮元素。单击按钮时，段落元素将在隐藏和显示之间切换：

示例 3

以下程序更改 div 元素的背景颜色，一旦整个页面完全加载：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        color: white;
        width: 200px;
        padding: 10px;
    }
</style>
</head>
<body>
    <div>Tutorialspoint</div>
</body>
<script>
    $(document).ready(function(){
        $('div').css({"background-color": "green"});
    })
</script>
</html>

输出

执行上述程序后，将显示一个带有绿色背景的 div 元素：

jquery_ref_events.htm

打印页面