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