jQuery-入口函数

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 = window.$ = 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>
posted @   BNTang  阅读(153)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示