03-jQuery和JS入口函数的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-jQuery和JS入口函数的区别</title>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <script>
        // window.onload=function () {
        //     //1.通过原生的JS入口函数拿到DOM元素
        //   var img=document.getElementsByTagName("img")[0];
        //   console.log(img);    //返回img
        //   //2.通过原生的JS入口函数拿到DOM元素的宽高
        //   var width=window.getComputedStyle(img).width;
        //   console.log(width);  //返回img的宽
        // };
        /*
        *1.原生JS和jQuery入口函数的加载模式不同
        *原生JS会等到DOM元素加载完毕，并且图片也加载完毕才执行
        * jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
        * */
        $(document).ready(function () {
            //1.通过jQuery入口函数拿到DOM元素
            var $img=$("img")[0];
           console.log($img);  //返回img
            //2.通过jQuery入口函数不能拿到DOM元素的宽高
            var   $width=$img. width();
            console.log($width); //报错：$img.width is not a function
        });
      /*
      * 1.原生的JS如果编写了多个入口函数，后面的编写会覆盖前面编写的
      * 2.jQuery如果编写了多个入口函数，后面的不会覆盖前面的
      * */
      /*window.onload=function () {
          alert("hello world1")
      }
        window.onload=function () {
            alert("hello world2")
        }*/

        // $(document).ready(function () {
        //     alert("hello world1")
        // })
        // $(document).ready(function () {
        //     alert("hello world2")
        // })
    </script>


</head>
<body>
<img src="https://img.alicdn.com/imgextra/i2/31391233/O1CN011KykoKXImWBteT3_!!0-saturn_solar.jpg_220x220.jpg_.webp">
</body>
</html>

区别1：

原生JS和jQuery入口函数的加载模式不同
原生JS会等到DOM元素加载完毕，并且图片也加载完毕才执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行、

区别2：

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

03-jQuery和JS入口函数的区别

猜你喜欢