jQuery / Load jQuery in HTML and Start Using It

Load the jQuery file through script before executing code that uses it. You can reference a CDN or a downloaded local file. Library availability and HTML element readiness are separate requirements, and both must be satisfied.

Choose the file and execution order

jQuery is a JavaScript library. Reference it with the script element and src, then select elements and call methods. No special jQuery HTML tag, npm installation or build tool is needed for these exercises.

The example pins the ordinary script build 4.0.0 from the official downloads. min means compressed, not a different feature set. Slim omits Ajax and effects; choose according to subsequent needs. The immediate show/hide example below uses neither timed effects nor Ajax.

Load the intended jQuery once per page. Adding another copy to an existing site can separate plugins and data across instances. Verify an independent example before examining your site’s dependencies.

Complete one-file CDN example

A CDN, Content Delivery Network, serves files externally. Save the code as UTF-8 cdn-demo.html and open it in a browser with Internet access. No server or installation is needed. Choose the version and ordinary script format from the official CDN list. This example was executed in Windows Edge with 3.7.1 and 4.0.0 separately.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Load jQuery and use it</title>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});
  </script>
</body>
</html>

Successful execution produces this output. Waiting for scripts. belongs to the original HTML; only running the jQuery code changes it to ready=true.

ready=true
message visible=true
clicks=0

1. Toggle message hides the paragraph: message visible=false, clicks=1.
2. Activate again to show it with clicks=2. aria-expanded follows visibility. Focus the button and use Enter for keyboard activation.
3. Reset restores the message and zero counter without reloading.

The ordinary script after jQuery runs dependent code. The DOM-ready callback jQuery(function ($) { ... }) waits until the Document Object Model can be manipulated. Local $ is jQuery. It does not wait for the jQuery file itself to download; calling it before the library is available fails.

Local files with ordered defer

Download the same version from the official site to avoid an external CDN dependency. Place index.html and app.js together, with jquery-4.0.0.min.js in a vendor subfolder. Check actual extensions rather than accidentally saving .js.txt.

1. Save the downloaded library as vendor/jquery-4.0.0.min.js. Do not overwrite its contents with app.js.
2. Save the following complete HTML as index.html. ./vendor/ is relative to that HTML file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local jQuery with ordered deferred scripts</title>
  <script defer src="./vendor/jquery-4.0.0.min.js"></script>
  <script defer src="./app.js"></script>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
</body>
</html>

Save this entire JavaScript as app.js beside index.html, without script tags.

jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});

Opening index.html produces the same result, verified with the actual local 4.0.0 file in Windows Edge. After preparing the files, the exercise needs no external CDN.

ready=true
message visible=true
clicks=0

Ordinary external deferred scripts run after HTML parsing in document order: library first, app second. async runs when downloads finish and does not preserve this dependency order. Adding defer to inline code does not reproduce the arrangement; use the external app file shown.

Verify loading and diagnose failures

In developer tools, check typeof window.jQuery is function and jQuery.fn.jquery is the intended version. If the first is undefined, solve loading before reading version properties. Inspect the actual .js URL, response and contents in Network; an HTML error page returned under a .js name is not a loaded library.

For “jQuery is not defined,” inspect path, network blocking and order. Deliberately blocked CDN loading leaves this demo at Waiting for scripts. while the plain paragraph remains visible. Locally check case, directories and extensions. HTTPS/HTTP mixing and script policies also leave evidence in Network and Console.

For “$ is not a function,” check another library’s ownership too. Correct loading cannot fix a wrong id or duplicate event binding. Diagnose file availability, element selection and event execution separately.

Before deploying, check version changes and dependent plugins, preserving the previous connection for recovery. In a CMS or framework that manages jQuery already, inspect registration and dependency order before adding the example CDN.