Native JavaScript Equivalents of jQuery

From WikiMLT
JavaScript

Source of this ar­ti­cle: Subin's Blog – Na­tive JavaScript Equiv­a­lents of jQuery. Some of the sec­tions may be ex­tend­ed here.

If you want to do some lit­tle task on your web­site, you don’t need jQuery. But if you on­ly did work with jQuery, you won’t know the JavaScript func­tions that do the same thing. I have ran in to this prob­lem and found the re­al JavaScript func­tions in re­place­ment of jQuery func­tions. I’m go­ing to share it with you. This post will con­tin­ue to ex­pand when jQuery adds new func­tions.

Se­lec­tor

jQuery se­lects el­e­ment us­ing Siz­zle Se­lec­tor, a small li­brary con­tain­ing in the jQuery source file. In JavaScript you se­lect el­e­ments us­ing one of the fol­low­ing do­ing var­i­ous type of se­lec­tions: 

document.getElementById('id');
document.getElementsByClassName('class');
document.getElementsByName('name');
document.getElementsByTagName('tag-name');
document.getElementsByTagNameNS('tag-name-ns');

jQuery el­e­ment se­lect­ing is like men­tion­ing an el­e­ment in CSS. There is a na­tive JavaScript func­tion that se­lects el­e­ments like CSS se­lect­ing of an el­e­ment. Here is an ex­am­ple of se­lect­ing a div el­e­ment of id firstElem that has the body par­ent in both jQuery and JavaScript: 

$("body div#firstElem");

document.querySelector("body div#firstElem");

Both se­lects the same el­e­ment. JavaScript will re­turn on­ly a sin­gle el­e­ment if you se­lect el­e­ments us­ing query­S­e­lec­tor(). You should use query­S­e­lec­torAll, getEle­ments­By­Class­Name or getEle­ments­By­Tag­Name for get­ting an ar­ray of el­e­ments.

Func­tions

In the fol­low­ing ex­am­ples, first is jQuery code and the sec­ond 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";

.tog­gle()

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

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

.re­move()

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

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

.ap­pend()

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

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

Con­clu­sion

As you can see, jQuery codes are very small com­pared to the JavaScript codes. But JavaScript takes less time to ex­e­cute 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 bet­ter if you change the codes to na­tive JavaScript to in­crease page per­for­mance. Al­so, when you need to ac­com­plish a small task, use JavaScript.

Retrieved from "https://wiki.metalevel.tech/index.php?title=Native_JavaScript_Equivalents_of_jQuery&oldid=28489"