什么不用jQuery？因为它让你的网站体积变得臃肿。你的网站并不真的需要jQuery，不需要它带来的额外体积、带宽和加载时间。
用原生JavaScript简单实现jQuery提供的功能和方法
查找、选择页面元素
// jQuery 实现
var els = $('.el'); // 原生JavaScript实现
var els = document.querySelectorAll('.el'); // 简写
var $ = function (el) {
return document.querySelectorAll(el);
} var els = $('.el');
创建元素
// jQuery 实现
var newEl = $('<div/>'); // 原生JavaScript实现
var newEl = document.createElement('div');
事件、监听器操作
// jQuery 实现
$('.el').on('event', function() { }); // 原生JavaScript实现
[].forEach.call(document.querySelectorAll('.el'), function (el) {
el.addEventListener('event', function() { }, false);
});
设置、修改和获取属性值
// jQuery 实现
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key'); // 原生JavaScript实现
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');
增加/修改/删除/反转 类操作
// jQuery 实现
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class'); // 原生JavaScript实现
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
追加元素 Append
// jQuery 实现
$('.el').append($('<div/>')); // 原生JavaScript实现
document.querySelector('.el').appendChild(document.createElement('div'));
复制、克隆元素
// jQuery 实现
var clonedEl = $('.el').clone(); // 原生JavaScript实现
var clonedEl = document.querySelector('.el').cloneNode(true);
删除元素
// jQuery 实现
$('.el').remove(); // 原生JavaScript实现
remove('.el'); function remove(el) {
var toRemove = document.querySelector(el); toRemove.parentNode.removeChild(toRemove);
}
父元素操作
// jQuery 实现
$('.el').parent(); // 原生JavaScript实现
document.querySelector('.el').parentNode;
前一个/下一个/临近同辈元素
/ jQuery 实现
$('.el').prev();
$('.el').next(); // 原生JavaScript实现
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;
XHR aka AJAX
新版的JavaScript API里提供了一个全新的可以实现ajax的API——fetch，这个api采用了全新的 Promise 架构，使用起来更方便，更灵活，详细用法请参考《你不需要jQuery(三)：新AJAX方法fetch()》。
下面是传统的实现方式：
// jQuery 实现
$.get('url', function (data) { });
$.post('url', {data: data}, function (data) { }); // 原生JavaScript实现 // get
var xhr = new XMLHttpRequest(); xhr.open('GET', url);
xhr.onreadystatechange = function (data) { }
xhr.send(); // post
var xhr = new XMLHttpRequest() xhr.open('POST', url);
xhr.onreadystatechange = function (data) { }
xhr.send({data: data});
不可否认，jQuery有时候是开发项目时必不可少的，但不同的项目，不同的场景，项目的技术架构，都需要做不同的考量，经过冷静的思考，我们就会发现，很多时候，我并不需要jQuery，使用原生JavaScript技术反而项目变得更精简、效率更高。