jQuery vs Vanilla JS

When jQuery is still the right tool — and when it isn't.

Visual explanation diagram · click steps to walk through it

Definition

jQuery vs vanilla JS — both can do everything the other can. jQuery is a wrapper that gives you a concise, chainable, cross-browser-safe API. Vanilla JS is the platform itself: zero dependencies but more verbose, slightly inconsistent across browsers at the edges, and occasionally surprising.

Cheat Sheet — Side by Side

Task	jQuery	Vanilla JS
Select	`$('.card')`	`document.querySelectorAll('.card')`
Text	`$('h1').text('Hi')`	`h1.textContent = 'Hi'`
HTML	`$('#o').html('<b>hi</b>')`	`o.innerHTML = '<b>hi</b>'`
Class	`$el.addClass('done')`	`el.classList.add('done')`
Event	`$('#b').on('click', fn)`	`b.addEventListener('click', fn)`
Delegation	`$p.on('click', '.x', fn)`	`p.addEventListener('click', e => e.target.matches('.x') && fn(e))`
AJAX	`$.get('/x', render)`	`fetch('/x').then(r=>r.json()).then(render)`
Animate	`$el.fadeIn(300)`	`el.animate([{opacity:0},{opacity:1}], 300)`

Conceptual Differences

jQuery always returns a jQuery object, which is chainable. querySelectorAll returns a NodeList, which you must .forEach(...) over.
jQuery abstracts events — e.target is normalised, which works in IE. Vanilla relies on the spec.
jQuery collapses many elements to one call — $('.row').addClass('on') operates on the whole set; in vanilla you must iterate.

Which Should You Pick?

Shipping a fix into WordPress, Bootstrap 4, or any legacy page that already loads jQuery? → Use jQuery. Match the existing code style.
Greenfield React / Next / Vue app? → Vanilla JS and the framework's own patterns.
One-off small landing page? → Both work. Pick whatever your team reads fastest.

Key Takeaways

Everything jQuery does, vanilla JS can also do — but usually with more lines.
jQuery returns a chainable wrapper; vanilla returns raw DOM nodes or NodeList.
jQuery hides browser quirks; modern vanilla JS is already close to cross-browser safe.
Event delegation in vanilla JS needs e.target.matches(selector) — jQuery bakes it in.
Rule of thumb: match the existing codebase and you'll be right 90% of the time.

Interview Questions

Practice Questions

Pick one snippet from the cheat sheet and write BOTH versions in a runnable HTML page.
Convert a file in your project from jQuery to vanilla — note everything you had to expand.
Benchmark $('.card') vs querySelectorAll('.card') in DevTools — they should be within microseconds.

Pro Tips

Do not mix the two styles in one file — future maintainers will hate you.
If you find yourself writing Array.from(nodes).forEach(...) 10 times, jQuery probably isn't overkill.
Test both in DevTools' Console first — fastest feedback loop.

AI-powered recap