异常教程

jQuery 获取并设置 CSS 类（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代网页开发中，CSS 类（Class）是控制元素样式、状态和交互的核心工具。而 jQuery 作为简化 JavaScript 操作的库，提供了便捷的方法来实现对 CSS 类的快速获取与动态修改。无论是切换按钮的悬停效果，还是根据用户行为高亮导航栏，这些场景都离不开对 CSS 类的精准控制。本文将从基础语法到实战案例，系统讲解如何使用 jQuery 完成“获取并设置 CSS 类”的操作，帮助开发者高效实现动态网页效果。

一、基础概念：CSS 类与 jQuery 的关系

1.1 什么是 CSS 类？

CSS 类是 HTML 元素中用于定义样式的属性。例如：

<div class="highlight">这是一个高亮区域</div>

通过 CSS 定义 .highlight { background-color: yellow; }，即可让元素呈现黄色背景。类的灵活性在于，可以通过 JavaScript 或 jQuery 动态修改其值，从而改变元素的样式或状态。

1.2 jQuery 的优势

jQuery 通过封装原生 JavaScript 的复杂操作，提供了简洁的方法链式调用。例如，原生 JavaScript 需要 element.classList.add('class')，而 jQuery 可直接写成 .addClass('class')，语法更直观，代码量更少。

二、核心方法详解：获取与设置 CSS 类

2.1 设置类的方法

2.1.1 addClass()：添加类

语法：

$(selector).addClass(className);

示例：

<button id="btn-add">添加高亮</button>  
<div id="content">点击按钮让我变黄</div>  

<script>  
  $('#btn-add').click(function() {  
    $('#content').addClass('highlight');  
  });  
</script>

效果：点击按钮后，#content 元素会获得 .highlight 类，背景变为黄色。

2.1.2 removeClass()：移除类

语法：

$(selector).removeClass(className);

示例：

<button id="btn-remove">移除高亮</button>  
<div class="highlight" id="content">点击按钮让我恢复原色</div>  

<script>  
  $('#btn-remove').click(function() {  
    $('#content').removeClass('highlight');  
  });  
</script>

效果：点击按钮后，.highlight 类被移除，元素恢复默认样式。

2.1.3 toggleClass()：切换类

语法：

$(selector).toggleClass(className);

示例：

<button id="btn-toggle">切换高亮</button>  
<div class="highlight" id="content">点击按钮来回切换</div>  

<script>  
  $('#btn-toggle').click(function() {  
    $('#content').toggleClass('highlight');  
  });  
</script>

效果：每次点击按钮，.highlight 类会在存在和不存在之间切换，类似“灯的开关”。

2.2 获取类的方法

2.2.1 attr('class')：获取原始类名

语法：

$(selector).attr('class');

示例：

const currentClass = $('#content').attr('class');  
console.log(currentClass); // 输出 "highlight"

注意：此方法返回元素当前的完整类名字符串，若需单独操作某个类，需进一步拆分或检查。

2.2.2 hasClass()：判断是否存在特定类

语法：

$(selector).hasClass(className); // 返回布尔值

示例：

if ($('#content').hasClass('highlight')) {  
  console.log('元素已高亮');  
} else {  
  console.log('元素未高亮');  
}

比喻：hasClass() 就像检查衣柜里是否有一件特定的外套，直接返回“有”或“没有”。

三、进阶技巧：动态条件与链式操作

3.1 动态条件判断

结合逻辑运算符，可以实现更灵活的类操作。例如：

// 根据时间切换主题  
const hour = new Date().getHours();  
if (hour < 18) {  
  $('body').removeClass('dark-mode');  
} else {  
  $('body').addClass('dark-mode');  
}

效果：白天显示浅色主题，晚上切换为深色主题。

3.2 链式调用与多类操作

jQuery 支持方法链式调用，可一次性完成多个操作：

$('#btn').click(function() {  
  $(this)  
    .addClass('clicked')  
    .removeClass('unclicked')  
    .toggleClass('active');  
});

优势：减少代码冗余，提升可读性。

四、实战案例：导航栏高亮与表单验证

4.1 案例 1：动态高亮当前页面导航

需求：根据 URL 路径，为导航栏的当前页面项添加 active 类。
实现步骤：

  1. HTML 结构：
<ul id="nav">  
  <li class="nav-item" data-page="home">首页</li>  
  <li class="nav-item" data-page="about">关于我们</li>  
  <li class="nav-item" data-page="contact">联系我们</li>  
</ul>
  1. JavaScript 逻辑：
const currentPath = window.location.pathname.split('/').pop() || 'home';  
$('#nav .nav-item').each(function() {  
  if ($(this).data('page') === currentPath) {  
    $(this).addClass('active');  
  }  
});

效果：访问 /contact 时，对应的导航项自动高亮。

4.2 案例 2：表单提交时的错误提示

需求：当用户提交表单且输入为空时，为输入框添加 error 类并显示提示。
实现步骤：

  1. HTML 结构：
<form id="myForm">  
  <input type="text" id="username" placeholder="请输入用户名">  
  <button type="submit">提交</button>  
</form>
  1. JavaScript 逻辑：
$('#myForm').submit(function(e) {  
  e.preventDefault();  
  const username = $('#username').val().trim();  
  if (username === '') {  
    $('#username')  
      .addClass('error')  
      .siblings('.error-message')  
        .text('用户名不能为空！');  
  } else {  
    $('#username').removeClass('error');  
  }  
});

效果：输入为空时，输入框边框变红并显示错误提示。

五、对比与扩展：与原生 JavaScript 的差异

5.1 原生 JavaScript 的实现

以 addClass 为例，原生代码需：

const element = document.getElementById('content');  
element.classList.add('highlight');

而 jQuery 可直接：

$('#content').addClass('highlight');

优势：jQuery 的封装简化了 DOM 操作，尤其在兼容性处理上更高效。

5.2 其他相关方法

  • prop('className')：获取或设置类名（返回字符串）。
  • css() 方法：直接修改内联样式，但优先级高于类样式。

六、常见问题与最佳实践

6.1 问题 1：如何同时操作多个类？

解决方案：

// 添加多个类  
$('#element').addClass('class1 class2');  
// 移除多个类  
$('#element').removeClass('class1 class2');

6.2 问题 2：如何避免类名冲突？

建议：

  • 使用 BEM 命名规范（如 button__primary--active）。
  • 通过父级作用域隔离样式（如 <div class="module"> 内部的类仅作用于该模块）。

结论

通过掌握 jQuery 获取并设置 CSS 类 的核心方法，开发者可以轻松实现动态样式切换、交互反馈和复杂状态管理。从基础的 addClass/removeClass 到高级的条件判断与链式调用，这些工具链为现代网页开发提供了高效且直观的解决方案。建议读者通过实际项目反复练习，例如构建可折叠侧边栏或响应式菜单，逐步提升对 CSS 类动态控制的熟练度。记住，代码的简洁性与可维护性同样重要——善用类名管理，你的项目将更加优雅且易于扩展！

最新发布

查看更多文章