本文详细介绍如何使用原生JavaScript封装常用的jQuery类操作方法，包括判断元素是否包含指定class、添加class以及移除class。代码兼容支持classList的现代浏览器与旧版IE，通过RegExp正则匹配实现兼容处理，帮助开发者在无jQuery环境下高效操作DOM样式。
原生JS封装jQuery类方法概述
本文旨在记录并分享使用原生JavaScript封装的常用jQuery方法，以便在无需依赖jQuery库的情况下进行DOM操作。
判断元素是否包含class
首先介绍判断元素是否包含指定class的方法。该功能对应jQuery中的hasClass，用于检测目标元素是否拥有特定的CSS类名。
function hasClass(ele, cls) {
if (!ele || !cls) return false;
if (ele.classList) {
return ele.classList.contains(cls);
} else {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
}向元素添加class
其次介绍添加class的方法。该功能对应jQuery中的addClass，用于向目标元素追加指定的CSS类名，若元素已存在该类名则不做重复添加。
function addClass(ele, cls) {
if (ele.classList) {
ele.classList.add(cls);
} else {
if (!hasClass(ele, cls)) ele.className += '' + cls;
}
}从元素移除class
最后介绍移除class的方法。该功能对应jQuery中的removeClass，用于从目标元素中移除指定的CSS类名，确保元素不再应用该类的样式规则。
function removeClass(ele, cls) {
if (ele.classList) {
ele.classList.remove(cls);
} else {
ele.className = ele.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}以上即为原生JavaScript封装的几个核心jQuery类操作方法的全部内容。这些封装方法提供了简洁的API，有助于提升开发效率，希望能为读者在实际项目中提供实用参考。