JavaScript ReferenceError：$ is not defined 求助：脚本无法运行

Hey there! That ReferenceError: $ is not defined error is one of the most common gotchas when working with jQuery (since $ is jQuery's go-to shorthand). Let's walk through the most likely causes and how to fix them quickly:

1. jQuery isn't loaded (or loaded too late) #

The core issue here is that your script is trying to use $ before jQuery itself has been loaded into the page. To fix this:

• Always include the jQuery script before your custom JavaScript code. Here's the correct order:

  <!-- First load jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <!-- Then load your custom script -->
  <script src="your-custom-script.js"></script>
  

• Double-check the jQuery URL for typos, or if you're using a local file, verify the file path is correct (e.g., src="js/jquery.min.js" if the file lives in a js folder).
• You can confirm jQuery loaded successfully by opening your browser's DevTools Console and typing jQuery — if it returns a function instead of undefined, it worked.

2. Your code runs before the DOM (and jQuery) is ready #

Even if jQuery is loaded, if your code executes before the page finishes loading, you'll still get this error. Use one of these approaches to wait for the DOM to be ready:

• Wrap your code in jQuery's ready handler:

  $(document).ready(function() {
    // All your jQuery code goes here
    $(".my-element").hide();
  });
  

• Or use the shorter, more common shorthand:

  $(function() {
    // Your code here works the same way
    $(".my-element").show();
  });
  

• Alternatively, move your script tags to just before the closing </body> tag — this ensures all page elements and scripts are loaded before your code runs.

3. There's a conflict with another library #

If your page uses other JavaScript libraries (like Prototype, MooTools, etc.) that also use $ as a shorthand, they'll clash with jQuery. Fix this by:

• Using jQuery.noConflict() to release the $ variable for other libraries, then use jQuery instead of $:

  jQuery.noConflict();
  jQuery(document).ready(function() {
    jQuery(".my-element").addClass("active");
  });
  

• Or keep using $ inside your ready function by passing it as a parameter:

  jQuery.noConflict();
  jQuery(document).ready(function($) {
    // $ works normally here without conflicts
    $(".my-element").addClass("active");
  });
  

4. Check for network issues (if using a CDN) #

If you're loading jQuery from a CDN (like the jQuery official CDN), make sure your internet connection is working, and that the CDN URL isn't blocked. You can test this by visiting the CDN URL directly in your browser — if it loads, the issue is elsewhere.

内容的提问来源于stack exchange，提问作者Maria Cecilia