Vanilla JavaScript alternatives to jQuery functions

Created:18 Apr 2022 15:05:28 , in  Web development

JQuery has conquered the frontend web development world since it was first released many years ago. Even today, in year 2022, the library, and libraries influenced by it, like $cash, still can be found across fronted code bases.

However, even though it' been a slow process, web developers have been trying to wean themselves off jQuery for a good couple of years now. The process has trully kicked off with the release of ECMAScript 2015 (also known as ES6) specification and advent and wider adoption of more modern alternatives to jQuery like React, Vue.js or Angular.

In this post I take a brief look at what functionality you as a front end developer might no longer need jQuery for.

Selecting elements

//jQuery
$("selectorName")

// using HTML5 DOM API
document.querySelector("selectorName")
or
document.querySelectorAll("selectorName"

Dom manipulation

Appending content to an element

//jQuery
$("selectorName").append( "content")

// vanilla JavaScrpt
let element = document.querySelector('selectorName');
let text = document.createTextNode("content");
element.appendChild(text);

Adding a class name to an element

//jQuery
$('selectorName').addClass('className');
// vanilla JavaScript 
let element = document.querySelector("selectorName");
element.classList.add('className');

Events

//jQuery
$('selectorName').on('click',function(e) {
    //do something
});

// vanilla JavaScript
let clickedMe = document.querySelector('button');
clickedMe.addEventListener('click', (e) => {
    //do something
})

HTTP requests

//jQuery
$.ajax({
  url: 'http://example.com/movies.json',
  type: 'GET'
  success: (response) => {
    console.log(response)
  }
  error: (errors) => {
    console.log(error)
  }
})

// vanilla JavaScript
fetch(
  'http://some-domain.com/',
  {
    method: 'GET',
    headers: {'Content-Type': 'application/json'},
  }
){
  .then(response => response.json())
  .catch(error => console.log(error))
}

Animations

// jQuery
$(selectorName).animate(
    {parameters},
    speed,
    callback
);

// vanilla JavaScript
p{
    animation-name: animated;
    animation-duration:5s;  
}

@keyframes animated{
  0% {
    opacity: 0;
  }        

  70% { 
    opacity: 1;
  }
  100%  {
    opacity: 0;
  }
}

Conclussion

Even today jQuery is not dead, the project has not been discontinued and there are many, many plugins for it. However, with every new JavaScript specification release and adoption there is less and less jQuery can offer one can't achieve using vanilla JavaScript. So, next time while thinking of writing something new, think if it can be done without jQuery before reaching for $.

This post was updated on 27 Apr 2022 22:33:03

Tags:  grunt ,  JavaScript