jQuery Intro - DOM Traversal, Manipulation, and Events

Learning Goals

  • Understand what jQuery is, and how it abstracts vanilla JS
  • How to use jQuery to Interact with the DOM

jQuery is a library that allows us to use CSS selectors to find elements on the page and then interact with them. Under the hood, it’s JavaScript. It’s used on about 80% of the top million web pages, so it’s worth while getting comfortable with it.

Vocab

  • jQuery A library built to get around the pain points of early Javascript
  • CDN Content Delivery Network
  • Minified A file that the browser can still interpret correctly, but has none of the bits helpful to humans. Used to reduce the size of a file
  • CSS Selector A description of how to find an element on the page

Loading the jQuery library

To use the jQuery library, you’ll need to include the following lines in your HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery.min.js"><\/script>')</script>

Let’s talk about what’s going on here:

In the first line, we’re linking to the Google-hosted CDN (Content Delivery Network) for jQuery. Both Google and Microsoft host the jQuery library, and for our purposes we’ll go ahead and stick with the Google link. In this link, we can see which version of jQuery we’re using, which is 3.4.1 (as of the writing of this lesson).

In the second line, we’re including a link to a local set of jQuery files that we’ve downloaded to our machine and included in the directory for our project. This line isn’t strictly required for us to use jQuery, but rather is a fallback to make sure that we can still access the library in the event that we are unable to access the CDN for some reason (better safe than sorry, right?). You can download a copy of jQuery here. Note: be sure to download the same version that you’re referencing in the Google CDN link.

Note: If you look at the file extension you’ll see the file says jquery.min.js - that min extensions indicates that its a minified version of the jQuery library. jQuery is a large library, and in order to maximize performance (especially on larger code bases), reducing how much space your code takes up is incredibly important. A minified file indicates that it has been abbreviated using one of many different encryption techniques. You can read more about it in this Wikipedia article if you are interested in the what and why of minification.

First Lines of jQuery

Let’s say that we have a page with the following markup:

<h1 class="important-header">Dinosaurs are awesome.</h1>

Just like with plain ol’ JavaScript, jQuery lets us change the text programatically. The neat thing about jQuery, though, is that it significantly reduces the amount of code we have to write.

Think about how you would use innerText to change the content in an HTML page with JavaScript. With vanilla JavaScript, you would have to write:

document.querySelector('h1').innerText = 'I AM A DINOSAUR.'

Now, take a look at the same line of code in jQuery:

$('h1').text('I AM A DINOSAUR.');

See how much simpler jQuery makes the process?

jQuery Selector / Object

Whenever we use jQuery to do something on the DOM, we’ll start by using this function:

$("[selector]")

$() is known as the jQuery function.

We can put a CSS Selector (or combination of selectors) in to this function to grab element(s) off of the DOM.

The jQuery function returns what’s known as a jQuery object. You can think of this as being analogous to the Element that .querySelector returns.

The jQuery function can also be used to turn a query selected element into a jQuery object

let mainHeading = document.querySelector('h1');
$(mainHeading).text('Hello World');

// Works the same as:

$('h1').text('Hello World');

// However, this won't work:
mainHeading.text('Hello World')

The jQuery object contains a series of methods (such as .text()) that we can use to do a variety of things on the DOM, including:

  • Respond to user events
  • Modify page content (text, styling, etc)
  • Traverse the DOM

among others. Rather than spell out the syntax for everything jQuery can do, we’re going to let you do some research and teach the class your findings.

jQuery Jigsaw

The next part of this lesson will be set up as a jigsaw. This will be good practice for how you can approach learning new topics on the job, especially when there won’t be someone to formally teach you.

Everyone will be split into four groups, each responsible for researching one of the following:

  • jQuery selectors and the jQuery Object
  • Responding to events
  • DOM traversal
  • Getting and setting content on the page

Each group will have time to research a series of questions, and create a guide with examples in repl or codepen, which they will then present to the class. Starters for your repl or codepen can be found here.

For the presentations, feel free to put together whatever format works best for the group (gist / markdown file with links to examples, everything in a codepen with examples, everything in a repl.it with examples, etc). Just make sure you have examples to demo.

We’ll research / prep for 30 - 40 minutes, then each group will take 10 minutes to present and answer questions.

Research Questions

In your respective group, answer / build examples for the following questions (feel free to go more in depth if you find interesting things!):

Selectors

For the following questions, be sure to compare how you would perform the action in vanilla JS as well as with jQuery.

  • How do you select a single element in jQuery? How does this differ from vanilla JS?
  • What does the jQuery function return? How is it similar or different from a DOM Element object?
  • How can you select multiple elements with jQuery?
  • How can you select multiple elements with different IDs and classes in one selector expression?
  • What are the different ways of chaining selectors?
  • How do you select elements based on different attributes?
  • How do you select a checkbox based on its state?
  • What are some important “gotchas” to be wary of with jQuery objects?

Events

  • What method(s) allows us to listen for / respond to an event with jQuery?
  • Which method allows us to listen to any kind of event? How do you specify the event?
  • How do you take advantage of event delegation with jQuery? How is it different from vanilla JS event delegation?
  • How do you determine which element fired the event in a jQuery event listener? How is this different from finding the element that fired an event in vanilla JS?
  • What’s the difference between this and $(this)?
  • Can you still access the event object within a jQuery event listener?

Getting and Setting Content

For all applicable questions, compare and contrast using jQuery and vanilla JS.

  • How do you get the text from an element (like a paragraph) with jQuery??
  • How do you set the text of an element (like a paragraph)?
  • How do you get the text / content from an input?
  • How do you set the text / content of an input?
  • How do you add / remove / toggle classes on an element?
  • What’s the difference between .text() and .text([text])?
  • If you select multiple elements with jQuery, do you have to use a for loop / iterate through each to modify their content? Give an example.

Traversing the DOM

For all applicable questions, compare and contrast using jQuery and vanilla JS. Get some practice reading the jQuery docs.

  • Describe what DOM traversal is and why it is useful.
  • What can the siblings(), parent(), and children() methods do?
  • What is prepend(), append(), and what are their differences?
  • What is the difference between parent() and parents()? Why would I want to use either?
  • Describe closest() and find(). What are their use cases?

Extra Practice

Check out this lesson plan to get more practice traversing and manipulating the DOM with jQuery.

Lesson Search Results

Showing top 10 results