Sample Code for equivalent native functions of jQuery Functions

We have tested the performance of common jQuery methods and their equivalent native methods (1, 2, 3 ).
I know what you're thinking. The native method is obviously faster than the jQuery method, because the jQuery method must handle browser compatibility and other things. Yes, I totally agree. This article is not intended to be written against jQuery, but if you are targeting modern browsers, using native methods will greatly improve performance.

Many developers do not realize that most of their jQuery methods can be replaced by native methods or more lightweight methods. Below are some code examples to show some common jQuery methods and their native equivalent methods.

Note: Some of the following native methods are referenced by html5. Some browsers may not use them.

Selector
One of the core of jQuery is that it is very convenient to get DOM elements. You only need to input CSS to select a string to obtain the matching element. But in most cases, we can use simple native code to achieve the same effect.Copy codeThe Code is as follows: // ---- get all div --------- of the page ---------
/* JQuery */
$ ("Div ")
/* Native */
Document. getElementsByTagName ("div ")
// ---- Obtain all elements of the specified class ---------
/* JQuery */
$ (". My-class ")
/* Native */
Document. querySelectorAll (". my-class ")
/* Faster native method */
Document. getElementsByClassName ("my-class ")
// ---- Get the element ---------- through CSS Selection ----------
/* JQuery */
$ (". My-class li: first-child ")
/* Native */
Document. querySelectorAll (". my-class li: first-child ")
// ---- Obtain the first element of the specified clsss ----
/* JQuery */
$ (". My-class"). get (0)
/* Native */
Document. querySelector (". my-class ")

Note: In fact, there are some problems here. document. querySelectorAll is different from jQuery selector. The former returns a NodeList, while the latter returns a class array object.
DOM operations
JQuery is also frequently used in DOM operations, such as inserting or deleting elements. We can also use native methods to perform these operations. You will find that additional code is required, and you can also write your own auxiliary functions to make it easier to use. The following are examples of inserting elements into the page.Copy codeThe Code is as follows: // ---- insert an element ----
/* JQuery */
$ (Document. body). append ("<div id = 'mydiv '> </div> ");
/* Poor native Method */
Document. body. innerHTML + = "<div id = 'mydiv '> </div> ";
/* Better native method */
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 );
// ---- Prerequisites ----
// Except the last line
Document. body. insertBefore (frag, document. body. firstChild );

CSS classes
In jQuery, we can easily add, delete, and check its CSS class for DOM elements. Fortunately, the native method can also be used easily.Copy codeThe 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 ");
// ---- Whether the class is used ---
/* JQuery */
If ($ (el). hasClass ("someClass "))
/* Native method */
If (el. classList. contains ("someClass "))

Modify CSS attributes
It is always easier and faster to modify and retrieve CSS attributes through Javascript than to use jQuery CSS functions, and there is no unnecessary code.Copy codeThe Code is as follows: // get DOM element reference
Var el = document. querySelector (". main-content ");
// ---- Set CSS attributes ----
/* JQuery */
Detail (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 ";