Vanilla JavaScript alternatives to jQuery functions

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 


Author, Copyright and citation

Author

Sylwester Wojnowski

Author of the this article - Sylwester Wojnowski - is a sWWW web developer. He has been writing computer code for the websites and web applications since 1998.

Copyrights

©Copyright, 2022 Sylwester Wojnowski. This article may not be reproduced or published as a whole or in parts without permission from the author. If you share it, please give author credit and do not remove embedded links.

Computer code, if present in the article, is excluded from the above and licensed under GPLv3.

Citation

Cite this article as:

Wojnowski, Sylwester. "Vanilla JavaScript alternatives to jQuery functions." From sWWW - Code For The Web . https://wojnowski.net.pl//main/index/vanilla-javascript-alternatives-to-jquery-functions

Add Comment

Allowed BB Code - style tags: [b][/b], [i][/i], [code=text][/code],[code=javascript][/code],[code=php][/code],[code=bash][/code],[code=css][/code],[code=html][/code]


I constent to processing my data given through this form for purposes of a reply by the administrator of this website.

Recent Comments

Nobody has commented on this post yet. Be first!