使用JavaScript原生API替换Jquery

Query目前已经成为最流行的JavaScript库，它可以让开发者“write less, do more（写得更少，做得更多）”，这也是它的核心理念。通过它，用户可以更方便地处理HTML documents、events，更轻松地实现动画效果、AJAX交互等。 

尽管jQuery帮助开发者节省了大量的工作，但是并不是所有的产品都适合使用jQuery。jQuery 2.0.3版本有236KB，压缩版也有81KB，这意味着你的Web产品需要额外的加载时间和带宽，而在移动设备上则需要更多。 

如果你的产品中只有少量的前端效果或DOM操作，那么完全可以抛弃臃肿的jQuery，转而使用JavaScript原生API来实现。  

以下是jQuery和JavaScript实现相同操作的等价代码。 

选择元素  

Javascript代码 

1. // jQuery  
2. var els = $('.el');  
3.   
4. // 原生方法  
5. var els = document.querySelectorAll('.el');  
6.   
7. // 函数法  
8. var $ = function (el) {  
9.   return document.querySelectorAll(el);  
10. }  
11.   
12. var els = $('.el');  
13.   
14. // 或者使用regex-based micro-selector库，地址：http://jsperf.com/micro-selector-libraries  

创建元素  

Javascript代码 

1. // jQuery  
2. var newEl = $('<div/>');  
3.   
4. // 原生方法  
5. var newEl = document.createElement('div');  

添加事件监听器  

Javascript代码 

1. // jQuery  
2. $('.el').on('event', function() {  
3.   
4. });  
5.   
6. // 原生方法  
7. [].forEach.call(document.querySelectorAll('.el'), function (el) {  
8.   el.addEventListener('event', function() {  
9.   
10.   }, false);  
11. });  

设置/获取属性  

Javascript代码 

1. // jQuery  
2. $('.el').filter(':first').attr('key', 'value');  
3. $('.el').filter(':first').attr('key');  
4.   
5. // 原生方法  
6. document.querySelector('.el').setAttribute('key', 'value');  
7. document.querySelector('.el').getAttribute('key');  

添加/移除/切换类  

Javascript代码 

1. // jQuery  
2. $('.el').addClass('class');  
3. $('.el').removeClass('class');  
4. $('.el').toggleClass('class');  
5.   
6. // 原生方法  
7. document.querySelector('.el').classList.add('class');  
8. document.querySelector('.el').classList.remove('class');  
9. document.querySelector('.el').classList.toggle('class');  

附加内容（Append）  

Javascript代码 

1. // jQuery  
2. $('.el').append($('<div/>'));  
3.   
4. // 原生方法  
5. document.querySelector('.el').appendChild(document.createElement('div'));  

克隆元素  

Javascript代码 

1. // jQuery  
2. var clonedEl = $('.el').clone();  
3.   
4. // 原生方法  
5. var clonedEl = document.querySelector('.el').cloneNode(true);  

移除元素  

Javascript代码 

1. // jQuery  
2. $('.el').remove();  
3.   
4. // 原生方法  
5. remove('.el');  
6.   
7. function remove(el) {  
8.   var toRemove = document.querySelector(el);  
9.   
10.   toRemove.parentNode.removeChild(toRemove);  
11. }  

获取父元素  

Javascript代码 

1. // jQuery  
2. $('.el').parent();  
3.   
4. // 原生方法  
5. document.querySelector('.el').parentNode;  

上一个/下一个元素  

Javascript代码 

1. // jQuery  
2. $('.el').prev();  
3. $('.el').next();  
4.   
5. // 原生方法  
6. document.querySelector('.el').previousElementSibling;  
7. document.querySelector('.el').nextElementSibling;  

XHR或AJAX  

Javascript代码 

1. // jQuery  
2. $.get('url', function (data) {  
3.   
4. });  
5. $.post('url', {data: data}, function (data) {  
6.   
7. });  
8.   
9. // 原生方法  
10. // get  
11. var xhr = new XMLHttpRequest();  
12.   
13. xhr.open('GET', url);  
14. xhr.onreadystatechange = function (data) {  
15.   
16. }  
17. xhr.send();  
18.   
19. // post  
20. var xhr = new XMLHttpRequest()  
21.   
22. xhr.open('POST', url);  
23. xhr.onreadystatechange = function (data) {  
24.   
25. }  
26. xhr.send({data: data});  

以上这些只是很少一部分，你可以在浏览器的控制台中找到更多东西，或者可以参考 MDN的JS API reference 或者 WPD的DOM文档 。 

你也可以使用其他非常轻量级的库代替，比如 http://microjs.com/ 列出的一些库，根据你的需求选择最合适的库，但首先要清楚，除非是不使用库无法实现某项功能，否则还是使用原生JavaScript。 

英文原文： How to forget about jQuery and start using native JavaScript APIs