jQuery and Vanilla JavaScript
Harry
· 11 Sep 2026
· 10 views
When jQuery Is Not Needed
Modern browsers implement most jQuery features natively. Knowing the equivalents helps you write lighter code and understand both worlds.
A Quick Comparison Table
| jQuery | Vanilla JS |
|---|---|
| $('#box') | document.getElementById('box') / querySelector |
| $('.card').css('color', 'red') | el.style.color = 'red' |
| $el.addClass('hot') | el.classList.add('hot') |
| $.get(url).done(fn) | fetch(url).then(r => r.json()).then(fn) |
| $('div').on('click', fn) | document.querySelectorAll + forEach + addEventListener |
| $('#box').hide() | el.style.display = 'none' |
Fetch Replaces AJAX
fetch('/api/users')
.then(r =u0026gt; r.json())
.then(data => render(data))
.catch(err => console.error(err));Choosing Between Them
- Use jQuery for legacy apps, WordPress contexts, or maximum browser coverage.
- Use native APIs for new projects with modern browsers: smaller, faster, framework-ready.
- Many codebases mix both; knowing the translation eases maintenance.
Key Points
- querySelector, classList, style and fetch cover most jQuery use.
- fetch() returns Promises, not jQuery's jqXHR.
- New projects should prefer native APIs.
- Keep jQuery in your toolbox for the huge legacy web.