03-jQuery和JS入口函数的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/yangyalun/article/details/82947560

本文探讨了原生JS与jQuery入口函数的加载模式差异，原生JS等待DOM及图片完全加载，而jQuery仅待DOM加载即执行。此外，文中还对比了两者在编写多个入口函数时的行为，原生JS后写会覆盖前写，jQuery则不会。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区别1：

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

区别2：

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

<!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>