jQuery Selectors — The Absolute Basics

Transitioning from vanilla JavaScript to the jQuery library

While writing a lesson on an introduction to jQuery, I noticed there wasn’t a great introductory lesson on what a jQuery selector is — not even from the jQuery documentation itself. The articles got complicated very quickly, which wasn’t suitable as any reference for a student who was on the first day of jQuery.

This article is meant to introduce someone to the jQuery selector, someone who has used vanilla JavaScript for DOM manipulation but is seeing jQuery for the first time.

Beginning with Vanilla JavaScript

Consider some basic HTML elements.

<h1>Hello jQuery!</h1>
<p class="intro-content">Let's use some selectors.</p>

The generic vanilla JavaScript approach used to select the heading (h1) element is:

document.querySelector("h1");

Similarly, if we want to select the paragraph using its class, we would use:

document.querySelector(".intro-content");

The dot in front of the word intro-content signifies we are looking for an element with that corresponding class. At the heart of it, querySelector uses a CSS selector to find the element — jQuery is very similar.

Transitioning to jQuery

Now for the jQuery. Here is that same HTML snippet again.

<h1>Hello jQuery!</h1>
<p class="intro-content">Let's use some selectors.</p>

Let’s get the heading element using jQuery. Here we can look at vanilla JavaScript and jQuery together.

// Vanilla JavaScript
document.querySelector("h1");
// jQuery
$("h1");

These two pieces of code have the same purpose! They look in the document for an h1 element and grab that element. Virtually the only difference is the dollar sign ($).

Here is the matching class selector for jQuery:

// Vanilla JavaScript
document.querySelector(".intro-content");
// jQuery
$(".intro-content");

Again, really the only difference is the $. The CSS selector (in the quotes) is the same between vanilla JavaScript and jQuery!


Return Values, Properties, and Methods

It has all been a very simple transition to jQuery so far! However, there are some things we need to watch out for when we use jQuery that often confuse beginners.

As we’ve seen, vanilla JavaScript and jQuery are able to perform the same task: get an element from the document so we can use it. Now that we want to use it, we have to pay close attention to what it actually is.

Here is that familiar HTML snippet again.

<h1>Hello jQuery!</h1>
<p class="intro-content">Let's use some selectors.</p>

If we want to work with the heading element and change the text of that element, for instance, then we use vanilla JavaScript in this way:

document.querySelector("h1").innerText = "Changed Heading!";

The vanilla JavaScript querySelector method returns a JavaScript Element object. To change the element’s text, we use the Element object’s property called innerText. The example above changes the element’s text to “Changed Heading!”.

Let’s do the same thing using jQuery.

$("h1").text("Changed Heading!");

Here we can see some major differences side-by-side, functionality being the same.

// Vanilla JavaScript
document.querySelector("h1").innerText = "Changed Heading!";
// jQuery
$("h1").text("Changed Heading!");

In jQuery, the $(“h1”) selector does not return a normal JavaScript Element object. It returns a jQuery object. This is essential.

Since we used a jQuery selector, we grabbed the heading from the document, and the jQuery selector returns a jQuery object. We can change the heading’s text, but we can only use jQuery object methods. This is why we have to use .text() instead of .innerText.

If we tried:

$("h1").innerText = "Changed Heading!";

We get a sort of silent failure. The text of the element won’t change as expected. jQuery does not let us change the text of an element using the vanilla JavaScript property of innerText.

Likewise, if we tried:

document.querySelector("h1").text("Changed Heading!");

Fire! Explosions! We get a nasty error.

Uncaught TypeError: document.querySelector(...).text is not a function

This error tells us that we are mixing vanilla JavaScript with jQuery. We tried to use a jQuery method (.text()) on a JavaScript Element object. The JavaScript Element object does not know what .text() means. It only knows what innerText means.

The moral of the story: when using jQuery, use only jQuery methods to manipulate jQuery objects.


Additional Resources (Not the Absolute Basics)

More jQuery selectors: http://learn.jquery.com/using-jquery-core/selecting-elements/

The JavaScript Element object: https://developer.mozilla.org/en-US/docs/Web/API/element

The jQuery object: https://learn.jquery.com/using-jquery-core/jquery-object/