jQuery - 获取并设置 CSS 类

jQuery - 获取并设置 CSS 类 学习笔记CSS 类Class是控制元素样式的关键。jQuery 提供了一组简洁的方法来动态地添加、移除、切换和检查 CSS 类这是实现交互效果如高亮、显示/隐藏、状态切换最常用的手段。一、核心方法1..addClass()- 添加类向匹配的元素添加一个或多个 CSS 类。// 语法$(selector).addClass(className);$(selector).addClass(className1,className2,...);// 多个类用空格分隔$(selector).addClass(function(index,oldClass));// 示例// 添加单个类$(#box).addClass(active);// 添加多个类$(#box).addClass(highlight red-border);// 使用函数动态添加根据索引或旧类名$(li).addClass(function(i,oldClass){returnitem-(i1);// 添加 item-1, item-2...});// 链式调用$(#btn).addClass(btn-primary).addClass(disabled).prop(disabled,true);特点✅ 不会覆盖元素原有的类而是追加。✅ 如果类已存在不会重复添加。2..removeClass()- 移除类从匹配的元素移除一个或多个 CSS 类。// 语法$(selector).removeClass(className);$(selector).removeClass();// 移除所有类$(selector).removeClass(function(index,oldClass));// 示例// 移除单个类$(#box).removeClass(active);// 移除多个类$(#box).removeClass(highlight red-border);// 移除所有类慎用$(#box).removeClass();// 元素变成 div idbox/div// 使用函数动态移除$(li).removeClass(function(i,oldClass){// 移除所有以 item- 开头的类varmatcholdClass.match(/item-\d/);returnmatch?match[0]:;});特点✅ 如果类不存在不会报错静默忽略。✅ 可以移除部分类保留其他类。3..toggleClass()- 切换类如果元素有该类则移除如果没有则添加。常用于实现“开关”效果。// 语法$(selector).toggleClass(className);$(selector).toggleClass(className,switch);// switch 为 true 则添加false 则移除$(selector).toggleClass(function(index,oldClass));// 示例// 点击切换$(#btn).click(function(){$(this).toggleClass(active);});// 强制添加如果 switch 为 true$(#box).toggleClass(highlight,true);// 强制移除如果 switch 为 false$(#box).toggleClass(highlight,false);// 切换多个类$(#box).toggleClass(highlight red-border);特点✅ 最常用于交互反馈如选中、展开/收起、亮色/暗色模式。✅ 代码简洁无需判断当前状态。4..hasClass()- 检查类检查匹配的元素是否包含指定的 CSS 类。返回true或false。// 语法$(selector).hasClass(className);// 示例if($(#box).hasClass(active)){console.log(元素处于激活状态);}else{console.log(元素未激活);}// 在事件处理中$(li).click(function(){if($(this).hasClass(selected)){$(this).removeClass(selected);}else{// 先移除其他所有 li 的 selected$(li).removeClass(selected);$(this).addClass(selected);}});特点✅ 返回布尔值常用于条件判断。✅ 只要有一个匹配元素包含该类就返回true。二、方法对比总结方法作用返回值典型场景.addClass()添加类jQuery 对象激活状态、高亮.removeClass()移除类jQuery 对象取消激活、清除错误.toggleClass()切换类jQuery 对象开关、折叠/展开.hasClass()检查类true/false条件判断、逻辑控制三、实际应用案例1. 导航菜单高亮// 点击菜单项高亮当前项$(.nav-item).click(function(){// 移除所有项的 active 类$(.nav-item).removeClass(active);// 给当前点击项添加 active 类$(this).addClass(active);});// 或者使用 toggleClass (如果是单选需配合移除其他)// 更简洁的写法利用 hasClass 判断$(.nav-item).click(function(){if($(this).hasClass(active)){$(this).removeClass(active);}else{$(.nav-item).removeClass(active);$(this).addClass(active);}});2. 表单验证错误提示// 验证输入functionvalidateInput($input){varval$input.val().trim();if(val){// 添加错误类$input.addClass(error);// 显示错误消息$input.next(.error-msg).show();returnfalse;}else{// 移除错误类$input.removeClass(error);// 隐藏错误消息$input.next(.error-msg).hide();returntrue;}}// 实时验证$(#username).on(blur,function(){validateInput($(this));});3. 手风琴效果 (Accordion)// 点击标题切换内容显示$(.accordion-header).click(function(){// 切换当前项的 active 类$(this).toggleClass(active);// 切换对应内容的显示/隐藏$(this).next(.accordion-content).slideToggle();// 可选关闭其他所有项互斥$(.accordion-header).not(this).removeClass(active).next(.accordion-content).slideUp();});4. 表格行斑马纹与悬停// 初始化斑马纹虽然 CSS :nth-child 更好但 jQuery 也可实现$(tbody tr).addClass(function(i){returni%20?even:odd;});// 悬停效果$(tbody tr).hover(function(){$(this).addClass(hover);},function(){$(this).removeClass(hover);});// 或者使用 CSS :hoverjQuery 仅用于选中状态$(tbody tr).click(function(){// 移除所有行的 selected$(tbody tr).removeClass(selected);// 添加当前行 selected$(this).addClass(selected);});5. 主题切换 (亮色/暗色)// 切换主题$(#themeToggle).click(function(){$(body).toggleClass(dark-theme);// 切换图标$(this).toggleClass(sun-icon moon-icon);// 保存用户偏好varisDark$(body).hasClass(dark-theme);localStorage.setItem(theme,isDark?dark:light);});// 页面加载时恢复主题$(function(){varsavedThemelocalStorage.getItem(theme);if(savedThemedark){$(body).addClass(dark-theme);$(#themeToggle).addClass(moon-icon).removeClass(sun-icon);}});四、注意事项1. 类名格式类名不需要带点号.。✅$(#box).addClass(active)❌$(#box).addClass(.active)2. 多个类名多个类名之间用空格分隔作为单个字符串传递。✅$(#box).addClass(class1 class2 class3)❌$(#box).addClass(class1, class2)(这是错误的第二个参数会被忽略或报错)3. 性能优化频繁操作类名如滚动事件中可能影响性能。优先使用 CSS:hover,:active等伪类仅在需要 JS 逻辑时使用 jQuery 类操作。批量操作先构建好类名字符串一次性添加/移除比多次调用更高效。4. 与.css()的区别优先使用类.addClass()等方法是推荐的做法因为样式定义在 CSS 文件中易于维护和复用。避免直接操作样式除非动态计算值如根据滚动位置改变透明度否则不要频繁使用.css()设置样式。✅ 推荐$(#box).addClass(highlight)(CSS 中定义.highlight { color: red; })❌ 不推荐$(#box).css(color, red)(样式散落在 JS 中难维护)5. 链式调用所有类操作方法都支持链式调用方便连续操作。$(#btn).addClass(btn-primary).removeClass(btn-default).toggleClass(disabled).fadeIn();五、总结jQuery 的类操作方法简洁高效添加:.addClass(class)移除:.removeClass(class)切换:.toggleClass(class)(最常用)检查:.hasClass(class)最佳实践将样式定义在 CSS 文件中JS 只负责切换类名。使用.toggleClass()实现开关效果。使用.hasClass()进行状态判断。避免直接操作内联样式.css()除非必须动态计算。掌握这些方法可以轻松实现丰富的交互效果和动态样式变化