jQuery Class Selectors vs. JavaScript Class Selectors

tl;dr:

• JavaScript ID selectors apply things() to the first found element on a web page.

• JavaScript class selectors returns an array of elements with a specified class name. You’ll need to iterate over that array to actually do things().

• jQuery ID selectors apply things to the first found element on a web page; this behavior is the same as the JavaScript equivalent (look up ^).

• jQuery class selectors also returns an array of elements with a specified class name, but allows you to instantly do things() to each selected element all at once in a single statement.

---

Today, I started relearning jQuery. I knew it at some point and then forgot all of it (happens with age, I hear). In my very base-level studies, I found that I couldn’t remember how jQuery handles class selectors. Classes are meant to be used more than once across many items in a single page; ID’s are meant to be completely unique, as the name would imply. I remembered struggling with selecting classes in vanilla JavaScript using document.getElementsByClassName() because this built-in method returns an array of matches that absolutely MUST be iterated over, otherwise the browser has no idea what action to apply to which DOM element.

In JavaScript, using getElementsByClassName() returns an array that needs to be iterated over. If you’re trying to make everything with a specific class name bold, for example, you need to do something similar to the following:

let thingsToEmbolden = document.getElementsByClassName(‘myCoolClass’);
 for (let i = 0; i < thingsToEmbolden.length; i++) {
 	thingsToEmbolden[i].style.fontWeight = ‘bold’;
 }

If you’re new to JavaScript (or just lazy like myself), this seems like a lot of work for a relatively simple task. We are getting all the things with class name ‘myCoolClass’…isn’t it implied that we want to do the same thing to all elements with that class name? Why can’t I just do that and tell it to do one thing, thus having the thing() do things to all things with that class name?

The answer: JavaScript is a magical, mystical wonderland that no one will ever understand. Just kidding.

In my current state of learning jQuery, I wondered if a class selector did the same type of thing. Short answer: nope!

Longer answer: I did some testing, which you can also play with on this codepen, and found that jQuery lives up to its reputation as a madly simplified JavaScript library. Allow me to explain:

JavaScript requires the code in the above block to do a thing() to every element identified with a class name using the .getElementsByClassName() selector. Using the $(.className) selector in jQuery, we can apply a cool thing() to each element with class=”className” in a single, simple line. Thus, the above snippet can be reduced to the following with jQuery:

$(.myCoolClass).css(‘fontWeight’, ‘bold’);

…that’s literally it.

And jQuery has a whole library of awesome, simplified methods that you can use as shorthand to the built-in (but sometimes grueling) methods in JavaScript. .style.fontWeight = ‘bold’ is to JavaScript as .css(‘fontWeight’, ‘bold’) is to jQuery. Good stuff.

This got me thinking a bit further on how ID’s are handled in vanilla JavaScript vs. jQuery. In JavaScript, selecting an element by ID is done with the following: document.getElementById(‘myCoolId’). jQuery; $(‘# myCoolId’). JavaScript: any trailing methods applies only to the first found DOM element. jQuery: the same (though, PLEASE, never apply the same ID to more than one DOM element. That’s the easiest way to make zero friends as a front-end developer).

Synopsis: jQuery is great for writing JavaScript in half the amount of time. I’m really glad to have found that class selectors and the following methods apply to all classes without the need for iterative features. Efficient is effective. jQuery is great. I digress.