jQuery 与 JavaScript 加载模式对比

多个 ​​window.onload​​ 只会执行一次, 后面的会覆盖前面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-入口函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        window.onload = function () {
            alert("hello BNTang");
        }
        window.onload = function () {
            alert("hello JonathanLee");
        }
    </script>
</head>
<body>
</body>
</html>

多个 ​​$(document).ready()​​ 会执行多次, 后面的不会覆盖前面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-入口函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(document).ready(function () {
            alert("hello BNTang");
        });
        $(document).ready(function () {
            alert("hello JonathanLee");
        });
    </script>
</head>
<body>
</body>
</html>

不会覆盖的本质(了解, 后面 jQuery 原理会详细讲解), jQuery 框架本质是一个闭包, 每次执行我们都会给 ​​ready​​ 函数传递一个新的函数, 不同函数内部的数据不会相互干扰，相当于如下这样写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-入口函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        let test1 = function () {
            alert("hello BNTang");
        }
        let test2 = function () {
            alert("hello JonathanLee");
        }
        $(document).ready(test1);
        $(document).ready(test2);
    </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-入口函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        let test1 = function () {
            let abc = "123";
            // 因为在同一个函数中, 所以 456 会覆盖 123
            // let abc = "456";
            alert(abc);
        }
        test1();
        let test2 = function () {
            // 因为在不同函数中, 所以不会影响
            let abc = "456";
            alert(abc);
        }
        test2();
    </script>
</head>
<body>
</body>
</html>

window.onload

$(document).ready()

执行时机

必须等待网页全部加载完毕(包括 图片等),然后再执行包裹的代码

只需要等待网页中的DOM结构加载完毕, 就能执行包裹的代码

执行次数

只能执行一次, 如果第二次, 那么第一次的执行会被覆盖

可以执行多次, 第N次都不会被下一次覆盖

简写方案

无

$(function () { });

为什么我们能访问 $ 符号

因为 ​​$​​ 符号 是 jQuery框架对外暴露的一个全局变量

JavaScript 中定义一个全局变量

所有全局变量其实是 window 对象中的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-入口函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function test() {
            let customValue = 998;
            alert(customValue);
           // 1. 没有如下代码 customValue 就不是一个全局变量, 函数执行完毕之后
           // customValue会被自动释放, test 函数以外的地方访问不到 customValue

           // 2. 加上如下代码之后 customValue 就会变成一个全局变量, 函数执行完毕也不
           // 会被释放,test 函数以外的地方也可以访问 customValue
           window.customValue = customValue;
        }

        test();
        alert(customValue);
    </script>
</head>
<body>
</body>
</html>

所以 jQuery 框架源码实现

window.jQuery&nbsp;=&nbsp;window.$&nbsp;=&nbsp;jQuery;

所以想要使用 jQuery 框架只有两种方式, 一种是通过 ​​$​​​, 一种是通过 ​​jQuery​​

jQuery 入口函数的其它编写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-入口函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 方式一
        $(document).ready(function () {
            alert("hello BNTang");
        });

        // 方式二
        $(function () {
            alert("hello BNTang");
        });

        // 方式三
        jQuery(document).ready(function () {
            alert("hello BNTang");
        });
        
        // 方式四
        jQuery(function () {
            alert("hello BNTang");
        });
    </script>
</head>
<body>
</body>
</html>

解决 $ 符号冲突问题

为什么是 window.jQuery = window.$ = jQuery 而不是 window.jQuery = jQuery

jQuery框架之所以提供了 jQuery 访问还提供 $ 访问, 就是为了提升开发者的编码效率

$ 符号冲突

很多 js 的框架都提供了类似 jQuery 这样的便捷访问方式, 所以很有可能某一天我们在使用多个框架的时, 多个框架作者提供的便捷访问方式冲突(A框架通过 ​​$​​​ 访问, B框架也通过 ​​$​​ 访问)

释放 $ 的使用权

当便捷访问符号发生冲突时, 我们可以释放 ​​$​​​ 的使用权, 释放之后只能使用 ​​jQuery​​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-入口函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 在使用jQuery之前指定自定义符号
        jQuery.noConflict();

        // 使用 jQuery
        jQuery("div p").hide();
        
        // 使用其他库的 $()
        $("content").style.display = 'none';
    </script>
</head>
<body>
</body>
</html>

自定义便捷访问符号

当便捷访问符号发生冲突时, 我们可以自定义便捷访问符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-入口函数</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 在使用jQuery之前指定自定义符号
        let bntang = jQuery.noConflict();

        // 和使用$一样通过自定义符号调用jQuery
        bntang(function () {
            alert("hello BNTang");
        });
    </script>
</head>
<body>
</body>
</html>