Anthony

You might not need jQuery, use vanilla JS instead

You might not need jQuery, use vanilla JS instead

The frontend environments evolve rapidly, and most of the native DOM API’s that JavaScript offers are supported by all modern browsers. And in my opinion I think you shouldn’t use jQuery if you don’t absolutely need to. It’s just so over kill I would say. Mind you, this is not meant to be an anti-jQuery post, as a matter of fact I believe all other JavaScript libraries/frameworks all goes through some sort of evaluation/criticism, but that doesn’t make the framework/library bad or useless.

In this article, we’ll tackle a number of common jQuery tasks using nothing more than vanilla JavaScript.

Selecting DOM elements

jQuery:

  $('.table')

Vanilla JavaScript:

  document.querySelector('.table')

If you have more element

  document.querySelectorAll('.table')

Adding or Remove class from a dom element

jQuery:

  el.addClass('slide')
  el.removeClass('slide')
  el.toggleClass('slide')

Vanilla JavaScript:

  el.classList.add('slide')
  el.classList.remove('slide')
  el.classList.toggle('slide')

Waiting for the DOM to be loaded

jQuery:

 $(document).ready(() => {
 // do something
})

Vanilla JavaScript:

  document.addEventListener("DOMContentLoaded", () => {
    // do something
  })

Removing an element from the DOM

jQuery:

 el.remove()

Vanilla JavaScript

 el.remove()

Changing the content of an element

jQuery:

 el.text('Hello World')
 el.html('Hello World')

Vanilla JavaScript:

el.innerHTML = 'Hello World'
el.textContent = 'Hello World'

Listening for Events

jQuery:

el.on('click', (e) => {
/* do something */
})

Vanilla JavaScript:

  el.addEventListener('click', (e) => {
  /* do something */
  })

Prepend an Element

jQuery:

  $elem.prepend($someElement);

Vanilla JavaScript:

  elem.prepend(someElement);

Ajax

jQuery:

  $.ajax({
  url: '/some.json',
  type: 'GET'
  success: (data) => {
    console.log(data)
  }
})

Vanilla JavaScript:

  fetch('/some.json') 
  .then(response => response.json())
  .then(data => console.log(data))

Animation

jQuery:

 $el.animate({
  width: "50%",
  opacity: 0.4,
  marginLeft: "0.6in",
  fontSize: "2rem",
  borderWidth: "10px"
}, 1000);

Vanilla JavaScript:

  let el = document.querySelector('.button');
el.animate([
  { 
    transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', 
    transformOrigin: '50% 0', 
    filter: 'blur(40px)', 
    opacity: 0 
  },
   { 
    transform: 'translateY(0) scaleY(1) scaleX(1)',
    transformOrigin: '50% 50%',
    filter: 'blur(0)',
    opacity: 1 
  }
], 1000);

Conclusion

Is jQuery worth learning or should you continue using it?

Let’s tackle this with a little bit of unbias. In my opinion I think there is no big reason to ditch jQuery, but considering the support modern browsers has for JavaScript native DOM API’s, I think you should stick to plain JavaScript instead. Although Some great developers still choose to use jQuery(and that’s fine). And for some particular reason your project relies on it, or the plugins you used on your project relies on jQuery to function, then definitely keep using it.

comments powered by Disqus