Posted 8 months ago. Visible to the public. Linked content.

Guideline for moving from jQuery to vanilla JavaScript

jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling them, animating them, and fetching data—things that jQuery was great at. With broad browser support of ES6 (over 96% at the time of writing), now is probably a good time to move away from jQuery.

Practical and clear reference with the most common jQuery patterns and their equivalent translations in vanilla JS

Additional equivalents

jQuery Vanilla JS Effect
el.one('click', doStuff) el.addEventListener('click', doStuff, { once: true }) executes Event Handler just once
$(el).data('importantStuff') el.dataset.importantStuff access to data property

For a deeper dive: Take a look at Henning's presentation

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Hannes Randow
Last edit:
8 months ago
by Hannes Randow
Keywords:
cheat, sheet
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Hannes Randow to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more