内容与属性是内功，样式是衣裳。上一式练的是怎么说，这一式练的是怎么穿—— 加一件、脱一件、随时换，全在鼠标起落之间。

本式要点
  • 会用 addClass / removeClass / toggleClass / hasClass 管理类名
  • 会用 css() 读单个属性、写单个属性、用对象一次写多个
  • 知道 toggleClass 的第二参数能“强制开或关”，css() 也支持回调写法

类名四兄弟

类名是样式的开关——Bootstrap 的样式与本站皮肤，全都挂在 class 上。 所以 jQuery 把“换装”做成了四个方法：

例 1 · 点赞按钮：toggleClass 切换红心

注意 toggleClass 的参数用空格隔开，可以一次切换多个类——空心、实心、朱砂色三个类同起同落。 心形图标来自站内自带的 Bootstrap Icons 图标库（第二回第十四式细讲）。

toggleClass 的第二个参数

toggleClass(类名, 开关) 还接受第二个布尔参数：true 表示“无论现在有没有，都给我加上”， false 表示“无论现在有没有，都给我去掉”。当样式该由程序状态决定、 而不是由“点一下翻一下”决定时，用它正合适。

心法：状态与动作分开

交互用无参的 toggleClass（来回翻），程序状态用第二参数（对齐现实）。 练功第一题就是这道题。

css：直接写样式

类名管“成套样式”，css() 管“单个或临时的样式”。它有四种形态：

例 2 · 鼠标进出卡片高亮（mouseenter/mouseleave + addClass）

心法：样式是衣裳，类名是衣钩。把鼠标移进卡片——影子浮起；移出去——归于平静。

鼠标进入加 shadow 类、离开再摘掉——两个 .on() 连写，也是链式调用。 （mouseenter / mouseleave 是下一式的主角，这里先混个脸熟。）

例 3 · 进度条步进：点击加 25%（css 读 + 写）
0%

这里先 css('width') 读、算完再 css('width', …) 写。留意两个小细节： css('width') 读到的是浏览器计算后的像素值（不是我们写的百分比）， 所以演示把轨道定成 240px 宽，每步加 60px 恰好是 25%； 另外 Bootstrap 的进度条自带宽度过渡动画，演示里先用 transition: none 把它关掉， 让每一步的读数干净利落——第六式会教它重新动起来。

练功 · 第四式
  1. 给例 1 加一个“管理员”勾选框：勾上后，点按钮只会强制点亮红心（不能取消）；不勾时恢复自由切换。提示：toggleClass 的第二参数。
  2. 用 css() 的对象写法，把进度条一次设置成：宽 100%、朱砂底色、圆角 999px。
  3. 思考题：addClass('text-danger') 与 css('color', 'red') 都能让字变红，什么时候用哪个？
参考答案 1

勾选状态来自 prop('checked')（上一式刚练过），“状态对齐现实”正是第二参数的用武之地。

参考答案 2

对象写法适合“一次性交代好几条”，注意 CSS 属性名连字符的换成驼峰（background-color 写成 backgroundColor）。

参考答案 3

类名把“红”的含义收进 CSS 定义——可复用、可被皮肤与主题统一管理，适合“有名分的状态”； css() 直接把样式钉在元素上，适合“动态数值”（宽度百分比、算出来的颜色）或一次性临时效果。 江湖经验：能说清名字的状态用类，说不清名字的动态数值用 css()。

本式小结

  • 类名四兄弟管“成套样式”，toggleClass 第二参数让样式对齐程序状态；
  • css() 读一、写一、写多、回调，四种形态按需取用；
  • 类名与内联样式各司其职：有名分的用类，动态数值用 css()。
下一式，修炼事件——on 与 off、事件委托，让每个新来的元素一出生就会响应。