The equivalent native function code of jquery function

We have tested some of the common jquery methods and the properties of 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 handles browser compatibility and some other things. Yes, I totally agree. Writing this article is not out of opposition to using jquery, but if you're targeting a modern browser, using the native method can make a big improvement in performance.

Many developers do not realize that most of the jquery methods they use can be replaced with native methods, or more lightweight methods. Here are some code examples that show some of the common jquery methods and their equivalent native methods.

Translators Note: Some of the native methods below are HTML5 referenced and may not be used by some browsers.

Selector
One of the core of jquery is the ability to easily access DOM elements. We simply enter the CSS selection string and we can get the matching element. But in most cases, we can achieve the same effect with simple native code.

copy code code as follows:


//----get all div---------
page

/* JQuery */


$ ("div")


/* Native */


document.getelementsbytagname ("div")


//----Gets all the elements of the specified class---------


/* JQuery */


$ (". My-class")


/* Native */


Document.queryselectorall (". My-class")


/* Faster Native method */


document.getelementsbyclassname ("My-class")


//----Get the element----------by CSS selection


/* JQuery */


$ (". My-class li:first-child")


/* Native */


Document.queryselectorall (". My-class li:first-child")


//----Gets the first element of the specified clsss----


/* JQuery */


$ (". My-class"). Get (0)


/* Native */


document.queryselector (". My-class")

Translator Note: In fact there are some problems, Document.queryselectorall and jquery selector is still different, the former return is a nodelist, and the latter return is a class array object.
DOM Operations
jquery is also used frequently on DOM operations, such as inserting or deleting elements. We can also use the native method to do these things, and you'll find that you need to write extra code, and of course you can write your own helper functions to make it easier to use. Here are some examples of inserting elements into a page.

copy code code as follows:


//----INSERT element----


/* JQuery */


$ (document.body). Append ("<div id= ' mydiv ><img ' src= ' im.gif ')";


/* Crappy Native method * * *


Document.body.innerHTML + = "<div id= ' mydiv ' ><img src= ' im.gif '";


/* 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);


//----FRONT element----


//Except the last line of


Document.body.insertBefore (Frag, document.body.firstChild);

CSS classes
In jquery, we can easily add, delete, and check the CSS class for DOM elements. Fortunately, the use of native methods can also be simple.

copy code code as follows:


//Get a reference to 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 the class---


/* JQuery */


if ($ (EL). Hasclass ("SomeClass")


/* Native method */


if (el.classList.contains ("SomeClass"))

Modify CSS Properties
CSS properties are always modified and retrieved through JavaScript, which is much simpler and faster than using the jquery CSS function, and does not have any unnecessary code.

copy code code as follows:


//Get DOM element references


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";