jQuery was revolutionary. In 2006, it gave us a sane way to write JavaScript that worked across all browsers. It taught an entire generation of developers how to think about DOM manipulation, events, and AJAX.

But here's the thing: the browsers learned from jQuery. Almost everything jQuery made easy is now easy in vanilla JavaScript. Let's take a tour.

Selecting Elements

Remember when selecting elements required different code for different browsers? jQuery's $() was a lifesaver.

querySelector and querySelectorAll accept any valid CSS selector. They work in every browser, including IE9+.

Pro tip: Create a short alias if you miss the $() syntax:

Event Handling

jQuery's .on() was beautiful. Good news: native event handling with addEventListener is just as nice now.

DOM Ready

$(document).ready() was essential. But do you actually need it?

With ES modules, your scripts are deferred automatically. By the time they run, the DOM is ready. No wrapper needed.

Class Manipulation

jQuery made adding and removing classes trivial. Now classList does the same thing natively.

AJAX / Fetch

jQuery's $.ajax() was legendary. No more XMLHttpRequest nightmares. Today, the Fetch API is even cleaner.

fetch() returns a Promise, so you can use async/await or .then() chains. It's cleaner, more powerful, and built right in.

Animations

jQuery's .animate(), .fadeIn(), and .slideDown() were magical. CSS handles most of this now, but for complex animations, the Web Animations API is native JavaScript.

Creating Elements

jQuery made it easy to create and insert HTML. Template literals make vanilla JS just as readable.

Traversing the DOM

jQuery's traversal methods had great names. The native equivalents are just as capable, if slightly more verbose.

The .closest() method is particularly nice—it's exactly like jQuery's version, accepting any CSS selector.

When You Actually Need jQuery

I'm not saying jQuery is bad or that you should rewrite existing codebases. Here are valid reasons to keep using it:

  • You're maintaining a legacy application that already uses it
  • You need to support very old browsers (IE8 and below)
  • Your team is more productive with it
  • You're using jQuery plugins that have no vanilla equivalent

But for new projects? You probably don't need it. The platform caught up. jQuery taught the browsers well.

The Real Legacy

jQuery's greatest contribution wasn't the code—it was the ideas. The browser vendors looked at what developers wanted and built it natively:

  • $() → querySelector()
  • .on() → addEventListener()
  • .addClass() → classList.add()
  • $.ajax() → fetch()
  • .animate() → CSS animations & Web Animations API

jQuery won by making itself unnecessary. And that's a beautiful thing.

Further Reading