JS入口函数和jQuery入口函数的区别

JS入口函数：

window.onload = function() {
    要执行的代码
}

jQuery入口函数：

//完整写法：
$(document).ready(function(){
    要执行的代码
}); 
//可以简写
$(function(){
    要执行的代码
});

JS和jQuery入口函数，其实想解决的问题差不多，就是想在文档中的标签加载完毕后再执行js、jq代码，说白点就是想在每个HTML页面的元素创建后，在执行js、jq代码。

如果不这么做会造成下面的问题，声明在上面的JS代码会获取不到后创建的DOM节点：

<head>
    <script>
        var div = document.getElementById('div')
        console.log(div);  //输出 null  主要原因就是代码是自上而下执行的
    </script>
</head>

<body>
    <div id="div">hello</div>
</body>

添加入口函数即可解决问题：

<head>
    <script>
        window.onload = function () {
            var div = document.getElementById('div')
            console.log(div); // 输出‘<div id="div">hello</div>’
        }
    </script>
</head>

<body>
    <div id="div">hello</div>
</body>

JS和jQuery入口函数的区别

1.加载方式不同。

JavaScript 的入口函数是会等到所有内容，包括外部图片之类的文件加载完后，才执行。

jQuery的入口函数会等到全部DOM元素加载完毕，但不会等到图片也加载完毕，就会提前执行。

例子：一个img元素向网络请求图片，分别用在js和jq入口函数里获取图片信息，看谁先获取到。

//注意：第一次执行和第二次执行，会得到不同的结果，是浏览器缓存的结果。所以以第一次结果为准。
<head>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        window.onload = function () {
            var img = document.getElementById('img')
            console.log(img.width, img.height);
        }
        $(function () {
            console.log($('#img').width());
        })
    </script>
</head>

<body>
    <img id="img" src="https://img1.baidu.com/it/u=2104978711,1709447343&fm=26&fmt=auto">
</body>

</html>

结果截图：

由结果可以知道，先运行了jQuery的入口函数，即使jQuery的入口函数在JS入口函数下方，而且是在img图片还没有加载完成前就执行了，所以输出了第一个0。最后才执行JS的入口函数，输出图片的宽高。

2.执行方式不同。

JS的入口函数如果有多个，后面创建的入口函数会覆盖前面创建的入口函数，说白了就只能有一个入口函数

jQuery的入口函数可以有多个，后面创建的入口函数不会覆盖前面的入口函数。

例子：

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

<head>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        window.onload = function () {
            console.log("js入口函数_1");
        }
        window.onload = function () {
            console.log("js入口函数_2");
        }
        $(function () {
            console.log("jQ的入口函数_1");
        })
        $(function () {
            console.log("jQ的入口函数_2");
        })
    </script>
</head>

<body>

</body>

</html>

结果：