Native JavaScript implements jquery code effect comparison

Here is the equivalent code for jquery and JavaScript for the same operation.

Select Element

JavaScript code

2. Jquery
4. var els = $ ('. el ');
8. Native methods
10. var els = document.queryselectorall ('. el ');
14. Function method
16. var $ = function (el) {
18. return Document.queryselectorall (el);
20. }
24. var els = $ ('. el ');
28. or use regex-based micro-selector library, address: http://jsperf.com/micro-selector-libraries

Creating Elements

JavaScript code

1. Jquery
2. var newel = $ (' <div/> ');
4. Native methods
5. var newel = document.createelement (' div ');

Adding event listeners

JavaScript code

1. Jquery
2. $ ('. el '). on (' event ', function () {
4. });
6. Native methods
7. [].foreach.call (document.queryselectorall ('. el '), function (el) {
8. El.addeventlistener (' event ', function () {
10. }, false);
11. });

Set/get Properties

JavaScript code

1. Jquery
2. $ ('. El '). filter (': first '). attr ('key ', ' value ');
3. $ ('. El '). filter (': first '). attr ('key ');
5. Native methods
6. Document.queryselector ('. el '). setAttribute ('key ', ' value ');
7. Document.queryselector ('. el '). getattribute ('key ');

Add/remove/toggle Classes

JavaScript code

1. Jquery
2. $ ('. el '). addclass ('class ');
3. $ ('. el '). removeclass ('class ');
4. $ ('. el '). toggleclass ('class ');
6. Native methods
7. Document.queryselector ('. el '). classlist.add ('class ');
8. Document.queryselector ('. el '). classlist.remove ('class ');
9. Document.queryselector ('. el '). classlist.toggle ('class ');

Additional content (Append)

JavaScript code

1. Jquery
2. $ ('. el '). append ($ ('<div/> '));
4. Native methods
5. Document.queryselector ('. el '). appendchild (document.createelement (' div '));

Cloning elements

JavaScript code

1. Jquery
2. var Clonedel = $ ('. el '). clone ();
4. Native methods
5. var Clonedel = document.queryselector ('. el '). cloneNode (true);

remove Element

JavaScript code

1. Jquery
2. $ ('. el '). Remove ();
4. Native methods
5. Remove ('. el ');
7. function Remove (el) {
8. var toremove = Document.queryselector (el);
10. ToRemove.parentNode.removeChild (toremove);
11. }

Get parent element

JavaScript code

1. Jquery
2. $ ('. el '). Parent ();
4. Native methods
5. Document.queryselector ('. el '). parentnode;

previous/next Element

JavaScript code

1. Jquery
2. $ ('. el '). prev ();
3. $ ('. el '). next ();
5. Native methods
6. Document.queryselector ('. el '). previouselementsibling;
7. Document.queryselector ('. el '). nextelementsibling;

XHR or Ajax

JavaScript code

2. Jquery
4. $.get (' url ', function (data) {
8. });
10. $.post (' url ', {data:data}, function (data) {
14. });
18. Native methods
20. Get
22. var xhr = new XMLHttpRequest ();
26. Xhr.open (' GET ', url);
28. Xhr.onreadystatechange = function (data) {
32. }
34. Xhr.send ();
38. Post
40. var xhr = new XMLHttpRequest ()
44. Xhr.open (' POST ', url);
46. Xhr.onreadystatechange = function (data) {
50. }
52. Xhr.send ({data:data});

Native JavaScript implements the jquery code effect comparison