javascript-ReferenceError:未定义$

我有此错误消息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。
我正在使用此日期选择器

Shahab asked 2020-02-13T10:01:57Z
5个解决方案
118 votes

在使用$或jQuery的脚本之前添加jQuery库,以便可以在脚本中标识$。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
mrsrinivas answered 2020-02-13T10:02:12Z
14 votes

使用Google CDN快速加载:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Dinesh Saini answered 2020-02-13T10:02:33Z
7 votes

将此脚本添加到head标签中:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Randhir Yadav answered 2020-02-13T10:02:53Z
1 votes

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

原因可能是

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

2)在脚本看到错误后添加了库

为了解决这个问题

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

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Praveen Govind answered 2020-02-13T10:03:36Z
0 votes

jQuery是一个JavaScript库,jQuery的目的是使代码更易于使用JavaScript。

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。

它的in声明序列必须位于最上面,然后包括使用jQuery的任何其他脚本

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>
<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函数的任何其他库初始化,包括<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函数将无法在浏览器DOM中初始化,并且无法识别与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>符号开头,因此您将收到$ is not a function错误。

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>
<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 ready函数的任何库的顶部声明。

saAction answered 2020-02-13T10:06:37Z
translate from https://stackoverflow.com:/questions/22268881/referenceerror-is-not-defined