jQuery和JS的加载模式

今天复习了一下jQuery，虽然课堂上讲过这个。但老师几乎都是照本宣科，听了跟没听一个X样。下面看代码吧，还是挺容易理解的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-jQuery和JS入口函数的区别</title>
    <script src="js/jquery.js"></script>
    <script>
        /*
        window.onload = function(ev){
            //1.通过原生的JS入口函数可以拿到DOM元素
            var img = document.getElementsByTagName("img")[0];
            console.log(img);
            //2.通过原生的JS入口函数可以拿到DOM元素的宽高
            var width = window.getComputedStyle(img).width;
            console.log(width);
        }
        */
        /*1.原生JS和jQuery入口函数的加载模式不同
            1).原生JS会等到DOM元素加载完毕后，并且图片也加载完毕后才会执行
            2).jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行        
        */
        /*
        $(document).ready(function(){
            //1.通过jQuery的入口函数可以拿到DOM元素
            var $img = $("img")[0];
            console.log($img);
            //2.通过jQuery的入口函数可以拿到DOM元素的宽高
            var $width = $img.width;
            console.log($width);

        });
        */

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

        /*window.onload = function(ev){
            alert("hello  1");
        }
        window.onload = function(ev){
            alert("hello  2");
        }*/

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

        
    </script>
</head>
<body>
    <img src="https://misc.360buyimg.com/mtd/pc/common/img/no_login.jpg"
    alt="" >
</body>
</html>

应该是有点小问题的，不过上述的两点不同是没有问题的。大家若有任何疑问或是不解，请在下方评论，谢谢。

jQuery和JS的加载模式

猜你喜欢