As we know jquery is a very powerfull javascript library but a lot of time we just need jquery for a few lines of snippet or not for so much use but we include the jquery library on our project. It’s work fine but we download unnecessary jquery library we can use those things using native javascript. So here we have some features of javascript which can be used instead of jquery.

But before reading this article, if you didn’t work so much on jquery or you are beginner then you should read Learn jQuery in 20 minutes first. Ok, now you can start –

jQuery to javascript dom selectors

Using id

// Using Jquery
var dom = $("#id");
dom.text("Welcome to jquery");

// Using javascript
var dom = document.getElementById("id");
dom.innerHTML = ("Welcome to jquery");

Using elements by tag name

// Using Jquery
var dom = $("p");
dom.text("Welcome to jquery");

// Using javascript
var dom = document.getElementsByTagName("p")[0];
dom.innerHTML = ("Welcome to jquery");

Using class name

// Using Jquery
var dom = $(".class");
dom.text("Welcome to jquery");

// Using javascript
var dom = document.getElementsByClassName("class")[0];
dom.innerHTML = ("Welcome to jquery");

Complex selector

// Using Jquery
var dom = $("p.class");
dom.text("Welcome to jquery");

// Using javascript
var dom = document.querySelectorAll("p.class")[0];
dom.innerHTML = ("Welcome to jquery");

Set and get text, html, value

As we know we can set or get text, Html, values using text, Html, val method in jquery in javascript we have some property by which we can perform the same operation –

// Using Jquery set and get text value
var dom = $("#id");
dom.text("Welcome to jquery"); // set text
console.log(dom.text()); // Welcome to jquery

// Using javascript set and get text value
var dom = document.getElementById("id");
dom.textContent = ("Welcome to jquery"); // set text
console.log(dom.textContent); // Welcome to jquery
console.log(dom.innerText); // Welcome to jquery


// Using javascript set and get html value
dom.html("<h1>Welcome to jquery</h1>"); // set html
console.log(dom.html()); // <h1>Welcome to jquery</h1>

// Using javascript set and get html value
dom.innerHTML= ("<h1>Welcome to jquery</h1>"); // set html
console.log(dom.innerHTML); // <h1>Welcome to jquery</h1>


// Using javascript set and get html value - <input value="" id="dom">
dom.val(12); // set value
console.log(dom.val()); // 12

// Using javascript set and get html value
dom.value = (12); // set value
console.log(dom.value); // 12

Show and hide

To hide or show an element we use show, hide method in jquery.

// Using jquery
var dom = $("#id");
dom.hide(); // Hide
dom.show(); // Show

// Using Javascript
var dom = document.getElementById("id");
dom.style.display = "none"; // Hide
dom.style.display = ""; // Show

Set and get attribute

To add or remove an attribute from an element we use attr method in jquery.

// html code - <div class="attr" id="id">

// Using jquery 
var dom = $("#id");
dom.attr("data-val", 23); // set attr
console.log(dom.attr("data-val")); // 23
console.log(dom.attr("id")); // id


// Using Javascript
var dom = document.getElementById("id");
dom.setAttribute("data-val", 23)
console.log(dom.getAttribute("data-val")); // 23
console.log(dom.getAttribute("id")); // id

Add and remove class

To add or remove a class from an element we use addClass, removeClass method in jquery.

// Using jquery
var dom = $("#id");
dom.hasClass("mystyle"); // check mystyleis the part of element 
dom.addClass("mystyle"); // add mystyle in element
dom.removeClass("mystyle"); // remove mystyle from element

// Using Javascript
var dom = document.getElementById("id");
dom.classList.contains("mystyle");  // check mystyleis the part of element 
dom.classList.add("mystyle"); // add mystyle in element
dom.classList.remove("mystyle"); // remove mystyle from element

Remove an element

To remove an element from dom we use remove method in jquery.

// Using jquery
var dom = $("#id");
dom.remove(); // Remove an element

// Using Javascript
var dom = document.getElementById("id");
dom.parentNode.removeChild(dom); // Remove an element