JQUERY设置和获取以及修改CLASS NAME值操作

封面图 • 2025-10-27 • jQuery

在 jQuery 中，设置、获取和修改元素的 `class` 名称（即 `class` 属性）是非常常见的操作。以下是几种常用的方法：

---

## ✅ 一、获取 class 名称

### 方法 1：使用 `.attr('class')`
```javascript
var className = $('#myElement').attr('class');
console.log(className); // 输出当前元素的 class 值
```

### 方法 2：使用 `.prop('class')`
```javascript
var className = $('#myElement').prop('class');
console.log(className); // 同样输出 class 值
```

> **注意**：`.attr()` 和 `.prop()` 在某些浏览器中可能有差异，但一般情况下都可以使用。

---

## ✅ 二、设置 class 名称

### 方法 1：使用 `.attr('class', 'newClass')`
```javascript
$('#myElement').attr('class', 'newClass');
```

### 方法 2：使用 `.prop('class', 'newClass')`
```javascript
$('#myElement').prop('class', 'newClass');
```

### 方法 3：使用 `.addClass('newClass')`（添加一个类）
```javascript
$('#myElement').addClass('newClass');
```

> 添加多个类：
```javascript
$('#myElement').addClass('class1 class2');
```

### 方法 4：使用 `.removeClass('oldClass')`（移除一个类）
```javascript
$('#myElement').removeClass('oldClass');
```

### 方法 5：使用 `.toggleClass('className')`（切换类）
```javascript
$('#myElement').toggleClass('active');
```

> 如果类存在则移除，不存在则添加。

---

## ✅ 三、修改 class 名称（替换或更新）

### 方法 1：直接设置新的 class 名称
```javascript
$('#myElement').attr('class', 'newClass');
```

### 方法 2：先移除旧类，再添加新类
```javascript
$('#myElement')
    .removeClass('oldClass')
    .addClass('newClass');
```

### 方法 3：使用 `.replaceClass()`（不推荐，jQuery 不支持此方法）

> 注意：jQuery 没有内置的 `.replaceClass()` 方法，但可以通过组合使用 `.removeClass()` 和 `.addClass()` 实现类似功能。

---

## ✅ 四、示例代码汇总

```html
<div id="myElement" class="oldClass">Hello</div>

// 设置 class
    $('#myElement').attr('class', 'newClass');

// 添加类
    $('#myElement').addClass('anotherClass');

// 移除类
    $('#myElement').removeClass('oldClass');

// 切换类
    $('#myElement').toggleClass('active');

// 替换类（组合操作）
    $('#myElement')
        .removeClass('oldClass')
        .addClass('replacedClass');
</script>
```

---

## ✅ 五、注意事项

- 使用 `.attr('class', 'value')` 会**完全覆盖**原来的 class。
- 使用 `.addClass()` 或 `.removeClass()` 是更安全的方式，避免意外删除其他类。
- 如果你需要处理多个类，建议使用 `.hasClass()` 来判断是否存在某个类。

---

如果你还有更具体的需求（比如动态切换多个类、根据条件修改类等），欢迎继续提问！