Adding jQuery to a page: jQuery

By the end of this lessonLoad jQuery on any page in the right place, confirm which version is running, and pick the right build for the job.

One script tag

jQuery is a single JavaScript file. To use it, load it with a <script> tag, and then load your own code after it:

html

<h1>jQuery is ready</h1>
<p id="version"></p>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#version").text("Running jQuery " + $.fn.jquery);
  console.log("Version:", $.fn.jquery);
</script>

result

Version: 4.0.0

$.fn.jquery is a property that holds the version number of the jQuery that is running. It is handy when you take over a site and need to know whether it uses jQuery 1, 3 or 4.

The first <script> loads the library. The second is your own code. The order matters: the browser runs scripts from top to bottom, and your code can only use $ once the library has run.

Where to put the tags

The usual place is just before </body>:

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>

  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script src="js/site.js"></script>
</body>
</html>

At that point every element above has been parsed, so your code can find it. Scripts at the bottom also let the page appear before the JavaScript downloads.

You can put the tags in the <head> instead, but then your code runs before the body exists, so you must wait for the page to be ready (the next lesson shows how) or add the defer attribute to both script tags. defer downloads the files in parallel and runs them in order after the page is parsed.

What happens when it is missing

Here the order is wrong: our code runs before jQuery loads.

html

<p>Watch the console.</p>

<script>
  $("p").text("Changed");
</script>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>

result

Watch the console.
ReferenceError: $ is not defined

ReferenceError: $ is not defined is the most common jQuery error of all. It means one of three things: the jQuery file was not loaded, it was loaded after your code, or the address is wrong (open the browser's Network tab in the developer tools and look for a failed request).

CDN or your own copy

The example above loads jQuery from code.jquery.com, the official content delivery network (CDN) run for the jQuery project. You have three choices:

The official CDN. Nothing to download or host. Pin an exact version (jquery-4.0.0.min.js), never a "latest" address, so an update cannot surprise you.
Your own server. Download the file from jquery.com and save it, for example as js/jquery-4.0.0.min.js. This keeps working if a CDN is blocked, and you control exactly what loads. Many sites prefer this for privacy, because no third party sees your visitors' requests.
A package manager, for projects with a build step:

bash

npm install jquery@4.0.0

javascript

import $ from "jquery";

$("h1").addClass("ready");

Subresource integrity

When you load a file from another server, you can ask the browser to check that it has not been changed. The integrity attribute holds a hash of the exact file, and the browser refuses to run it if the hash does not match:

html

<script
  src="https://code.jquery.com/jquery-4.0.0.min.js"
  integrity="sha384-fgGyf7Mo7DURSOMnOy7ed+dkq5Job205Gnzu6QIg0BOHKaqt4D76Dt8VlDCzcMHV"
  crossorigin="anonymous"></script>

That hash is for the jQuery 4.0.0 minified file. The code.jquery.com page shows the right tag for every version, so copy it from there rather than typing it.

Full, minified and slim builds

For each version, the jQuery site offers several files:

File	What it is
`jquery-4.0.0.js`	Full build, readable source. Good for learning and debugging.
`jquery-4.0.0.min.js`	Full build, minified: same features, much smaller download. Use this on live sites.
`jquery-4.0.0.slim.min.js`	Slim build: leaves out Ajax, effects (animations) and Deferreds.

The slim build is smaller, but if you call $.ajax() or .fadeIn() with it, you get an error that the method does not exist. This course uses the full build throughout. Choose slim only for a page that just selects elements and handles events.

Check what a site is running

On any site, open the developer tools (F12), go to the Console tab and type:

javascript

jQuery.fn.jquery

If jQuery is loaded, you see its version. If you see jQuery is not defined, the site does not use it, or it has not loaded on that page.

Common mistakes

Loading your script before jQuery. Always library first, your code second.
Loading jQuery twice. Two copies (often a theme and a plugin both adding one) waste bandwidth and can wipe out plugins that attached to the first copy. Load it once.
Using a "latest" URL. Pin an exact version so your site does not change under you.
Using the slim build and then calling Ajax or animations.

Exercise

Write a page that loads jQuery from the CDN, then shows the jQuery version inside an <h2> element and logs the word ready to the console.

Show one possible answer

html

<h2 id="v"></h2>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#v").text("jQuery " + $.fn.jquery);
  console.log("ready");
</script>

Key points

Load jQuery with a script tag before any script that uses it, usually just before the closing body tag.
The official CDN address for this course is https://code.jquery.com/jquery-4.0.0.min.js; you can also download the file and serve it yourself.
jQuery.fn.jquery (or $.fn.jquery) tells you which version is running.
The slim build leaves out Ajax, effects and Deferreds, so use the full build unless you are sure you do not need them.

One script tag

Where to put the tags

What happens when it is missing

CDN or your own copy

Subresource integrity

Full, minified and slim builds

Check what a site is running

Common mistakes

Exercise

Key points

Check yourself