Objectives:

By the end of this chapter, you should be able to:

• Define what jQuery is and include the jQuery library on an HTML page
• Explain what a jQuery object is and how it is different than an HTMLElement
• Use jQuery to select elements and make sure the DOM has loaded

History/Future of jQuery

jQuery is easily one of the most popular JavaScript libraries out there. It is very helpful with DOM manipulation, AJAX, and much more. Instead of using the native DOM API to interact with elements on the page, we can use jQuery to acheive the same functionality, but with an interface which is a bit easier and more friendly.

jQuery was initially released over 10 years ago and grew very quickly, as it was by far the easiest way to handle cross browser differences at the time. However, as browsers have gotten more similar, cross-browser compatibility with JavaScript has been less of an issue, and jQuery is not viewed as being as essential as it once was. Nowadays there are also other frameworks like Angular and React.js, which do not require the use of jQuery (although you can easily use it with both frameworks).

In spite of its waning popularity, jQuery is still in constant development and in use by over 70% of the top 1,000,000 websites (you can learn more about it's usage here), which makes it a really important library to learn!

Getting started

You can either download the source code for jQuery at jquery.org or you can easily include it on a page using the CDN: <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>.

The first thing you will notice with jQuery is that all of the jQuery selectors and many functions begin with a $. This is just an alias (nickname) for jQuery, which is the main function we'll be using. So if you've installed jQuery, the expression jQuery === $ will always be true!

Now that we have jQuery on a page, let's learn how to use it.

$(document).ready or $(function(){})

To make sure the DOM has loaded, we can use the $(document).ready function or use $(function(){}) as shorthand. This is

$(document).ready(function(){
    // the DOM has now loaded
});

$(function() {
    // a shorter way to wait for the DOM to load
});

document.addEventListener("DOMContentLoaded", function() {
    // a longer way to wait for the DOM to load, without jQuery.
    // jQuery's syntax is much shorter!
});

It's critical that you wait for the DOM to load before using jQuery, otherwise you might try to manipulate DOM elements that aren't on the page yet!

jQuery objects / get / selectors

To get started with jQuery, let's find some elements in the DOM! jQuery selects items from the DOM via CSS selectors (another good reason to know them well!), just like querySelector and querySelectorAll in vanilla JavaScript. One major difference between jQuery methods and the native JavaScript methods, however, is what they return to you. When you select something (in the example below this will be all the article tags), jQuery returns an (array-like) object called a jQuery object.

$(document).ready(function(){
    console.log($("article"));
});

When you examine this in the Chrome console you will see that this looks like an array with [] notation around it. Just know that you can not directly use vanilla JavaScript methods like innerText, style etc. on these. But not to worry, jQuery has all of that covered for us! You can read more about jQuery objects here.

As you start learning jQuery, you may want to 'revert' back to using native DOM methods on jQuery objects. While you can do this, there is almost always a better way to do this with jQuery. So if you find yourself doing things like this, take a step back:

$(document).ready(function(){
    var mainElement = document.getElementById('main'); // THIS IS NOT GREAT!
});

Why is the code above not great? Because we are mixing jQuery with vanilla JavaScript, when jQuery offers us a more concise syntax! So let's use jQuery selectors instead of document.getElementbyId. A cleaner version would be:

$(document).ready(function(){
    var $mainElement = $('#main'); // THIS IS MUCH BETTER!
});

Notice that we added a $ to the definition of the mainElement variable. This is very common when working with jQuery to signify that the variable is a reference to a jQuery object.

Exercises

Answer the following questions:

• What is jQuery? What does it enable you to do?
• What is the difference between a jQuery object and HTML Element?
• What does the $ represent in jQuery?

Given the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Exercise</title>
</head>
<body>
    <div id="container">
        <h1 id="welcome"></h1>
        <div class="list-container">
            <ul class="nav">
                <li class="nav-item">Home</li>
                <li class="nav-item">About Us</li>
                <li class="nav-item">Contact</li>
                <li class="nav-item">Careers</li>
                <li class="nav-item">Apply</li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="footer-container">
            <ul class="footer-nav">
                <li class="footer-nav-item">Learn More</li>
                <li class="footer-nav-item">Blog</li>
                <li class="footer-nav-item">Email Us</li>
            </ul>
        </div>
    </footer>
</body>
</html>

Write the jQuery selectors/code to do the following

• Write the necessary to code wait for the DOM to load in jQuery.
• Select the footer element.
• Select the div with an id of "container".
• Select all of the lis inside of the ul with a class of nav.
• Select the third li inside of the div with a class of list-container.
• Select only the last li in each of the uls.

For solutions to these exercises, click here.