jQuery vs Vanilla JavaScript

jQuery became popular because it smoothed over inconsistent browser APIs and gave developers a short, readable syntax for common tasks. Modern browsers have since adopted most of those conveniences natively, so vanilla JavaScript (plain JS with no library) can now handle almost everything jQuery does — often with a similar amount of code. Below are side-by-side comparisons of the patterns you've already learned.

1) Selecting Elements

jQuery's $() wraps matched elements in a jQuery object with helper methods. Vanilla JS's querySelectorAll() accepts the same CSS selectors and returns a static NodeList.


// jQuery
var items = $('.item');

// Vanilla JS
var items = document.querySelectorAll('.item');
Try it Yourself »

2) Event Handling

jQuery's .on() and vanilla's addEventListener() both attach a handler without overwriting any handler already bound to the element.


// jQuery
$('#btn').on('click', function(){
  console.log('clicked');
});

// Vanilla JS
document.getElementById('btn').addEventListener('click', function(){
  console.log('clicked');
});
Try it Yourself »

3) Class Manipulation

jQuery's class helpers map almost one-to-one onto the native classList API built into every modern element.


// jQuery
$('#box').addClass('active');
$('#box').removeClass('active');
$('#box').toggleClass('active');

// Vanilla JS
var box = document.getElementById('box');
box.classList.add('active');
box.classList.remove('active');
box.classList.toggle('active');
Try it Yourself »
Tip: Notice vanilla JS needs one extra step — grabbing the raw element first (getElementById/querySelector) — before calling DOM methods on it. jQuery bakes that lookup into $() itself.

4) AJAX: $.getJSON() vs fetch()

jQuery's AJAX helpers use callbacks; the native fetch() API returns a Promise, which pairs naturally with .then() chains or async/await.


// jQuery
$.getJSON('/api/users/1', function(data){
  $('#user').text(data.name);
});

// Vanilla JS
fetch('/api/users/1')
  .then(function(response){ return response.json(); })
  .then(function(data){
    document.getElementById('user').textContent = data.name;
  });
Note: Both examples need a real server endpoint to run. In the editor, mock the response or point it at a local JSON file.

When jQuery Still Earns Its Place

jQuery isn't obsolete — it just fits different situations than it used to:

Reach for jQuery when... Reach for vanilla JS when...
You're maintaining an older codebase already built on it.You're starting a new project and want zero dependencies.
You depend on the jQuery UI or jQuery plugin ecosystem.Bundle size and load time matter (jQuery adds real weight).
You need to quickly prototype something across old and new browsers alike.You're targeting modern browsers, which already cover most of jQuery's conveniences natively.
Where this tutorial goes next: Up next is jQuery UI — a companion library, built on top of jQuery, that adds ready-made interactive widgets like date pickers, sliders, and draggable/sortable elements, plus polished animations and effects you'd otherwise have to build by hand.