为什么我在使用 jQuery $ 时遇到了报错？-HCRM博客

jQuery $ 报错分析与解决方案

一、

在使用jQuery进行前端开发时，开发者经常会遇到与$符号相关的报错问题，本文将详细探讨这些常见错误的原因及其解决方法，包括“$ is not defined”、“$ is not a function”等，通过具体示例和表格形式展示，帮助开发者更好地理解和解决这些问题。

（图片来源网络，侵权删除）

二、常见错误及其解决方法

1. $ is not defined

描述：该错误通常表示没有正确引入jQuery库或者引入位置不正确。

解决方法：

确保正确引入jQuery库：在HTML文件中使用<script>标签引入jQuery库，可以通过CDN或本地文件方式引入。

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

检查引入顺序：确保jQuery库在调用其函数之前被引入。

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 在这里编写 jQuery 代码
        });
    </script>

2. $ is not a function

（图片来源网络，侵权删除）

描述：该错误通常是由于其他JavaScript库也使用了$作为其函数的别名，导致冲突。

解决方法：

使用noConflict()方法：通过该方法释放$符号，使其指向原始的库或其他自定义名称。

    var jq = jQuery.noConflict();
    jq(document).ready(function(){
        // 在这里编写 jQuery 代码，使用 jq 替代 $
    });

自执行函数：将jQuery代码包裹在自执行函数中，并通过形参传递$符号。

    (function($){
        $(document).ready(function(){
            // 在这里编写 jQuery 代码
        });
    })(jQuery);

3. 多个版本的jQuery冲突

描述：在同一页面引用多个版本的jQuery时，可能会导致冲突。

（图片来源网络，侵权删除）

解决方法：

使用noConflict()方法：为不同版本的jQuery指定不同的变量名。

    <script src="jquery1.11.0.js"></script>
    <script src="jquery1.5.0.js"></script>
    <script>
        var jq110 = jQuery.noConflict(true);
        console.log(jq110.fn.jquery); // '1.11.0'
        var jq150 = jQuery.noConflict(false, true);
        console.log(jq150.fn.jquery); // '1.5.0'
    </script>

改进的方法：使用立即调用函数表达式（IIFE）来隔离不同版本的代码。

    <script src="jquery1.11.0.js"></script>
    <script>
        (function($){
            // v1.11.0 版本的代码
        })(jQuery);
    </script>
    <script src="myJS.js"></script>
    <script>
        (function($){
            // myJS.js 中的代码，引用的是 v1.11.0
        })(jQuery);
    </script>
    <script src="jquery1.5.0.js"></script>
    <script>
        (function($){
            // v1.5.0 版本的代码，压缩后只有几行
            var $ = jQuery.noConflict(true);
            // v1.5.0 版本的代码
        })(jQuery);
    </script>

三、相关FAQs

Q1: 如何避免jQuery与其他JavaScript库的$符号冲突？

A1: 可以使用jQuery.noConflict()方法释放$符号，或者使用自执行函数将$符号作为参数传递，从而避免冲突。

使用noConflict()方法：

    var jq = jQuery.noConflict();
    jq(document).ready(function(){
        // 在这里编写 jQuery 代码，使用 jq 替代 $
    });

使用自执行函数：

    (function($){
        $(document).ready(function(){
            // 在这里编写 jQuery 代码
        });
    })(jQuery);

Q2: 如何解决Uncaught ReferenceError: jQuery is not defined错误？

A2: 这个错误通常表示没有正确引入jQuery库，解决方法是确保在使用jQuery之前正确引入jQuery库，并检查引入顺序是否正确。

确保正确引入jQuery库：

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

检查引入顺序：

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 在这里编写 jQuery 代码
        });
    </script>