jQuery的几种页面加载完执行三种方式

在jQuery中，有多种方式可以在页面加载完毕后执行JavaScript代码。本攻略将详细讲解jQuery的几种页面加载完执行三种方式，包括使用$(document).ready()、$().on('load', function(){})和$(function(){})三种方式的原理、实现方法和示例说明。

$(document).ready()

$(document).ready()是jQuery中最常用的一种页面加载完执行JavaScript代码的方式。它的原理是在DOM树加载完成后执行JavaScript代码。具体来说，$(document).ready()分为以下几步骤：

等待DOM树加载完成。
执行JavaScript代码。

示例说明

以下是一个示例，演示如何使用$(document).ready()在页面加载完毕后执行JavaScript代码：

$(document).ready(function() {
    // 在页面加载完毕后执行的代码
    console.log('页面加载完毕！');
});

$().on('load', function(){})

$().on('load', function(){})是另一种常用的页面加载完执行JavaScript代码的方式。它的原理是页面所有资源（包括图片、CSS、JavaScript等）加载完成后执行JavaScript代码。具体来说，$().on('load', function(){})可以分为以下几步骤：

等待页面所有资源加载完成。
执行JavaScript代码。

示例说明

以下是一个示例演示如何使用$().on('load', function(){})在页面加载完毕后执行JavaScript代码：

$(window).on('load', function(){
    // 在页面所有资源加载完毕后执行的代码
    console.log('页面所有资源加载完毕！');
});

示例2：使用$().on('load', function(){})在页面加载完毕后执行JavaScript代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例2：使用$().on('load', function(){})在页面加载完毕后执行JavaScript代码</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(window).on('load', function(){
            // 在页面所有资源加载完毕后执行的代码
            console.log('页面所有资源加载完毕！');
        });
    </script>
</head>
<body>
    <h1>示例：使用$().on('load', function(){})在页面加载完毕后执行JavaScript代码</h1>
    <p>本示例演示如何使用$().on('load', function(){})在页面加载完毕后JavaScript代码。</p>
</body>
</html>

$(function(){})

$(function(){})是一种简化版的$(document).ready()，它的原理和$(document).ready()相同，即在DOM树加载完成后执行代码。体来说，$(function(){})可以分为以下几步骤：

等待DOM树加载完成。
执行JavaScript代码。

示例说明

以下是一个示例，演示如何使用$(function(){})在页面加载完毕后JavaScript代码：

$(function(){
    // 在页面加载完毕后执行的JavaScript代码
    console.log('加载完毕！');
});

总结

本攻略详细讲解了jQuery的几种页面加载完执行三种方式，包括使用$(document).ready()、$().on('load', function(){})和$(function(){})三种方式的原理、实现方法和示例说明。在实际开发中，可以根据具体需求选择不同的方式来执行JavaScript代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery的几种页面加载完执行三种方式 - Python技术站

jquery的几种页面加载完执行三种方式

jQuery的几种页面加载完执行三种方式

$(document).ready()

$().on('load', function(){})

示例2：使用$().on('load', function(){})在页面加载完毕后执行JavaScript代码：

$(function(){})

总结

相关文章