Jquery&classList

通过classList原生实现JQuery的addClass、removeClass、hasClass。
案例效果预览

JQery	JS-classList
hasClass(token)	classList.contains(token)
addClass(token)	classList.add(token)
removeClass(token)	classList.remove(token)
	classList.toggle(token)

Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList集合。但是你可以使用add和remove方法修改它。

浏览器兼容性
classList有add、contains、entries、forEach、item、keys、remove、replace、supports、toggle、values11种方法

add()

添加一个或者多个token。
语法：tokenList.add(token1[, token2[, ...tokenN]]);

<span class="a b c"></span>
// js
let span = document.querySelector("span");
let classes = span.classList;
classes.add("d");
span.textContent = classes;
// 输出 a b c d

contains()

如果包含该toekn，则返回true，否则返回false。
语法：tokenList.contains(token);

<span class="a b c"></span>
// js
let span = document.querySelector("span");
let classes = span.classList;
let result = classes.contains("c");
if (result) {
  span.textContent = "The classList contains 'c'";
} else {
   span.textContent = "The classList does not contain 'c'";
}
// 输出 The classList contains 'c'

remove()

从列表中删除一个或者多个token。
语法：tokenList.remove(token1[, token2[, ...tokenN]]);

<div id="ab" class="a b c"></div>
<div id="a" class="a b c"></div>
// js
let span = document.getElementById("ab");
let classes = span.classList;
classes.remove("c");
span.textContent = classes;

let span2 = document.getElementById("a")
let classes2 = span2.classList;
classes2.remove("c", "b");
span2.textContent = classes2;
// a b
// a

replace()

语法：tokenList.replace(oldToken, newToken);
PS：oldToken被替换的token，newToken用于替换oldToekn的。返回值为Boolean，若成功替换返回true，否则返回false，当oldToken不存在时会返回false。在较旧浏览器中，replace()会返回void。

<span class="a b c"></span>
// js
let span = document.querySelector("span");
let classes = span.classList;

let result = classes.replace("c", "z");
console.log(result);

if (result) {
  span.textContent = classes;
} else {
  span.textContent = 'token not replaced successfully';
}
// a b z

toggle()

若该token存在，从DOMTokenList中删除指定的token，并返回false。若该token不存在，则会添加指定token，并返回true。
语法：tokenList.toggle(token [, force]);
PS：force为Boolean值，表示轮流切换到单向，false则token将仅删除而不添加，true则token只添加不会被删除。

参考

classList Mdn