EN

Tips・Tools you wonder if you still need

Is jQuery still necessary?

The short answer: you don't need to learn it. But being able to read it pays off. What jQuery solved, how plain JavaScript took that over, and the places you'll still run into it.

The short answer: you don’t need to learn jQuery. But being able to read it pays off. This article lays out why you can skip learning it, and why reading it is still worth something—through concrete correspondences.

What jQuery was solving

Around 2010, web development had two big annoyances.

  • Browsers wanted different code—doing the same thing often meant writing one version for Internet Explorer and another for everything else
  • Plain JavaScript was verbose—everyday things, like grabbing a set of elements and acting on all of them, took several lines

jQuery wrapped both of those in one short syntax. At the time, there was no reason not to use it.

Both of those are now solved

Browsers have converged on the same syntax, and plain JavaScript gained shorter forms. Here’s the correspondence for the things you’ll actually see.

jQueryPlain JavaScript today
$('.card')document.querySelectorAll('.card')
$('#title')document.querySelector('#title')
.text('Hello').textContent = 'Hello'
.html('<b>Bold</b>').innerHTML = '<b>Bold</b>'
.addClass('on').classList.add('on')
.removeClass('on').classList.remove('on')
.toggleClass('on').classList.toggle('on')
.on('click', fn).addEventListener('click', fn)
.attr('href', url).setAttribute('href', url)
.css('color', 'red').style.color = 'red'
$.ajax(...)fetch(...)
$(document).ready(fn)put script just before </body> (or use defer)

As you can see, it’s the same work. Only the names differ; there’s no new concept to relearn.

CourseWeb animationAdding motion with CSS, in the web animation course

Why reading it is still worth it

It’s a tool that “won’t be chosen for new work”—but it keeps running on sites already published. These are the three places you’re most likely to meet it.

  • WordPress themes and plugins—WordPress ships jQuery itself, so it’s still widely used
  • Maintaining a site built a few years ago—“could you just fix this bit?” work almost always sits on top of existing code
  • Tutorials online—older articles assume jQuery. If you can read them, you can translate as you go

So the reading skill pays off in maintenance, and the writing skill isn’t needed. Knowing that asymmetry keeps you from wasting study time.

TipsHow to read jQueryHow to read $() and method chaining, in this article

Two errors that trip people up

Just the ones you’ll meet while touching an existing site, so you can stay calm.

$ is not defined

It means your jQuery code ran before jQuery itself loaded. Fix the order of the script tags.

<!-- the library first -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- your own code after -->
<script src="script.js"></script>

On WordPress, the order isn’t decided by tag order but by declaring the dependency.

TipsThe right way to load CSS and JavaScript (wp_enqueue)Loading CSS and JavaScript properly in WordPress, dependencies included

$ doesn’t work in WordPress

To avoid clashing with other libraries, WordPress loads jQuery with the $ alias disabled. So $('.card') throws. Wrapping it like this makes $ available inside.

jQuery(function ($) {
  // $ works in here
  $('.card').addClass('is-ready');
});

This isn’t jQuery being broken—it’s how WordPress works. When you see existing theme code in this shape, that’s why.

Deciding whether to use it

SituationWhat to do
You’re learningPlain JavaScript. Skip jQuery
Building a new sitePlain JavaScript. No reason to add it
Maintaining an existing siteMatch the site. If it’s already there, use it happily
Touching a WordPress themeIf the existing code is jQuery, match it. New code can be plain JS
Following an old tutorialTranslate it and write plain JS

What you most want to avoid is mixing plain JavaScript into a site already written in jQuery, so it ends up with two styles. Within one file, matching that file’s conventions is the basis of readability.

Summary

  1. The browser differences and verbosity jQuery solved are already solved
  2. So there’s no need to learn it. Learn plain JavaScript instead
  3. But it keeps running in WordPress and existing sites—reading it keeps maintenance painless
  4. $ is not defined is load order; $ not working in WordPress is by design
  5. When touching an existing site, match that file’s conventions
CourseJavaScriptTo learn plain JavaScript from the basics, the JavaScript course

Knowing an older tool isn’t a detour. Just being able to read it widens the range of work you can take on.

FAQ

Do I need to learn jQuery now?
No. The job jQuery did—smoothing over differences between browsers—is no longer needed, and its shorter syntax has been absorbed into plain JavaScript. But it's still running in existing sites and WordPress themes, so being able to read it (not write it) keeps you out of trouble.
Is jQuery no longer used at all?
It's almost never chosen for a new site. Meanwhile it keeps running on a vast number of sites already published. So: not chosen for new work, but encountered in maintenance.
I'm getting "$ is not defined"
Your jQuery code is running before jQuery itself has loaded. Put your own script tag after jQuery's. On WordPress, the order is decided by the dependency argument of wp_enqueue_script instead.
In WordPress, $ doesn't work
WordPress loads jQuery with the $ alias disabled, to avoid clashing with other libraries. Wrapping your code as jQuery(function ($) { ... }); makes $ available inside that block.

Popular tips