jQuery vs Vanilla JavaScript

“Vanilla JavaScript” means plain JavaScript without a library. Modern browsers support many features which jQuery was made for: querySelector, classList, fetch, addEventListener and more. So you can do many things without jQuery. Let us compare them with working examples.

<ul id="list">
  <li class="item">One</li>
  <li class="item">Two</li>
</ul>
<button id="btn">Add</button>
<p id="msg"></p>

Select elements

// jQuery
console.log($('.item').length);

// Vanilla JavaScript
console.log(document.querySelectorAll('.item').length);

Events

// jQuery
$('#btn').on('click', function () { $('#msg').text('jQuery click'); });
$('#btn').click();
console.log($('#msg').text());

// Vanilla JavaScript
document.getElementById('btn').addEventListener('click', function () {
  document.getElementById('msg').textContent = 'Vanilla click';
});
document.getElementById('btn').click();
console.log(document.getElementById('msg').textContent);

Classes and attributes

// jQuery
$('#msg').addClass('big').attr('title', 'Hello');

// Vanilla JavaScript
var el = document.getElementById('msg');
el.classList.add('small');
el.setAttribute('title', 'Hi');
el.classList.toggle('big');

Add and remove elements

// jQuery
$('#list').append('<li class="item">Three</li>');

// Vanilla JavaScript
var li = document.createElement('li');
li.className = 'item';
li.textContent = 'Four';
document.getElementById('list').appendChild(li);

console.log(document.querySelectorAll('#list li').length);

Loop over elements

// jQuery
$('.item').each(function (i) { console.log('jQuery ' + i + ': ' + $(this).text()); });

// Vanilla JavaScript
document.querySelectorAll('.item').forEach(function (el, i) {
  console.log('Vanilla ' + i + ': ' + el.textContent);
});

Quick comparison table

Task	jQuery	Vanilla JavaScript
Select	$('.a')	document.querySelectorAll('.a')
Ready	$(fn)	document.addEventListener('DOMContentLoaded', fn)
Event	$(el).on('click', fn)	el.addEventListener('click', fn)
Add class	$(el).addClass('a')	el.classList.add('a')
Toggle class	$(el).toggleClass('a')	el.classList.toggle('a')
Text	$(el).text('x')	el.textContent = 'x'
Attribute	$(el).attr('id')	el.getAttribute('id')
Closest parent	$(el).closest('.a')	el.closest('.a')
Remove	$(el).remove()	el.remove()
Ajax	$.getJSON(url, fn)	fetch(url).then(r => r.json()).then(fn)
Hide	$(el).hide()	el.style.display = 'none'

Ajax with fetch

// jQuery
$.getJSON('/api/users', function (users) { console.log(users); });

// Vanilla JavaScript
fetch('/api/users')
  .then(function (response) { return response.json(); })
  .then(function (users) { console.log(users); });

When to use which

Choose jQuery when	Choose vanilla JavaScript when
You work in WordPress or an old project which already has jQuery	You start a new small site or project
You need a plugin which depends on jQuery	You want fewer files and a faster page
You want short code for DOM work and effects in a quick script	The browsers you support are all modern
Your team already knows it well	You use a framework like React or Vue (they manage the DOM themselves)

About the size and speed

jQuery is around 30 KB when compressed. It is not a big problem for most sites, but it is extra code to download. Plain JavaScript has no cost to download. Also do not mix: if the page has a framework which controls the DOM, changing the same elements with jQuery can create bugs.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.