jQuery vs Vanilla JavaScript

When jQuery was introduced in 2006, it solved major problems — browser incompatibilities, verbose DOM APIs, and missing AJAX support. Today, modern browsers have caught up. Vanilla JavaScript (plain JS without libraries) can now do most things jQuery does. Understanding both helps you decide when jQuery is worth including.

What is Vanilla JavaScript?

Vanilla JavaScript means standard JavaScript that runs in the browser without any library. No imports, no extra files — just the JavaScript the browser already understands.

Side-by-Side Comparison

Selecting Elements

// jQuery:
$(".box")
$("#title")
$("p")

// Vanilla JS:
document.querySelectorAll(".box")    // returns NodeList
document.getElementById("title")    // returns one element
document.querySelectorAll("p")

Hiding and Showing

// jQuery:
$(".box").hide();
$(".box").show();

// Vanilla JS:
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "";

Changing Text Content

// jQuery:
$("#title").text("Hello World");

// Vanilla JS:
document.getElementById("title").textContent = "Hello World";

Adding/Removing CSS Classes

// jQuery:
$(".card").addClass("active");
$(".card").removeClass("active");
$(".card").toggleClass("active");

// Vanilla JS:
document.querySelector(".card").classList.add("active");
document.querySelector(".card").classList.remove("active");
document.querySelector(".card").classList.toggle("active");

Attaching Events

// jQuery:
$("#btn").on("click", function() { alert("Clicked!"); });

// Vanilla JS:
document.getElementById("btn").addEventListener("click", function() {
    alert("Clicked!");
});

AJAX Requests

// jQuery:
$.getJSON("data.json", function(data) {
    console.log(data);
});

// Vanilla JS (Fetch API):
fetch("data.json")
    .then(function(response) { return response.json(); })
    .then(function(data) { console.log(data); })
    .catch(function(error) { console.error(error); });

Looping Over Elements

// jQuery:
$("li").each(function() {
    console.log($(this).text());
});

// Vanilla JS:
document.querySelectorAll("li").forEach(function(el) {
    console.log(el.textContent);
});

Diagram: jQuery vs Vanilla JS — Browser Compatibility

  2010:
  Chrome   ✓  Firefox ✓  IE 8 ✗ (broken APIs)
  jQuery fixes IE 8, 9 — one API for all browsers.

  2026:
  Chrome   ✓  Firefox ✓  Edge ✓  Safari ✓
  All major browsers support querySelector, classList,
  fetch, addEventListener natively.
  jQuery is less critical for compatibility today.

Where jQuery Still Wins

Where Vanilla JS is Better

File Size Impact

  jquery-3.7.1.min.js  → 87 KB
  (plus gzip compression → ~30 KB over the wire)

  For a small webpage that only hides one div:
  87 KB download + parse time just to call .hide()
  → Vanilla JS is better

  For a page with sliders, tabs, AJAX, validation, sortable tables:
  jQuery + plugins saves hours of development
  → jQuery is justified

The Decision Framework

  Ask these questions:

  1. Does the project already use jQuery?  → Yes → Use jQuery
  2. Do you need a jQuery plugin?          → Yes → Use jQuery
  3. Is this a WordPress project?          → Yes → Use jQuery
  4. Is this a small site, simple script?  → Yes → Consider Vanilla JS
  5. Are you learning JS fundamentals?     → Yes → Start with Vanilla JS
  6. Are you using React / Vue / Angular?  → Yes → Skip jQuery entirely

Quick Summary

• Vanilla JavaScript can now handle most tasks jQuery was built to solve, thanks to modern browser standards.
• jQuery still leads in plugins, WordPress development, and animation chaining.
• Do not include jQuery just for one or two simple tasks — native JS is lighter.
• Learning both makes you a more versatile developer.
• Modern frameworks (React, Vue, Angular) replace jQuery entirely in component-based apps.