From jQuery to vanilla JavaScript by Cyrille Tuzi

jQuery has done a great job for developers, when compatibility in old browsers was a huge problem. Fortunately this time is over, and as all new APIs are now standardized, we need to go back to vanilla JavaScript for app development¹.

So here is a comparison between jQuery and vanilla JavaScript. You'll realize that today, native JS is not more verbose than jQuery. And if you're one of the last in the world to be concerned by old Internet Explorer, you just have to load polyfill.io and your vanilla JS code will work just fine.

You'll find other guides and a general explanation here.

Selection

Yeah, jQuery is shorter, but also slower.

/* jQuery */
$('#some-id');
/* JavaScript */
document.getElementById('some-id');

For multiple selection, you need to do the loop on your own in vanilla JavaScript.

/* jQuery */
$('#nav-list>li');
/* JavaScript */
let elements = document.querySelectorAll('#nav-list>li');
for (let element of elements) {}

Tree navigation.

/* jQuery */
someElement.parent();
someElement.children.eq(0);
/* JavaScript */
someElement.parentNode;
someElement.children[0];

HTML manipulation

jQuery always uses methods (not properties).

/* jQuery */
someElement.text();
someElement.text("New content");

someElement.html();
someElement.html("New content");
/* JavaScript */
someElement.textContent;
someElement.textContent = "New content";

someElement.innerHTML;
someElement.innerHTML = "New content";

jQuery has a few special methods to normalize some properties, like form values.

/* jQuery */
someInputElement.val();
someInputElement.val("New value");
/* JavaScript */
someInputElement.value; // Read
someInputElement.value = "New value"; // Write

Custom properties.

/* jQuery */
element.data('customName');
element.data('customName', "New value");
/* JavaScript */
element.dataset.customName;
element.dataset.customName = "New value";

CSS manipulation

jQuery adds units automatically, so you can do arithmetic operations easily.

/* jQuery */
someElement.css('margin-left', 100);
/* JavaScript */
someElement.style.marginLeft = '100px';

Class manipulation.

/* jQuery */
element.addClass('color-main');
element.removeClass('color-main');
element.toggleClass('color-main');
element.hasClass('color-main');
/* JavaScript */
element.classList.add('color-main');
element.classList.remove('color-main');
element.classList.toggle('color-main');
element.classList.contains('color-main');

Animations

A Web Animations standard is coming in JavaScript. For now, there is CSS3 transitions.

/* jQuery */
element.animate({marginLeft: 100}, 
  2000, function () {
    // When animation is finished
});
/* JavaScript */
element.style.transition = 'margin-left 2s';
element.addEventListener('transitionend', 
  (event) => { // When animation is finished });
element.style.marginLeft = '100px';

setTimeout() has always been vanilla JavaScript.

Events

Event listener.

/* jQuery */
element.on('click', function (event) {
  event.preventDefault(); // If needed
  // Some action          
});
/* JavaScript */
element.addEventListener('click', (event) => {
  event.preventDefault(); // If needed
  // Some action          
});

Waiting DOM is ready. Do not start by $ in jQuery, receive it in a local parameter to avoid conflict with other librairies.

          /* jQuery */
jQuery(function ($) {
  // Launch all your features
});
/* JavaScript */
document.addEventListener('DOMContentLoaded', () => {
  // Launch all your features
});

Notes

¹ I'm aware of the discussion about jQuery still usefull as it corrects many remaining bugs in browsers. I'm OK with that, it's just not the purpose of this guide.