You don't always need jQuery

Disclaimer: Pretty introductory Javascript follows. If you were looking for advanced tips, migration techniques and the like, check directly the links at the end of the article.

It's been at least one year since I last touched client-side javascript. Back then, we were quite pragmatic and relied on jQuery for most Javascript tasks; it's easy, quite well documented and has really good maintenance, bugfixing and updates. But I was also either using it or ZeptoJS even for tiny personal projects, so the other day I thought: "maybe vanilla Javascript and its query selectors are enough for simple tasks".

Chrome and Firefox have always been quite fast adopting changes, but the burden of Internet Explorer was ever-present. Now that everything below IE8 (and soon IE9) is considered not worth the effort and even mobile phones ar on par, I decided to do some small tests. And my results cannot be more satisfying... For trivial stuff you no longer need to rely on jQuery at all.

I'll simply provide four small code examples to summarize the scenarios I had to change: Clicking things, attaching events (with and without delegation/bubbling up), selecting N items and showing/hiding nodes. There are many scenarios where jQuery is of use or maybe not so easily replaceable, but for quick PoCs, pet projects and internal tools... .

Click on a node

jQuery
$("myId").click();

Vanilla

document.getElementById("myId").click();

Show/Hide

jQuery

function ToggleSection(eventData) {
$("p").each(function (index) {
$(this).hide();
});
$("s" + eventData.currentTarget.id).show();
}

Vanilla

function ToggleSection(eventData) {
var i, len, $p = document.querySelectorAll("p");
for (i = 0, len = $p.length; i < len; i++) {
$p[i].style.display = 'none';
}
document.getElementById("s" + eventData.target.id).style.display = 'block';
}

Attach event handlers

jQuery

$("h3").each.on("click", ToggleSelection);

Vanilla

var i, len, $h3 = document.querySelectorAll("h3");
for (i = 0, len = $h3.length; i < len; i++) {
// Option A: Overriding previous handlers
// $h3[i].onclick = ToggleSection;
// Option B: Adding a handler keeping existing ones
$h3[i].addEventListener("click", ToggleSection);
}

Attach event handlers (event delegation)

jQuery

$("#bookmarks").on("click", "h3", ToggleSelection);

Vanilla

document.getElementById("bookmarks").onclick = function(eventData) {
var target;
eventData = eventData || event;
target = eventData.target || eventData.srcElement;
if (target.nodeName == 'H3') {
ToggleSection(eventData);
return false;
} else {
return;
}
};

I have omitted other query selectors and additional properties but Mozilla Developer Network has really good documentation for them.

A few related articles:

• Post series with very detailed guides of migrating out from jQuery
• A Sitepoint article that is a great source of DOM manipulation basics with vanilla JS (2017)
• (Now More Than Ever) You Might Not Need jQuery (2017)
• Another big list of equivalents in vanilla JS: You Don't Need jQuery (2019)
• Cheat-sheet for moving from jQuery to vanilla JavaScript (2019)

Update #1: Added .addEventListener alternative to .onclick to keep existing handlers. Thanks @JohnHackworth.

Update #2: Added an excellent and way more complete reference at the end.

Update #3: Added another nice article link.

Update #4: Added yet another in-depth article link.

Update #5: Added greatly detailed resource link.

Update #6: Added a cheat-sheet.