Native JS replaces some jquery methods with simple implementation of _javascript techniques

1. Select elements

JQuery
var els = $ ('. El ');

Native
var els = Document.queryselectorall ('. El ');

Shorthand
var $ = function (EL) {return
 document.queryselectorall (EL);
}

The Queryselectorall method returns the NodeList object, which needs to be converted to an array.

MyList = Array.prototype.slice.call (mynodelist)

2. Creating elements

JQuery
var newel = $ (' <div/> ');

Native
var newel = document.createelement (' div ');

3. Adding events

JQuery
$ ('. El '). On (' event ', function () {

});

Native
[].foreach.call (Document.queryselectorall ('. El '), function (EL) {
 el.addeventlistener (' event '), function () {

 }, False);
};

4.get/set Property

JQuery
$ ('. El '). Filter (': a '). attr (' key ', ' value ');
$ ('. El '). Filter (': a '). attr (' key ');

Native
document.queryselector ('. El '). setattribute (' key ', ' value ');
Document.queryselector ('. El '). getattribute (' key ');

5. Adding and Removing style class

The DOM element itself has a read-write classname attribute that can be used to manipulate class.

HTML 5 also provides a Classlist object that is more powerful (IE 9 is not supported).

JQuery
$ ('. El '). addclass (' class ');
$ ('. El '). Removeclass (' class ');
$ ('. El '). Toggleclass (' class ');

Native
document.queryselector ('. El '). Classlist.add (' class ');
Document.queryselector ('. El '). Classlist.remove (' class ');
Document.queryselector ('. El '). Classlist.toggle (' class ');

6. Append elements

Tail Append element:

JQuery
$ ('. El '). Append ($ (' <div/> '));

Native
document.queryselector ('. El '). AppendChild (document.createelement (' div '));

Header Append element:

JQuery
$ ('. El '). prepend (' <div></div> ')

//native
var parent = Document.queryselector ('. El ');
Parent.insertbefore ("<div></div>", Parent.childnodes[0])

7. Cloning elements

JQuery
var Clonedel = $ ('. El '). Clone ();

Native
var clonedel = Document.queryselector ('. El '). CloneNode (True);

8. Removing elements

Remove
//jQuery
$ ('. El '). Remove ();

Native
Remove ('. El ');

function Remove (EL) {
 var toremove = Document.queryselector (EL);

 ToRemove.parentNode.removeChild (Toremove);
}

9. Get the parent element

JQuery
$ ('. El '). Parent ();

Native
document.queryselector ('. El '). parentnode;

10. Get previous/Next element (Prev/next elements)

JQuery
$ ('. El '). Prev ();
$ ('. El '). Next ();

Native
document.queryselector ('. El '). previouselementsibling;
Document.queryselector ('. El '). nextelementsibling;

11.XHR and AJAX

JQuery
$.get (' url ', function (data) {

});
$.post (' url ', {data:data}, function (data) {

});

Native

//Get
var xhr = new XMLHttpRequest ();

Xhr.open (' get ', url);
Xhr.onreadystatechange = function (data) {

}
xhr.send ();

Post
var xhr = new XMLHttpRequest ()

xhr.open (' post ', url);
Xhr.onreadystatechange = function (data) {

}
xhr.send ({data:data});

12. Clear the empty element

JQuery
$ ("#elementID"). Empty ()

//native
var element = document.getElementById ("ElementID")
while (Element.firstchild) element.removechild (element.firstchild);

13. Check if there are child elements

JQuery
if (!$ ("#elementID"). Is (": Empty")) {}

//native
if (document.getElementById ("ElementID"). HasChildNodes ()) {}

14.$ (document). Ready

The DOM load completes, triggering the Domcontentloaded event, equivalent to the $ (document) of jquery. Ready method.

Document.addeventlistener ("domcontentloaded", function () {
  //...
});

15. Data storage

jquery objects can store data.

$ ("body"). Data ("foo", 52);

HTML 5 has a DataSet object and similar functionality (IE 10 is not supported), but only strings can be saved.

Element.dataset.user = json.stringify (user);
Element.dataset.score = score;

16. Animation

The animate method of jquery, which is used to generate animation effects.

$foo. Animate (' slow ', {x: ' +=10px '}

The animation effect of jquery is largely based on DOM. But for now, CSS 3 animations are far more powerful than DOM, so you can write animation effects into CSS, and then manipulate the DOM element class to show the animation.

Foo.classList.add (' animate ')

If you need to use callback functions for animations, CSS 3 also defines the corresponding events.

El.addeventlistener ("Webkittransitionend", transitionended);
El.addeventlistener ("Transitionend", transitionended);

The above is a small series for everyone to bring the original JS to replace some of the simple jquery method to achieve the full content of the hope for everyone to help, a lot of support cloud Habitat Community ~