jQuery Setup

Loading jQuery Into a Page

There are two ways to load jQuery:

1. Download jQuery and put it in with your site’s JavaScript files.
2. Load it from a CDN

Loading from the CDN

Most people choose to load it from a CDN. The jQuery CDN allows you to choose which version you want to use.

1. Go to the jQuery CDN page: https://code.jquery.com/
2. Choose your version. If you don’t have a reason to use an older version, then choose the latest minified.
   1. The latest has two minifieds: minified and slim minified. The slim is a smaller filesize but does not include AJAX, animation and effects.
3. Copy the script tag that pops up when you click on a version.
4. Paste the script tag into your HTML right before the closing </body> tag.
   1. When using 11ty, this would usually be in the base.njk template so it is available to all pages.

It should look something like this:

Here is an example

  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
</body>

External JavaScript File

Most of the time you will write your JS code in its own file. this file should the be included by using a <script> tag that comes right after the previous one to include the jQuery library. Also, it’s common practice to put your JavaScript files in a js folder.

For example:

Here is a code example with both jQuery and the external file (script element for external js file in bold).

  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  <script src="/js/main.js"></script>
</body>

It’s important for your main.js file to be included AFTER jQuery so it can use jQuery code.

When using 11ty, you usually also put the <script> tag in the base.njk file so it will be included on each page. If you want some JavaScript to just run on one page, then you can create a separate layout file for that page and put the script tags in that file.

Writing Code

Once jQuery library has been loaded onto the page, you can write jQuery code. Most of the time you want to wait until the page elements have loaded before running your code. There are three different ways you may see to set up jQuery code to run.

All of these would go in the external JavaScript file created above.

1) Classic Version

How people

$(document).ready(function() {
  // do stuff when DOM is ready
});

2) New Version

This just uses less code and is the same thing.

$(function() {
  // do stuff when DOM is ready
});

We will usually use the classic version in class simply because it’s easier for beginners to read and know what it’s doing.

3) Minimize impact on other Libraries

This is NOT the same as the other two. The code in here will run immediately and not wait for the DOM to load. It has a different purpose. It’s there to prevent jQuery from clashing with another library. jQuery uses the $ dollar sign to start all of its statements. it’s possible for another library to use these as well so people will use this syntax below to prevent that.

Technically this is called an anonymous function.

(function($) {
  // do stuff immediately!
})(jQuery);