【jQuery笔记Part1】03-jQuery加载模式对比JS

最新推荐文章于 2021-06-10 17:44:22 发布

萌宅鹿同学

最新推荐文章于 2021-06-10 17:44:22 发布

阅读量206

点赞数

分类专栏： # jQuery笔记文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100027994

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery加载模式对比JS

javaScript 中的加载方式
jQuery 中的加载方式

javaScript 中的加载方式

window.onload = function() {
	// ...
};

执行时机：所有的DOM节点加载完毕之后调用，包括资源加载，比如图片
执行次数：此处是 = 赋值，所以后面的会覆盖前面的函数内容，调用多次，只会执行最后一次
简写方案：无

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
    	// js 中的加载方式
        window.onload = function () {
            console.log('onload1')
        };
        
        window.onload = function () {
            console.log('onload2')
        };
    </script>
</body>
</html>

运行结果：只执行了最后一次的函数内容
在这里插入图片描述

jQuery 中的加载方式

$(document).ready(function () {
	// ...
});

执行时机：所有的DOM节点加载完毕之后调用，不包括资源加载

开发实际应用：做图片轮播器时，没有必要等待所有的图片加载完成才开始滚动

执行次数：可以执行多次，第N次都不会被上一次覆盖；ready() 函数会把内部接收到的函数保存到一个数组里面，等后期统一执行，所以，调用多次，就有多次执行。

简写方案：

$(function () { 
	// ...
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    <script>
        // jQuery 中的加载方式
        $(document).ready(function () {
            console.log('ready1')
        });
        $(document).ready(function () {
            console.log('ready2')
        });
        $(document).ready(function () {
            console.log('ready3')
        });
        $(function () {
            console.log('ready4')
        });
    </script>

</body>
</html>