jQuery的第一天~「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」 jQuery和js

「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」

jQuery和js的入口函数的区别

第一节

<body>
    <img src="https://i0.hdslb.com/bfs/feed-admin/d42ae546f79fbd53ff22a3b0ba507d3d9b0f18ea.jpg@880w_388h_1c_95q" alt=""></img>
</body>

原生：

通过原生的JS入口函数可以拿到DOM元素
通过原生的JS入口函数可以拿到DOM元素的宽高

         window.onload=function(ev){   
            var img=document.getElementsByTagName("img")[0];
            console.log(img);

            var width=window.getComputedStyle(img).width;
            console.log('onland',width);    
        }

结果：

jQuery：

通过jQuery入口函数可以拿到DOM元素
通过jQuery入口函数不可以拿到DOM元素的宽高

        $(document).ready(function(){
            
            var $img=$("img");
            console.log($img);

            var $width=$img.width();
            console.log('jquery',$width);
        });

结果：

总结：原生JS和jQuery入口函数的加载模式的不同？

原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行

第二节

多个入口函数覆盖情况

js入口函数代码：

       window.onload=function(){
           alert("onload1");
       }
       window.onload=function(){
           alert("onload2");
       }

jQuery入口函数代码：

      $(document).ready(function(){
          alert("jQuery1");
      });
      $(document).ready(function(){
          alert("jQuery2");
      });

结果弹窗顺序为：jQuery1->jQuery2->onload2

jQuery入口函数的书写方式：

方式一：

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

方式二：

     jQuery(document).ready(function(){
         alert("hello jQuery2");
     });

方式三：(推荐)

     $(function(){
         alert("hello jQuery3");
     });

方式四：

     jQuery(function(){
         alert("hello jQuery4");
     });

总结：

原生的JS如果编写了多个入口函数，后面编写的函数会覆盖前面编写的
jQuery中编写的多个入口函数，后面编写的不会覆盖前面编写的

第三节

释放$的使用权

此方法用于避免其他使用 $ 的地方与jQuery本身产生冲突。

注意点：

释放操作必须在编写其他jQuery代码之前编写
释放后就不能再使用$,改为使用jQuery

    jQuery.noConflict();  //释放$对jQuery的调用权限

自定义一个访问符号，释放$使用权并将调用jQuery的权限赋给xy;

    var xy=jQuery.noConflict();
    xy(function(){
        alert("hello jQuery");
    });

结果：