jQuery - 使用要点 - $(document).ready()

最新推荐文章于 2021-01-05 10:28:33 发布

瘦毛毛

最新推荐文章于 2021-01-05 10:28:33 发布

阅读量592

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/u013275171/article/details/85312619

版权

jQuery 专栏收录该内容

28 篇文章

订阅专栏

$(document).ready()

包含在 $(document).ready() 中的代码，只有在页面文档对象模型(Document Object Model(DOM))准备好执行 JavaScript 代码后，才会被执行一次。

包含在 $(window).on("load", function(){......}) 中的代码，只有在整理页面(包含：image & iframe，不仅仅是DOM准备好)准备好执行 JavaScript 代码后，才会被执行一次。

$( document ).ready(function() {
    console.log( "ready!" );
});
// 简写方式
$(function() {
    console.log( "ready!" );
});

// 使用命名函数代替匿名函数
function readyFn( jQuery ) {
    // Code to run when the document is ready.
}
 
$( document ).ready( readyFn );
// or:
$( window ).on( "load", readyFn );

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="./jquery-3.3.1.js"></script>
</head>

<body>
    <iframe src="http://techcrunch.com"></iframe>
    <script>
        $(window).on("load", function () {
            console.log("$(window).on() - load");
        });
        //
        $(document).ready(function () {
            console.log("$(document).ready()");
        });
        /*
        $(document).ready() 先列印
        $(window).on() - load 后列印，因為該方法要等待 iframe 載入完成，才執行
        window.onload = function () {......}
        */
    </script>
</body>

</html>