自从2006年，jQuery发布以来，浏览器的API和DOM取得了长足的发展。在网络上也时不时会看到，“是时候和jQuery说拜拜了”，最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。当然在此，我不想重复的再说这个陈旧的话题，不过自从那篇文章发表后，浏览器确实在一点一点的改变着，发展着。浏览器继续发布和更新它们的API，有的是直接从jQuery那借鉴过来的。
下面就来看看一些新的可以代替jQuery方法的浏览器的API。
从页面删除一个元素
在以前如果你要使用浏览器提供的API来删除一个元素，你不得不采用迂回的方法来达到目的。比如el.parentNode.removeChild(el);，现在就不用使用这样迂回的方法了。下面就来比较下jQuery和浏览器新的API删除一个元素的使用方法。
jQuery：
var $elem = $(".someClass") //选中元素
$elem.remove(); //删除元素
使用浏览器新API：
var elem = document.querySelector(".someClass"); //选中元素
elem.remove() //删除元素
这里提醒下，如果使用了$elem这种表示方法，代表使用了jQuery；如果是elem，则表示使用的是浏览器原生的方法。
插入一个元素
jQuery：
$elem.prepend($someOtherElem);
使用浏览器新API：
elem.prepend(someOtherElem);
在指定元素前插入内容
jQuery：
$elem.before($someOtherElem);
使用浏览器新API：
elem.before(someOtherElem);
替换元素
jQuery：
$elem.replaceWith($someOtherElem);
使用浏览器新API：
elem.replaceWith(someOtherElem);
找到最近的一个元素
jQuery：
$elem.closest("div");
使用浏览器新API：
elem.closest("div");
看到了么，在新的浏览器中，提供了和jQuery几乎一模一样的方法。随着浏览器技术的发展，jQuery迟早会光荣的退出历史的舞台，在web的发展史上也会留下浓墨重彩的一笔。
下面看看各个浏览器对这些新的DOM的操作方法的支持情况，数据来自Caniuse：
可以发现在桌面上支持的也还不错，主要是IE的支持情况不是很理想；而在移动端支持的比较好，可以放心大胆的使用了。
隐藏一个元素
jQuery：
$elem.fadeIn();
为了使动画更自然，通过CSS配合js，可以做一个简单的过渡渐隐渐显的效果。
.thingy {
display: none;
opacity: 0;
transition: .8s;
}
使用浏览器新API：
elem.style.display = "block";
requestAnimationFrame(() => elem.style.opacity = 1);
只触发一次事件
jQuery：
$elem.one("click", someFunc);
在以前当遇到这样只触发一次事件的时候，需要用到一个回调方法来删除事件。
function dostuff() {
alert("some stuff happened");
this.removeEventListener("click", dostuff);
}
var button = document.querySelector("button");
button.addEventListener("click", dostuff);
现在有更加方便的方法了，只需要给addEventListener方法传入一个布尔参数就可以达到这样的目的。
elem.addEventListener('click', someFunc, { once: true, });
如果你仍然想捕获这个事件并且也只调用一次，那么你依然可以通过传入一个参数来搞定：
elem.addEventListener('click', myClickHandler, {
once: true,
capture: true
});
动画
虽然jQuery提供了animate的方法，但是它的功能非常有限。
$elem.animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500);
在jQuery的文档中有说明，所以能被运动的属性的值，应该都是可以使用数字来表示的；如上所属，如果一个属性的值，不能够用数字来表示，则不能使用jQuery的animate方法。比如当你要用transform和颜色来实现动画效果的时候，就不能使用jQuery的animate方法了。不过，浏览器提供一个新的方法Web Animations API来制作动画效果。
var elem = document.querySelector('.animate-me');
elem.animate([
{
transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)',
transformOrigin: '50% 0',
filter: 'blur(40px)',
opacity: 0
},
{
transform: 'translateY(0) scaleY(1) scaleX(1)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
], 1000);
Ajax
在过去jQuery一个关键的卖点就是它的Ajax方法，jQuery把XMLHttpRequest进行了很好的封装，提供了优雅的Ajax方法，使用起来也确实非常方便：
$.ajax('https://some.url', {
success: (data) => { /* do stuff with the data */ }
});
当然现在浏览器提供fetch API来代替XMLHttpRequest，并且现在所有的浏览器都支持它。
fetch('https://some.url')
.then(response => response.json())
.then(data => {
// do stuff with the data
});
当然fetch方法可能没有想象中的那么简单。但是，它比在以XMLHttpRequest上来建立任何功能要更加的通用和方便。
当然，我们如果要想更加的易于使用它，那可以借助与一些第三方的封装好的微型的类库...
Axios是一个非常流行的专门用来进行Ajax操作的库。非常轻量，它只专注与一件事即Ajax。虽然它们不会像jQuery一样被大规模的测试使用，但是它们确实为替代jQuery提供了可代替的选择。
虽然，按现在浏览器技术的发展，使用它们提供的DOM操作方法完全可以应付web开发工作！但还是有很多的顾虑，比如各个浏览器厂商支持程度不一样，很多的开发者为了保险起见，还是觉得使用jQuery更安全一些。大多数时候，你完全不用顾虑这么多，尽管用就是了，很多的时候只要在你的页面中引用一个 polyfill就能很好的处理那些不兼容新方法的浏览器。
只需要引入这个简单的脚步，就可以处理任何兼容问题。详细可以去它的官网看看polyfill.io。
jQuery很慢吗？
当然，jQuery可能比那些写的糟糕的js要快，但是这也是你要更加好好学习javascript的理由！作为一个jQuery的主要贡献者Paul Irish曾说道：
为了有更好的性能，不要使用jQuery的hide()方法
作为jQuery的创建者，在它的一本书中Secrets of the JavaScript Ninja曾经说过这样一段话：
如果你在使用一个第三方的javascript的库的时候，你需要了解它的一个原理。最主要的一个原因是性能。了解一个库的工作原理，可以使你写出更加高性能的代码。
真的可以和jQuery说拜拜了么？
真的可以和jQuery说拜拜了么？还真不是那么容易，特别是jQuery发展了这么多年，已经形成了一个庞大的生态圈。所以现在有很多的微型库试图模仿jQuery的风格，来增加对开发者们的亲切感。
- W3C的专家Lea Verou写过一篇文章jQuery Considered Harmful并且写了一个Bliss.js微型库。它就是模仿jQuery的语法风格$。
- Paul Irish也写过一个Bling.js脚本也是用来模仿模仿jQuery的语法风格$。
- Remy Sharp提供了一个微型脚本库min.js。
当然我并不是一个jQuery反对者。现在依然还有很多非常棒的开发者选择使用jQuery。如果你已经习惯了使用它，当然可以继续使用它。现在很多的企业在招聘的时候，仍然把它作为一个必备的技能要求。不过，微软宣布了一个消息，Internet Explorer 11将是IE浏览器的最后一个版本，一旦IE退出了web的舞台，那么jQuery也可能随着IE的消亡也会推出历史舞台。到时候，jQuery可能就真多没有存在的必要了。
本文主要是从You Might Not Need jQuery这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！
