jQuery vs Vanilla JS
See the same task written with jQuery and with plain modern JavaScript.
Modern browsers now include much of what once made jQuery essential. It helps to see both styles side by side.
Hiding an element
| jQuery | Vanilla JS |
|---|---|
$("#box").hide(); | document.querySelector('#box').style.display='none'; |
$(".item").addClass("on"); | document.querySelectorAll('.item').forEach(el => el.classList.add('on')); |
jQuery is shorter and loops over matched elements for you. Plain JS avoids the extra library. Both are valid — choose based on your project.
Example
Loading editor…
Press Run to see the result.
When to use it
- A senior developer audits a legacy codebase to decide whether to remove jQuery and replace each call with vanilla JS equivalents.
- A tutorial writer shows learners that $.ajax() maps to fetch() so they can read both old and new codebases.
- A performance engineer replaces jQuery's document-ready wrapper with a deferred script tag to remove 30 KB of overhead.
More examples
Hide element: jQuery vs vanilla
Shows that jQuery .hide() is syntactic sugar over a one-line style assignment available in any modern browser.
// jQuery
$("#box").hide();
// Vanilla JS equivalent
document.getElementById("box").style.display = "none";Add event listener: jQuery vs vanilla
jQuery implicitly iterates over all matched buttons; vanilla JS requires an explicit forEach loop.
// jQuery
$("button").on("click", function () {
$(this).text("Clicked!");
});
// Vanilla JS
document.querySelectorAll("button").forEach(btn => {
btn.addEventListener("click", function () {
this.textContent = "Clicked!";
});
});AJAX request: jQuery vs fetch
Both patterns request JSON from an endpoint; fetch() is now the native standard with a promise-based API.
// jQuery
$.get("/api/data", function (res) {
$("#result").text(res.message);
});
// Vanilla JS (fetch)
fetch("/api/data")
.then(r => r.json())
.then(res => {
document.getElementById("result").textContent = res.message;
});
Discussion