Vanilla JS Equivalents
Modern browsers support most jQuery features natively. Know the equivalents to use vanilla JS where jQuery adds unnecessary weight.
jQuery
Intermediate
4 min read
Replacing jQuery with Vanilla JS
Example
// Selector
document.querySelector("#id"); // $("#id")
document.querySelectorAll(".cls"); // $(".cls")
// Class toggle
el.classList.toggle("active"); // $(el).toggleClass("active")
// AJAX
fetch("/api").then(r => r.json()); // $.getJSON("/api")
// Events
el.addEventListener("click", fn); // $(el).on("click", fn)
// CSS
el.style.color = "red"; // $(el).css("color","red")
// Hide/show
el.style.display = "none"; // $(el).hide()
// Each
document.querySelectorAll("li").forEach(el => ...); Pro Tip
YouMightNotNeedJQuery.com lists vanilla equivalents for every common jQuery pattern.