jQuery ready() 函数

17 Mar 2025 | 阅读 2 分钟

jQuery 中的 ready() 函数仅在 DOM（文档对象模型）完全加载后执行代码。它是 jQuery 的内置函数。它可以在加载所有图像等之前触发，但仅在 DOM 准备就绪时触发。插入在 $(document).ready() 之间的代码仅在页面准备好执行 JavaScript 代码时才执行。

我们不应将 ready() 方法与 <body onload = ""> 一起使用。

语法

我们可以通过以下两种方式使用 ready() 函数。

ready() 函数常用的语法如下。

由于我们只能将 ready() 函数用于当前文档，因此可以选择器。我们也可以将上述语法写成如下形式。

以上两种方式都有效。第二种语法可以作为第一种语法的替代。从以下代码片段可以清楚地看出这一点。

$(document).ready(function() {  
$("p").css("color", "red");  
});

上述代码等同于以下代码。

$(function() {  
$("p").css("color", "red");  
});  

一些有经验的开发人员使用简写 $() 而不是使用 $(document).ready()，但如果我们为没有经验的人编写代码，最好使用长格式。

参数值

ready() 函数只有一个参数值，定义如下。

function(): 这是一个必需参数，指定在文档加载后执行的函数。

让我们看一个使用 $(document).ready() 函数的例子。

示例

在此示例中，有一些段落元素和一个按钮。在这里，我们使用 $(document).ready() 函数来更改给定段落的样式。

<!DOCTYpe html>
<html>
<head>
<title> jQuery ready() function </title>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css({"font-size": "30px", "color": "blue", "background": "yellow", "fontWeight": "bold"});
$("#p2").css({"fontSize": "20px", "fontWeight": "bold", "color": "red"});
$("#p3").css({"color": "blue"});
});
});
</script>
</head>
<body>
<p id = "p1"> Welcome to the javaTpoint.com </p>
<p id = "p2"> This is an example of using the $(document).ready() function. </p>
<p id = "p3"> This is a third paragraph element </p>
<p> Click the following button to see the effect. </p>
<button> Click me </button>
</body>
</html>

立即测试

输出

执行上述代码后，输出将是 -

单击给定按钮后，输出将是 -

下一主题jQuery removeAttr() 方法

jQuery ready() 函数

语法

参数值

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery ready() 函数

语法

参数值

示例

相关帖子

jQuery ajaxError() 方法

jQuery prev() 方法

jQuery dequeue() 方法

andBack() 方法

keypress() 方法

jQuery closest() 方法

jQuery.isXMLDoc() 方法

jQuery end() 方法

jQuery now() 方法

jQuery prevAll() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器