Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser

We've just covered how to select HTML elements using the syntax: document.getElementsByClassName. This is verbose and clunky, however. If we were to select a lot of elements this way, our code would get dense and difficult to read.

Wouldn't it be nice if there was a simpler way to select DOM elements? As you might have guessed, there is!

To better interact with DOM elements, we can use a library. A library is a set of code that contains useful pre-written functions that help with certain tasks.

A great library for interacting with the DOM is jQuery.

jQuery is a library written in JavaScript. The syntax and functions it contains will help us interact with DOM efficiently. We'll walk through a few examples in the following exercises.

In order to use jQuery, we need to:

  1. Include jQuery in our project. jQuery is a library, which means it is a set of code in a file, therefore we will need to link that file in our HTML in order to access it.

    Once we link it in our HTML file, we can use its functions and syntax in our js/main.js file.

  2. Once linked, we'll need to make sure our HTML is loaded before we run our jQuery and JavaScript code.

    This will prevent our jQuery and JavaScript code from running before the elements they select are rendered.

report a_bug
If you see a bug or any other issue with this page, please report it here.