jquery入口函数和原生js入口函数的区别

jquery入口函数

写法一:

$(document).ready(function(){ 功能代码 })

写法二(简写):

 $(function(){ 功能代码 })

原生js入口函数

window.onload=function(){ 功能代码 }

首先说一下写jquery入口函数有什么好处
1.文档加载完成后执行该函数,能确保获取到元素。
2.可以形成沙箱模式,防止全局变量污染问题。

原生js入口函数和jquery入口函数的区别
window.onload需要等待页面dom树、图片、多媒体资源以及外部引入文件全部加载完成再去执行函数
jquery入口函数只需要等待页面的dom树也就是页面的元素加载完成就执行函数

window.onload页面中只能加载一次,多次编写的情况下,后面的入口函数会覆盖前面的入口函数。
jquery入口函数可以加载多次，并且不会覆盖。

如下所示:
我们在执行了以下四个函数,在控制台输出结果中可以看到A和B只输出了一次,并且输出的是B
1和2全部都输出了,并且B的输出结果在最后面,由此可见onload只执行一次,后面的会覆盖前面的,并且onload比jquery入口函数执行的晚。

window.onload = function () {
      console.log('A');
    }
window.onload = function () {
      console.log('B');
    }
    

$(function () {
      console.log(1);
    })
$(function () {
      console.log(2);
    })

控制台输出结果: