ReferenceError：$未定义

Question

我收到此错误消息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>

我想在输入标签上显示datepicker 我正在使用Bootstrap V3.1 我正在使用this datepicker

Answer 1

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

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

Answer 2

使用Google CDN快速加载：

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

Answer 3

在head标签中添加此脚本：

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

Answer 4

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相关的任何代码，并且其代码以$符号开头，因此您将收到{{ 1}}错误。

jQuery声明的位置错误：

$ is not a function

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

以上代码将不起作用，因为在使用jQuery ready函数的任何库的顶部都未声明jQuery。

Answer 5

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

原因可能是

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

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

要解决此问题

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

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

Answer 6

尽管我的回复迟了，但仍然可以帮上忙。

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

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

那是我的解决方案。