JavaScript原生API

jQuery目前已经成为最流行的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});  

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