浅谈jQuery入口函数与原生入口函数的区别_jquery入口函数写和不写有什么区别-CSDN博客

本文链接：https://blog.csdn.net/qq_41524691/article/details/103217999

一，先来看看原生入口函数与jQuery的入口函数的区别
原生入口函数：

window.onload=function(){
    alert("hello javascript");
}

jQuery入口函数：

$(document).ready(function(){
    alert("hello jquery");
});

现在来看看书写多个入口函数会出现什么情况
原生：

window.onload=function(){
    alert("hello javascript1");
};

window.onload=function(){
    alert("hello javascript2");
};

运行之后我们可以看到只有第二个alert弹出，显然后面的函数覆盖了前面的函数
在这里插入图片描述
再来看看jQuery：

$(document).ready(function(){
    alert("hello jquery1");
});
$(document).ready(function(){
    alert("hello jquery2");
});

运行之后我们可看到，会依次弹出：
在这里插入图片描述

由此我们可以得出：
原生js中我们如果定义了多个入口函数，后面的会覆盖前面的，相当于就近原则
在jQuery中我们定义多个入口函数后，会依次执行，不会覆盖

二.加载顺序问题
这里我们来举个简单的栗子，获取img的宽度
代码：

<body>
    <img src="https://i0.hdslb.com/bfs/archive/05dc9c4a49151fd69a655b7123ca8ac48d351c4e.gif" alt="">
</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
//原生
window.onload=function(){
    var imgObj=document.getElementsByTagName("img")[0];
    var imgWidth=window.getComputedStyle(imgObj).width;
    console.log("原生",imgWidth);
};
//jQuery
$(document).ready(function(){
    var $imgWidth=$("img").width();
    console.log("jquery",$imgWidth);
});
</script>

我们ctrl+F5清除缓存刷新，可以在控制台看到：
在这里插入图片描述
原生js获取到了img的width，而jQuery获取的width为0，原因如下：
原生js是等到dom和img资源都加载完毕后才会执行，而jQuery是在dom加载完毕后就会执行，所以结果为0.

三.再来看看jquery入口函数的四种写法：

$(document).ready(function(){
    console.log("jquery1");
});
$(function(){
    console.log("jquery2");
});
jQuery(document).ready(function(){
    console.log("jquery3");
});
jQuery(function(){
    console.log("jquery4");
});

在这里插入图片描述
四.如何解决$的冲突问题和自定义简写符号
先来看看这段代码：

jQuery.noConflict();
$(document).ready(function(){
    console.log("jquery1");
});

查看控制台：
在这里插入图片描述
我们会发现报错了，显然因为jQuery.noConflict()的问题，它的作用就是释放$的使用权，在实际开发中我们可能会遇到这样的情况，自己封装了一个函数，正好使用 $ 来进行调用的，那么就会造成冲突，我们可以使用jQuery来代替 $ 。
但jQuery的原则就是write less do more，此时我们可自行定义简写符号：
例如使用下划线

var _ = jQuery.noConflict();
_(document).ready(function(){
    console.log("jquery1");
});

在控制台我们可以看到打印正常
在这里插入图片描述