文档就绪 jquery - Javascript (1)

📌 相关文章

📜 文档就绪 jquery - Javascript (1)

📅 最后修改于: 2023-12-03 14:55:03.269000 🧑 作者: Mango

文档就绪 jQuery - Javascript

在前端开发中，我们经常需要等待页面所有资源加载完毕，才能执行相应的操作，否则就会出现一些未知的问题。而 jQuery 中的 $(document).ready() 方法就是为了解决这个问题而存在的。本文将详细介绍关于文档就绪的 jQuery 方法。

什么是文档就绪？

所谓文档就绪就是指页面的 HTML、CSS、image 等资源已经加载完毕，可以执行 JavaScript 代码的状态。当页面进入文档就绪状态之后，我们可以对 DOM 节点、元素进行操作，添加事件处理程序等操作。而文档就绪状态主要通过 $(document).ready() 方法来实现。

jQuery $(document).ready() 方法

语法：

$(document).ready(function(){
   // 所有文档就绪代码写在这里
});

在页面中添加上述代码，即可在文档就绪状态下执行我们写的代码。

另外，为了简化代码，可以使用以下语法：

$(function(){
   // 所有文档就绪代码写在这里
});

$(document).ready() 与 onload 的区别

$(document).ready() 事件会在 DOM 加载完成后触发，但不会等待图片、视频等媒体文件加载；
onload 事件会在页面所有内容加载完毕后触发，包括图片、视频等媒体文件。

jQuery $(window).load() 方法

$(window).load() 方法与上述 onload 事件相似，会等待页面的所有资源加载完毕后再执行代码，但该方法存在一些兼容性问题。

语法：

$(window).load(function(){
   // 需要等待页面所有资源加载完毕后执行的代码写在这里
});

使用示例

以下为一个简单的示例，以便更好地理解：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document Ready jQuery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="container">
        <h1>这是一个jQuery文档就绪示例</h1>
        <p>当页面所有资源加载完毕后，此处的文字会变成红色。</p>
    </div>
    <script>
        $(document).ready(function(){
            $("#container p").css("color", "red");
        });
    </script>
</body>
</html>

以上代码表示文档就绪后将 #container p 元素的文本颜色设置为红色。

总结

通过 $(document).ready() 方法，我们可以在页面所有资源加载完毕后再执行 JavaScript 代码，从而避免一些未知的问题。如果需要等待页面中所有媒体文件加载完成后再执行代码，可以使用 $(window).load() 方法。