一.区别于原生的js,入口函数只要存在以下两个特点:
1.加载原理问题。原生的js在使用入口函数(window.οnlοad=function(){})加载的时候,先加载的DOM再加载的图片(图片往往体积庞大,严重的影响性能),最后才加载的js。而在jquery中,再加载万dom节点之后不加载图片直接加载的jquery,高效。可通过在HTML的标签中添加网络图片来验证,原生JS可获得图片尺寸,JQ不可获得。
2.没有覆盖问题,代码如下:
<script>
// juery不存在覆盖的问题,下面3个都会弹。
$(function () {
alert('q');
})
$(function () {
alert ('b')
})
$(document).ready(function(){
alert("z");
})
/*原生的js中,后写的入口函数会覆盖掉先写的入口函数。*/
window.onload=function(){
alert("c");
}
window.onload=function(){
alert("d");
}
// 在原生的js的入口函数中,要想后者不覆盖前者,只能通过函数.addEventListener(
// "load",function(){})的方法来实现。
window.addEventListener("load",function () {
alert("d+c");
})
$(function () {
console.log($("img")[0].width);
console.log($("img")[1].width);
})
</script>
二.入口函数的几种写法
最省事的:(推荐)
$(function(){
.....
})
条理最清晰的:
$(document).ready(function(){
.....
})
衍生的写法:你要明白一个道理:jquery=$,因此上面的两种写法分别可以对应于:
Jquery(function(){
......
})
Jquery(document).ready(function(){
......
})
三.jquery中"$"的冲突问题
jquery中"$"的冲突问题的出现主要是由于多个库的引用而出现,再多个库的引用的时候,也会出现后引用的库会覆盖前一个库的情形。解决策略就是将$符号换成其他的不冲突的符号或单词组合,或者不使用$而直接使用jquery,具体的解决方法如下:
//nj代替"$"代替“jquery”
let nj=jquery.noConflict();