Native JavaScript Equivalents of jQuery

If you want to do some little task on your website, you don’t need jQuery. But if you only did work with jQuery, you won’t know the JavaScript functions that do the same thing. I have ran in to this problem and found the real JavaScript functions in replacement of jQuery functions. I’m going to share it with you. This post will continue to expand when jQuery adds new functions.

Selector

jQuery selects element using Sizzle Selector, a small library containing in the jQuery source file. In JavaScript you select elements using one of the following doing various type of selections :

document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName
document.getElementsByTagNameNS

jQuery element selecting is like mentioning an element in CSS. There is a native JavaScript function that selects elements like CSS selecting of an element. Here is an example of selecting a div element of id firstElem that has the body parent in both jQuery and JavaScript :**

**

$("body div#firstElem")

document.querySelector("body div#firstElem")

Both selects the same element. JavaScript will return only a single element if you select elements using querySelector(). You should use querySelectorAll, getElementsByClassName or getElementsByTagName for getting an array of elements.

Functions

In the following examples, first is jQuery code and the second is the JavaScript code that does the same task.

.text()

$("#elem").text();

document.getElementById("elem").innerText;

.html()

$("#elem").html();

document.getElementById("elem").innerHTML;

.each()

$("div").each(function(){
 console.log($(this).html());
});

nodes=document.getElementsByTagName("div");
for(i=0;i<nodes.length;i++){
 console.log(nodes[i].innerHTML);
}

.find()

$("#elem").find("#saves");

function checkChildren(nodes, elemId){
 for(i=0;i<nodes.length;i++){
  if(nodes[i].id==elemId){
   return nodes[i];
  }else{
   return checkChildren(nodes[i].children, elemId);
  }
 }
}
nodes=document.getElementById("elem").children;
checkChildren(nodes, "saves");

.post()

$.post("http://subinsb.com/request.php", {"who" : "subin", "what" : "personalBelongings"}, function(data){
 console.log(data);
});

xhr=new XMLHttpRequest();
xhr.open("POST", "http://subinsb.com/request.php", true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("who=subin&what=personalBelongings");
xhr.onreadystatechange=function(){
 if(xhr.readyState==4 && xhr.status==200){
  console.log(xhr.responseText);
 }
}

.get()

$.get("http://subinsb.com/request.php", {"who" : "subin", "what" : "personalBelongings"}, function(data){
 console.log(data);
});

xhr=new XMLHttpRequest();
xhr.open("GET", "http://subinsb.com/request.php?who=subin&what=personalBelongings", true);
xhr.send();
xhr.onreadystatechange=function(){
 if(xhr.readyState==4 && xhr.status==200){
  console.log(xhr.responseText);
 }
}

.load()

$("#loadTo").load(“http://subinsb.com”);

xhr=new XMLHttpRequest();
xhr.open("GET", "http://subinsb.com/request.php?who=subin&what=personalBelongings", true);
xhr.send();
xhr.onreadystatechange=function(){
 if(xhr.readyState==4 && xhr.status==200){
  document.getElementById("loadTo").innerHTML = xhr.responseText;
 }
}

.hide()

$("#elem").hide();

document.getElementById("elem").style.display = "none";

.show()

$("#elem").show();

document.getElementById("elem").style.display = "block";

.toggle()

$("#elem").toggle();

document.getElementById("elem").style.display = document.getElementById("elem").style.display=="block" ? "none":"block";

.remove()

$("#elem").remove();

document.getElementById("elem").remove();

.append()

$("#elem").append("I'm a good guy.");

document.getElementById("elem").innerHTML += "I'm a good guy.";

Conclusion

As you can see, jQuery codes are very small compared to the JavaScript codes. But JavaScript takes less time to execute rather than jQuery. You can use jQuery if you’re web page doesn’t have a lot of codes. If you’re web page has lot of codes in jQuery, then it’s better if you change the codes to native JavaScript to increase page performance. Also, when you need to accomplish a small task, use JavaScript.

More to come in the next part of this.