jquery原理与ajax基础系列（一）之入口函数

 

一.区别于原生的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();