探索jQuery的ready方法比原生js的window.onload快的奥秘

程序员文章站 2022-05-25 22:13:33

...

节点树

一、ready() ：页面DOM结构节点加载完成后触发（数据可能没有完全加载）
二、load & onload ：页面所有元素（包括图片数据等）加载完成后触发
三、window.onload = function(){...}与 $(function(){...})的对比
四、测试用例

一、ready() ：页面DOM结构节点加载完成后触发（数据可能没有完全加载）

// ready的完整写法
$(document).ready(function(){...});
 // 简写方法1
$().ready(function(){...});
 // 简写方法2
$(function(){...});

二、load & onload ：页面所有元素（包括图片数据等）加载完成后触发


window.onload = function(){...};
 
<body οnlοad="func1();func1();">...</body>

上面两种一样的，第一个是js写法，一个是嵌入html的写法。只能一次性定义。


$(window).load(function(){...});

jquery提供的load()，比onload方法灵活，可以多次定义并有先后次序。

三、window.onload = function(){…}与 $(function(){…})的对比

window.onload = function(){…}	$(function(){…})
一个页面只能写一些onload = function(){…}	一个页面可以同时写多个$(document).ready(function(){…})
DOM节点和数据加载完之后执行代码块	加载完DOM节点即执行

四、测试用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        alert("hello01");
        window.onload = function(){
            let oDiv = document.getElementById("div01");
            alert("原生弹出的" + oDiv);

        }
        // jQuery的ready完整写法
        $(document).ready(function(){
            let $div = $("#div01");
            alert("jQuery 弹出" + $div);
        })

        $(function(){
            let $div01 = $("#div01");
            alert("简写jQuery" + $div01);
        })
        alert("hello02");
    </script>
</head>
<body>
    <div id="div01">这是一个div元素</div>
</body>
</html>

测试结果：

1、helllo 01
2、hello 02
3、jQuery 弹出[object Object]
4、简写jQuery[object Object]
5、原生弹出的[object HTMLDivElement]