ReferenceError: $ 未定义

Question

I have this error message ReferenceError: $ is not defined
This is my header.

<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>

Following is my JavaScript code

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

Following is the 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>

I want to show datepicker on the input tag.
I am using Bootstrap V3.1.
I am using 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

It's one of the common mistake everybody make while working with jQuery, Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function will endup throwing this error.

Reasons might be

1) Path to jQuery library you included is not correct.

2) Added library after the script were you see that error

To solve this

Load the jquery library beginning of all your javascript files/scripts.

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

Answer 5

jQuery is a JavaScript library, The purpose of jQuery is to make code much easier to use JavaScript.

The jQuery syntax is tailor-made for selecting, A $ sign to define/access jQuery.

Its in declaration sequence must be on top then any other script included which uses jQuery

Correct position to jQuery declaration :

 $(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>

Above example will work perfectly because jQuery library is initialized before any other library which is using jQuery functions, including $

But if you apply it somewhere else, jQuery functions will not initialize in browser DOM and it will not able to identify any code related to jQuery, and its code starts with $ sign, so you will receive $ is not a function error.

Incorrect position for jQuery declaration:

 $(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>

Above code will not work because, jQuery is not declared on the top of any library which uses jQuery ready function.

Answer 6

Though my response is late, but it can still help.

lf you are using Spring Tool Suite and you still think that the JQuery file reference path is correct, then refresh your project whenever you modify the JQuery file.

You refresh by right-clicking on the project name -> refresh.

That's what solved mine.

Answer 7

这可能是由于两个不同jquery版本的jquery冲突使用noconflict方法