jQuery is a free JavaScript library that may be optionally installed on a webpage to provide additional functionality. For our purposes, jQuery is especially useful for detecting, changing, or extracting structured content from a webpage.

The simplest way to determine if a webpage has jQuery installed is to run the following command in the Inspector Console:

$()

The dollar sign is jQuery's shorthand method for accessing jQuery functions. If this does not work, you can also try the following:

jQuery()

If either of these commands doesn't return an error, then you can run jQuery commands on the page. The $() operator is just a shorthand version of jQuery(), so if $() is not available but jQuery() is, you can modify any command to use jQuery() instead of $(). You can also install jQuery on your own page or applications.

Including jQuery in Your Project

The simplest way to include jQuery in your project is via a CDN by appending the following JavaScript to the end of your document (just before the </body> tag):

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

By placing it at the end, we allow the content on the rest of the page to be loaded and displayed prior to jQuery being fetched and downloaded, speeding up the user's access to the content.

Querying the DOM

jQuery helps us to navigate the DOM more quickly and to find the elements or content we want. It does this by allowing us to have the DOM return elements that match a particular query. Queries can use element names, attributes, and other element features to find what we want. For example, if we wanted to return a list of all links (<a>) on a web page, we could just run the following:

$("a")

We can then use jQuery to dig into these elements further or to run functions on each element. So, if we wanted to return just the text of all links on a page, we could run the following:

$("a").text()

Or if we wanted to send the text of each link to the console, we could do the following:

$("a").each(function() { console.log($(this).text()) })

We can also use jQuery to change the contents of a webpage. For instance, if we wanted to make the text of all links on the page read "LINK HERE", we could run the following:

$("a").each(function() { $(this).text("LINK HERE") })

Attributes

You can select elements by whether or not they have particular attributes or whether their attribute values match your query. For instance, you can return all images that have an alt attribute defined as follows:

$("img[alt]")

You can also return all images that have a blank alt attribute as follows:

$("img[alt='']")

Shorthand Attribute Selectors

Perhaps the most common attributes you will use to select elements is the id and class attribute. For this reason, jQuery has a shorthand way to accessing classes similar to CSS, where the class is identified with a period and the id is identified with a hashtag.

So, if we wanted to select all <p> elements with the class "callout", we could use $("p.callout"), which is shorthand for $("p[class='callout']"), which is shorthand for the pure JavaScript document.querySelectorAll('p.callout').

Or if we wanted to select the <p> element with the ID "paragraph1", we could use $("p#paragraph1"), which is shorthand for $("p[id='paragraph1']"), which is shorthand for the pure JavaScript document.querySelectorAll('p#paragraph1).

Negative Selectors

You can also append :not to a query in order to choose the opposite. For instance, you can choose all images that do not have an alt attribute defined as follows:

$("img:not([alt])")

Nested Elements

You can find nested elements by including a space between query operators. For instance, if you wanted to find all links that are inside paragraphs, you could run the following:

$("p a")

Or if you wanted all <h3> elements inside <div> elements that have the callout class, you could run the following:

$("div.callout h3")