Start using JavaScript native API

I didn't come here to argue about the differences between native APIs and function libraries, and it is difficult to use these magic stuff during development. However, I would like to discuss whether it is really necessary to load jQuery if only a selector ($) or something similar is used.

Suppose we didn't want to simplify it. Everyone uses jSomething because it supports IE, animation processing, and Selector functions.

Native equivalents
Select Element

1. // JQuery
2. Var els = $ ('. el ');
3.  
4. // Native
5. Var els = document. querySelectorAll ('. el ');
6.  
7. // Shorthand
8. Var $ = function (el ){
9. Return document. querySelectorAll (el );
10. }
11.  
12. Var els = $ ('. el ');
13.  
14. // Or use regex-based micro-selector lib
15. // Http://jsperf.com/micro-selector-libraries

Create Element

1. // JQuery
2. Var newEl = $ ('<div/> ');
3.  
4. // Native
5. Var newEl = document. createElement ('div ');
6. Add event listener
7. // JQuery
8. $ ('. El'). on ('event', function (){
9.  
10. });
11.  
12. // Native
13. []. ForEach. call (document. querySelectorAll ('. el'), function (el ){
14. El. addEventListener ('event', function (){
15.  
16. }, False );
17. });

Set/get attributes

1. // JQuery
2. $ ('. El'). filter (': first '). attr ('key', 'value ');
3. $ ('. El'). filter (': first '). attr ('key ');
4.  
5. // Native
6. Document. querySelector ('. el'). setAttribute ('key', 'value ');
7. Document. querySelector ('. el'). getAttribute ('key ');
8. Add/remove/toggle class
9. // JQuery
10. $ ('. El'). addClass ('class ');
11. $ ('. El'). removeClass ('class ');
12. $ ('. El'). toggleClass ('class ');
13.  
14. // Native
15. Document. querySelector ('. el'). classList. add ('class ');
16. Document. querySelector ('. el'). classList. remove ('class ');
17. Document. querySelector ('. el'). classList. toggle ('class ');

Additional

1. // JQuery
2. $ ('. El'). append ($ (' <div/> '));
3.  
4. // Native
5. Document. querySelector ('. el'). appendChild (document. createElement ('div '));

Clone

1. // JQuery
2. Var clonedEl = $ ('. el'). clone ();
3.  
4. // Native
5. Var clonedEl = document. querySelector ('. el'). cloneNode (true );

Remove

1. // JQuery
2. $ ('. El'). remove ();
3.  
4. // Native
5. Remove ('. el ');
6.  
7. Function remove (el ){
8. Var toRemove = document. querySelector (el );
9.  
10. ToRemove. parentNode. removeChild (toRemove );
11. }

Parent Element

1. // JQuery
2. $ ('. El'). parent ();
3.  
4. // Native
5. Document. querySelector ('. el'). parentNode;
6. Prev/next element
7. // JQuery
8. $ ('. El'). prev ();
9. $ ('. El'). next ();
10.  
11. // Native
12. Document. querySelector ('. el'). previuselementsibling;
13. Document. querySelector ('. el'). nextElementSibling;
14. XHR aka AJAX
15. // JQuery
16. $. Get ('url', function (data ){
17.  
18. });
19. $. Post ('url', {data: data}, function (data ){
20.  
21. });
22.  
23. // Native
24.  
25. // Get
26. Var xhr = new XMLHttpRequest ();
27.  
28. Xhr. open ('get', url );
29. Xhr. onreadystatechange = function (data ){
30.  
31. }
32. Xhr. send ();
33.  
34. // Post
35. Var xhr = new XMLHttpRequest ()
36.  
37. Xhr. open ('post', url );
38. Xhr. onreadystatechange = function (data ){
39.  
40. }
41. Xhr. send ({data: data });

Of course, you can also use the library. Here, the lightweight library can find some libraries for specific tasks, but first make sure that you cannot complete the task without this library, otherwise-use native JavaScript.