Lessons in this course (10)
10. Migrating from jQuery to modern JavaScript
AdvancedMediumLesson 10 of 10
| jQuery | Modern JavaScript |
|---|---|
$("#id"), $(".cls") | document.getElementById("id"), document.querySelectorAll(".cls") |
$(fn) | document.addEventListener("DOMContentLoaded", fn) or <script defer> |
.addClass/.removeClass/.toggleClass | el.classList.add/remove/toggle |
.text() / .html() | el.textContent / el.innerHTML |
.attr() / .data() | el.getAttribute() / el.dataset |
.on("click", ".child", fn) | parent.addEventListener("click", e => { const c = e.target.closest(".child"); if (c) fn(c); }) |
$.ajax, $.getJSON | fetch() + async/await |
.closest(), .parent() | el.closest(), el.parentElement |
.fadeIn() | CSS transitions / Web Animations API |
$.each, $.map, $.extend | forEach, map, Object.assign / spread |
Strategy: upgrade to jQuery 3.x/4.x with jQuery Migrate first; stop adding new jQuery code; replace module by module (or move UI to a framework component by component); remove plugins with framework-native or vanilla equivalents; finally drop the dependency.