jQuery to Vanilla JavaScript Transition Cheat Sheet — Events and Style Manipulation

Spread the love

Vanilla JavaScript in the browser now has many of the features of jQuery built-in.

Therefore, we don’t need to use jQuery to do many things.

In this article, we’ll look at the vanilla JavaScript equivalent of jQuery features.

On many occasions, we want to listen to events on dynamically added elements.

In jQuery, we would use the on method to listen to the event on all the select elements.

For instance, we can write:

$("div").on("click", ".search-result", (e) => {
  //...
});

to listen to clicks on the elements with the search-result class in the div with the on method to attach the event listeners to them.

To do the same thing with vanilla JavaScript, we can use event delegation.

For instance, we can write:

document
  .querySelector('div')
  .addEventListener('click', (e) => {
    if (e.target.className === 'search-result') {
      //...
    }
  })

to call addEventListener on the div.

And then in the click event handler, we use e.target.className to get the class name of the element that we clicked on.

Then we compare that to see if we clicked on anything with the class search-result .

In jQuery, we can use the trigger method to trigger an event.

For instance, we can write:

$(document).trigger("myEvent");
$("div").trigger("myEvent");

To do the same thing with vanilla JavaScript, we write:

document.dispatchEvent(new Event("myEvent"));
document.querySelector("div").dispatchEvent(new Event("myEvent"));

Wd call dispatchEvent on the selected element to trigger our one event.

jQuery has the css method to let us style elements.

For instance, we can write:

$("div").css("color", "#000");

To do the same thing with vanilla JavaScript, we can write:

document.querySelector("div")
  .style.color = "#000";

We set the style.color property to set the CSS color property of the selected div.

We can also pass in an object into jQuery’s css method:

$("div").css({
  "color": "#000",
  "background-color": "red"
});

To do the same thing with vanilla JavaScript, we just set the properties of the style object property to the values we want:

const div = document.querySelector("div");
div.style.color = "#000";
div.style.backgroundColor = "red";

We can also set the style.cssText property to set multiple styles:

const div = document.querySelector("div");
div.style.cssText = "color: #000; background-color: red";

jQuery comes with the hide method to let us hide the selected elements.

And we can use jQuery’s show method to show the selected elements.

For instance, we can write:

$("div").hide();
$("div").show();

to hide and show the div respectively.

To do the same thing with vanilla JavaScript, we can set the display CSS property to the value we want with JavaScript:

document.querySelector("div").style.display = "none";
document.querySelector("div").style.display = "block";

We hide the div by setting style.display to 'none' .

And we show the div by setting style.display to 'block' .

We can add event listeners and manipulate styles easily with vanilla browser JavaScript.

By John Au-Yeung