Equivalent native function code example of jQuery function_jquery

We did some tests on the performance of commonly used jQuery methods and their equivalent native methods (1, 2, 3).
I know what you are thinking. The native method is obviously faster than the jQuery method, because the jQuery method has to deal with browser compatibility and other things. Yes, I totally agree. I'm not writing this article against using jQuery, but if you're targeting modern browsers, there will be a huge performance improvement using native methods.

Many developers don't realize that most of the jQuery methods they use can be replaced by native methods, or more lightweight methods. Below are some code examples showing some commonly used jQuery methods and their native equivalents.

Translator's Note: Please note that some of the native methods below are referenced by HTML5 and may not be used by some browsers.

Selector
One of the cores of jQuery is that it can easily obtain DOM elements. We just need to enter the CSS selection string and get the matching elements. But in most cases, we can achieve the same effect with simple native code.

Copy code The code is as follows:

//----Get all divs of the page- --------
/* jQuery */
$("div")
/* native*/
document.getElementsByTagName("div")
//- ---Get all elements of the specified class---------
/* jQuery */
$(".my-class")
/* native*/
document .querySelectorAll(".my-class")
/* Faster native method*/
document.getElementsByClassName("my-class")
//----Get elements through CSS selection- ---------
/* jQuery */
$(".my-class li:first-child")
/* native*/
document.querySelectorAll(" .my-class li:first-child")
//----Get the first element of the specified clsss----
/* jQuery */
$(".my-class ").get(0)
/* native*/
document.querySelector(".my-class")

Translator's note: Actually there are some problems here, There is a difference between document.querySelectorAll and jQuery selector. The former returns a NodeList, while the latter returns an array-like object.
DOM Operations
jQuery is also frequently used for DOM operations, such as inserting or deleting elements. We can also use native methods to perform these operations. You will find that this requires writing additional code. Of course, you can also write your own helper functions to make it easier to use. Below are some examples of inserting elements into the page.

Copy code The code is as follows:

//----Insert element----
/* jQuery */
$(document.body).append("

" );
/* Poor native approach*/
document.body.innerHTML = "

> ;";
/* Better native methods*/
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = " myDiv";
var im = document.createElement("img");
im.src = "im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv) ;
document.body.appendChild(frag);
//----Preceding element----
// Except for the last line
document.body.insertBefore(frag, document. body.firstChild);

CSS classes
In jQuery, we can easily add, delete, and check the CSS class of a DOM element. Fortunately, it's also easy to do using native methods.

Copy code The code is as follows:

// Get the reference of the DOM element
var el = document.querySelector(".main-content");
//----Add class------
/* jQuery */
$(el).addClass("someClass ");
/* Native method */
el.classList.add("someClass");
//----Delete class-----
/* jQuery */
$(el).removeClass("someClass");
/* Native method*/
el.classList.remove("someClass");
//----Is it the class---
/* jQuery */
if($(el).hasClass("someClass"))
/* Native method*/
if(el.classList.contains(" someClass"))

Modify CSS properties
Always modify and retrieve CSS properties through Javascript, which is simpler and faster than using jQuery CSS functions, and there are no inconsistencies Necessary code.

Copy code The code is as follows:

// Get DOM element reference
var el = document.querySelector(".main-content");
//----Set CSS properties----
/ * jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px" ,
height: "100px",
display: "block"
});
/* native*/
el.style.background = "#FF0000";
el .style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red ";