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代码
// jQuery var els = $('.el'); // 原生方法 var els = document.querySelectorAll('.el'); // 函数法 var $ = function (el) { return document.querySelectorAll(el); } var els = $('.el'); // 或者使用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代码
// jQuery $('.el').addClass('class'); $('.el').removeClass('class'); $('.el').toggleClass('class'); // 原生方法 document.querySelector('.el').classList.add('class'); document.querySelector('.el').classList.remove('class'); document.querySelector('.el').classList.toggle('class');
附加内容（Append）
Javascript代码
// jQuery $('.el').append($('<div/>')); // 原生方法 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代码
// jQuery $('.el').parent(); // 原生方法 document.querySelector('.el').parentNode;
上一个/下一个元素
Javascript代码
// jQuery $('.el').prev(); $('.el').next(); // 原生方法 document.querySelector('.el').previousElementSibling; 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。
