Skip navigation

In a nutshell, most of the time, jQuery targets DOM element(s) and manipulate it, apart from other utility methods like AJAX.

Almost most of the jQuery commands starts with $ and selector like


The above command basically targeting DOM element which has class name ‘class-name’. We can replace this with


You may validate what particular DOM element(s) selected based on selector, in the chrome browser’s developer toolbar console tab by typing the command.

Almost all latest browsers supports this method querySelectorAll.


jQuery initially released on August 26, 2006 by John Resig. The entire web community started its journey towards this particular JavaScript library. As on October 12, 2018 still 83,547,613 websites using jQuery as per builtwith trends.

After browsers become ever green and newer version of JavaScripts like ES6 started flowing, the return journey became inevitable. Inbound journey may not be as fast as out bound journey but return journey has started already.

It may not be possible to ignore jQuery right away but it is good time to use as much as vanilla JavaScript possible in place of jQuery. In that direction, this series going to talk about JavaScript equivalents of jQuery most used methods.

This series is for who already knew jQuery and wants to get rid of it gradually to use plain JavaScript instead using its latest features.

jQuery to JavaScript, the return journey – Introduction.

Today, we are going to expose some inner working of angular 2.

You know what, the double curly braces aka interpolation always  seems awesome magic.

<h1>{{ text }} </h1>

Really, this is sugar syntax for:

<h1 [innerText]=”text”></h1>

Yeah… angular 2 property binding using DOM attribute directly. So, is it possible to add class to a div tag?? Well

<h1 [className]=”active”></h1>

This is equivalent to

h1 = document.querySelector(‘h1’);
h1 = ‘active’;  // className is property of DOM element div

Interesting, isn’t it?