在JavaScript的世界里，jQuery库因其简洁的语法和丰富的功能而被广泛应用。然而，在现代浏览器环境中，许多jQuery的方法已经被原生JavaScript实现所替代，这使得我们可以更高效地编写代码，同时减少依赖。以下是一些常见的jQuery方法，以及如何使用原生JavaScript进行封装。
### 1. `hasClass` - 判断元素是否包含特定类
`hasClass` 方法用于检测一个DOM元素是否具有指定的CSS类。在jQuery中，它的使用非常简单，如 `$(element).hasClass('className')`。在原生JS中，我们可以这样实现：
```javascript
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|$)'));
}
}
```
这里，我们首先检查元素和类名是否存在，然后使用 `classList.contains`（对于现代浏览器）或正则表达式匹配（对于旧版浏览器）来检查元素是否包含类。
### 2. `addClass` - 添加类
`addClass` 方法用于向元素添加一个或多个类。在jQuery中，使用 `$(element).addClass('className')`。原生JS的实现如下：
```javascript
function addClass(ele, cls) {
if (ele.classList) {
ele.classList.add(cls);
} else {
if (!hasClass(ele, cls)) ele.className += ' ' + cls;
}
}
```
这里，我们同样先检查元素和类名，然后使用 `classList.add` 或在不包含类时拼接类名到 `className` 属性上。
### 3. `removeClass` - 移除类
`removeClass` 方法用于从元素中移除指定的类。在jQuery中，使用 `$(element).removeClass('className')`。原生JS的实现如下：
```javascript
function removeClass(ele, cls) {
if (ele.classList) {
ele.classList.remove(cls);
} else {
ele.className = ele.className.replace(new RegExp('(^|\\b)' + cls.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
```
这里，我们使用 `classList.remove` 或通过正则表达式替换来移除类名。注意，当需要移除多个类时，我们需要先将类名转换为数组并使用 `split(' ')`，然后将数组元素连接成正则表达式的模式。
### 扩展：其他常用的jQuery方法的原生JS封装
- `toggleClass` - 切换类：原生JS可以使用 `classList.toggle` 来实现。
- `attr` - 获取/设置属性：原生JS可以使用 `element.getAttribute` 和 `element.setAttribute`。
- `css` - 获取/设置样式：原生JS可以使用 `window.getComputedStyle` 和 `element.style.property`。
- `data` - 存取自定义数据：可以使用 `element.dataset`。
- `on` - 绑定事件：原生JS可以使用 `addEventListener`。
- `off` - 解绑事件：原生JS可以使用 `removeEventListener`。
以上是原生JavaScript封装jQuery常用方法的一些基本实现。在实际开发中，可能需要根据具体需求进行优化和扩展，例如处理多元素的情况、考虑性能优化等。了解这些原生方法有助于提高代码的效率和可维护性，同时也使代码更加轻量级，尤其在不需要整个jQuery库的情况下。
