ReferenceError: $ 未定义

Posted 2023-02-22

【中文标题】ReferenceError: $ 未定义

【英文标题】：ReferenceError: $ is not defined

【发布时间】：2014-04-11 17:01:41

【问题描述】：

我收到此错误消息ReferenceError: $ is not defined 这是我的标题。

<link href="css/global-style.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" media="screen" href="css/datepicker3.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>

以下是我的 JavaScript 代码

<script type="text/javascript">
$('#sandbox-container .input-daterange').datepicker(
    startDate: "today",
    calendarWeeks: true,
    todayHighlight: true
);
</script>

以下是 html

<div class="col-md-12" id="sandbox-container">
    <label>Project Duration</label>
    <div class="input-daterange input-group" id="datepicker">
            <input type="text" class="input-md form-control" name="start" />
            <span class="input-group-addon">to</span>
            <input type="text" class="input-md form-control" name="end" />
    </div>
</div>

我想在输入标签上显示日期选择器。 我正在使用 Bootstrap V3.1。 我正在使用this datepicker

【问题讨论】：

Uncaught ReferenceError: $ is not defined?的可能重复

【参考方案1】：

在使用 $ 或 jQuery 的脚本之前添加 jQuery 库，以便在脚本中识别 $。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

【参考方案2】：

使用 Google CDN 进行快速加载：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

【讨论】：

另外你需要添加ui来支持日历。

能否请您显示您的标题，以便我可以准确了解 bootstrap 和 jquery 的版本。

我正在使用 jQuery v2.0.3。我添加了有问题的标题

code.jquery 使用 maxcdn，这与 google 的 cdn 一样快（至少在正常用例中），并且 code.jquery 也是推荐的方式。

【参考方案3】：

在 head 标签内添加这个脚本：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

【参考方案4】：

这是每个人在使用 jQuery 时常犯的错误之一，基本上 $ 是 jQuery() 的别名，所以当你在声明函数之前尝试调用/访问它时，最终会抛出这个错误。

原因可能是

1) 包含的 jQuery 库路径不正确。

2) 在脚本之后添加库，您是否看到该错误

解决这个问题

加载所有 javascript 文件/脚本的 jquery 库开头。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

【参考方案5】：

jQuery 是一个 JavaScript 库，jQuery 的目的是让代码更容易使用 JavaScript。

jQuery 语法是为选择量身定做的，$ 符号用于定义/访问 jQuery。

它在声明中序列必须在顶部然后包含使用jQuery的任何其他脚本

jQuery 声明的正确位置：

$(document).ready(function()
    console.log('hi from jQuery!');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

以上示例将完美运行，因为 jQuery 库在使用 jQuery 函数的任何其他库之前初始化，包括 $

但是如果你把它应用到其他地方，jQuery 函数将不会在浏览器 DOM 中初始化，并且它无法识别任何与 jQuery 相关的代码，并且它的代码以$ 符号开头，所以你会收到$ is not a function 错误.

jQuery 声明的位置不正确：

$(document).ready(function()
    console.log('hi from jQuery!');
);

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

上面的代码不会工作，因为 jQuery 没有在任何使用 jQuery 就绪函数的库的顶部声明。

【参考方案6】：

虽然我的回复晚了，但还是有帮助的。

如果您使用的是Spring Tool Suite，并且您仍然认为JQuery文件引用路径是正确的，那么每当您修改JQuery文件时刷新您的项目。

您可以通过右键单击项目名称来刷新 -> 刷新。

这就是解决我的问题。