bacImg.jpg
很显然，这是一个问题，点进来的人肯定都想寻找答案，但是我没有，我只知道H5新API能够替代部分jQuery,但要完全代替jquery，目前还不行。
下文中为了区分jquery和新api，jquery变量名为$elem，原生为elem
从页面删除一个元素
- jquery
var $elem = $(".ClassName") //选中元素
$elem.remove(); //删除元素
- 浏览器新API
var elem = document.querySelector(".ClassName"); //选中元素
elem.remove() //删除元素
插入一个元素
- 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
$elem.fadeIn()
为了使动画更自然，通过CSS配合js，可以做一个简单的过渡渐隐渐显的效果。
.thingy {
display: none;
opacity: 0;
transition: .8s;
}
- 浏览器新API：
elem.style.display = "block";
requestAnimationFrame(() => elem.style.opacity = 1);
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
});
当然，fecth方法可能没有想象中的那么简单。这一点其实ajax还没有被超越。
当然，我们如果要想更加的易于使用它，那可以借助与一些第三方的封装好的微型的类库...
Axios是一个非常流行的专门用来进行Ajax操作的库。非常轻量，它只专注与一件事即Ajax。虽然它们不会像jQuery一样被大规模的测试使用，但是它们确实为替代jQuery提供了可代替的选择。
虽然，按现在浏览器技术的发展，使用它们提供的DOM操作方法完全可以应付web开发工作！但还是有很多的顾虑，比如各个浏览器厂商支持程度不一样，很多的开发者为了保险起见，还是觉得使用jQuery更安全一些。大多数时候，你完全不用顾虑这么多，尽管用就是了，很多的时候只要在你的页面中引用一个 polyfill就能很好的处理那些不兼容新方法的浏览器。
只需要引入这个简单的脚步，就可以处理任何兼容问题。详细可以去它的官网看看polyfill.io。
当然我并不是一个jQuery反对者。现在依然还有很多非常棒的开发者选择使用jQuery。如果你已经习惯了使用它，当然可以继续使用它。现在很多的企业在招聘的时候，仍然把它作为一个必备的技能要求。不过，微软宣布了一个消息，Internet Explorer 11将是IE浏览器的最后一个版本，一旦IE退出了web的舞台，那么jQuery也可能随着IE的消亡也会推出历史舞台。到时候，jQuery可能就真多没有存在的必要了。
本文借鉴转摘自掘金 原文地址:https://juejin.im/entry/59c85a376fb9a00a6974ff2c?utm_source=gold_browser_extension
网友评论