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

痛定思痛。 2022-09-10 15:14 166阅读 0赞

### 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>

结果截图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_20_color_FFFFFF_t_70_g_se_x_16][]

由结果可以知道，先运行了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>

结果：

![2021090916003291.png][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/19473e20d5e94c6ab02d89b4172be87d.png
[2021090916003291.png]: /images/20220829/365d748b6fd54f0dbca6835915926caa.png