jq中的ready方法和 js中的onload方法的区别

最新推荐文章于 2021-09-28 20:06:58 发布

梁萌

最新推荐文章于 2021-09-28 20:06:58 发布

阅读量1.1k

点赞数 4

分类专栏： js/jq 文章标签： ready onload js jq 函数执行顺序

本文链接：https://blog.csdn.net/liangmengbk/article/details/84433906

版权

js/jq 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

$(document).ready

$(document).ready属于jQuery事件,使用前页面需要引用jQuery

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

实例：

<html>

<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".btn1").click(function() {
            $("p").slideToggle();
        });
    });
    </script>
</head>

<body>
    <p>This is a paragraph.</p>
    <button class="btn1">Toggle</button>
</body>

</html>

window.onload

window.onload 属于JavaScript方法

onload 事件会在页面或图像加载完成后立即发生。

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script>
    function myFunction() {
        alert("页面加载完成");
    }
    </script>
</head>

<body onload="myFunction()">
    <h1>Hello World!</h1>
</body>

</html>

$(document).ready 和 window.onload 如果同时写在一个页面上，两个方法的执行顺序是不一样的。

在jQuery3.0.0版本之前的版本中，$(document).ready会先于window.onload执行

在jQuery3.0.0版本及之后的版本中，window.onload先执行

使用jQuery2.1.4版本：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        console.log("ready");
    });
    window.onload = function() {
        console.log("onload");
    }
    </script>
</head>

<body>
</body>

</html>

结果是：

使用jQuery3.0.0版本：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        console.log("ready");

    });
    window.onload = function() {
        console.log("onload");
    }
    </script>
</head>

<body>
</body>

</html>

结果是：

总结：(a)两个方法的执行顺序不一样，jQuery版本不同，方法的执行顺序不同。

(b)编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行最后一个onload方法。

$(document).ready()可以同时编写多个，并且都可以得到执行。

(c)简化写法

window.onload没有简化写法；

$(document).ready(function(){}) ，可以简写成$(function(){})；

梁萌

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jq中的ready方法和 js中的onload方法的区别

$(document).ready$(document).ready属于jQuery事件,使用前页面需要引用jQuery当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。实例：&lt;html&gt;&lt;head&gt; &lt;script type="text/javascript" src="/jquery/...
复制链接

扫一扫