Uncaught ReferenceError: $ is not defined

jQuery is a JavaScript library and the purpose of jQuery is to make code much easier to use JavaScript. When you are working with the jQuery library , then there is a pretty good chance that you will encounter the following jQuery/JavaScript error at some point in time:
What is jquery Uncaught ReferenceError: $ is not defined
Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn't loaded yet.

To solve this error:

Load the jQuery library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts . example In the following code, you can see that the jQuery library is loaded after the script. So, you will get "$ is not defined" error.
<!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("p").click(function(){ alert("You Clicked...."); }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <p>Click Here...</p> </body> </html>
In order to fix this error, include the jQuery library file before the JavaScript code.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ alert("You Clicked...."); }); }); </script> </head> <body> <p>Click Here...</p> </body> </html>
run this source code Browser View

Click Here...

There can be multiple other reasons for this issue:

Working offline


How to solve Uncaught ReferenceError: $ is not defined
There may be a chance where you are working offline but trying to loading or referring the jQuery code from internet . In this case, there is a problem with the internet connection and jQuery will not load from the CDN . In this case, you can simply download the jQuery.js and use it locally rather then downloading from internet and use the code below to load jQuery locally :
<script src="/js/jquery.min.js"></script>

Conflict with Other Libraries

As you already know jQuery uses the $ sign as a shortcut for jQuery. There are many other popular JavaScript frameworks like: Angular , Backbone, prototype.js, MooTools, and more. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. By using noConflict() you can of course still use jQuery, simply by writing the full name (jQuery) instead of the shortcut:
<script> $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); }); </script>

Path to jQuery library you included is not correct

You might have put an incorrect path to jQuery library , or there may be typo in your file.
<script src="ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
The above code does not include the HTTP: or HTTPS: in the src attribute but the browser, FireFox, needed it so you should changed it to:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The jQuery library file is corrupted

If the jQuery library file has been downloaded from an untrustworthy sites and the file is corrupted, this error may happen.
Download Query CDN

Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Microsoft CDN

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>