在Javascript中实现像addClass、removeClass和delay这样的jquery函数

在JavaScript中实现类似jQuery的addClass、removeClass和delay函数，可以通过原生JavaScript来完成。以下是这些函数的实现方法及其应用场景：

1. addClass

addClass函数用于向元素添加一个或多个类名。

基础概念：

classList属性：返回元素的类属性的实时DOMTokenList集合。

示例代码：

function addClass(element, className) {
    if (element.classList) {
        element.classList.add(className);
    } else {
        element.className += ' ' + className;
    }
}

应用场景：

当需要在用户交互（如点击事件）后动态添加样式类时。

2. removeClass

removeClass函数用于从元素移除一个或多个类名。

基础概念：

同样使用classList属性。

示例代码：

function removeClass(element, className) {
    if (element.classList) {
        element.classList.remove(className);
    } else {
        element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
}

应用场景：

在某些条件下需要移除之前添加的样式类时。

3. delay

delay函数用于在JavaScript中实现延时执行。

基础概念：

setTimeout函数：用于在指定的毫秒数后执行函数。

示例代码：

function delay(func, wait) {
    return new Promise(resolve => setTimeout(() => {
        func();
        resolve();
    }, wait));
}

应用场景：

在动画序列中需要等待一段时间后再执行下一步操作时。

综合示例

以下是一个综合使用上述函数的例子：

// 获取元素
const element = document.getElementById('myElement');

// 添加类
addClass(element, 'active');

// 延时执行
delay(() => {
    // 移除类
    removeClass(element, 'active');
}, 1000);