- Understand what jQuery is, and how it abstracts vanilla JS
- How to use jQuery to Interact with the DOM
CDNContent Delivery Network
MinifiedA 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 SelectorA 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>
Think about how you would use
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:
$() 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
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.
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.
In your respective group, answer / build examples for the following questions (feel free to go more in depth if you find interesting things!):
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?
- 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
- Can you still access the
eventobject 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
- If you select multiple elements with jQuery, do you have to use a
forloop / 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
- What is
append(), and what are their differences?
- What is the difference between
parents()? Why would I want to use either?
find(). What are their use cases?
Check out this lesson plan to get more practice traversing and manipulating the DOM with jQuery.