在写页面交互时，经常遇到一个元素身上挂了好几个class的情况，比如一个按钮既要有基础样式类btn，又要有状态类active，还可能有尺寸类large。这时候想用jQuery把这类元素挑出来，选择器该怎么写？看起来是个小问题，但写法上的细微差别会导致完全不同的结果，甚至影响页面性能。本文把jQuery多个Classes选择器的用法、常见组合技巧和容易踩的坑一次性讲清楚。
基础语法：连接写法和逗号写法的本质区别
jQuery中选择多个classes最核心的是区分两种写法。第一种是紧挨着连写，中间不加空格不加逗号，比如$('.btn.active')，它的含义是选中同时拥有btn和active这两个class的元素，是“并且”的关系。第二种是用逗号分隔，比如$('.btn, .active')，含义是选中class为btn的元素或者class为active的元素，是“或者”的关系，最终结果是把两组元素合并到一起。
这两者的区别是新手最容易混淆的地方。举个具体例子，页面上有三个按钮：
<button class="btn active">按钮一</button> <button class="btn">按钮二</button> <button class="active">按钮三</button>
用$('.btn.active')只会选中按钮一，因为它同时满足两个类。而用$('.btn, .active')会把三个按钮全部选中，因为每个按钮至少满足其中一个条件。还有一个容易忽略的写法是中间加空格，比如$('.btn .active')，这就变成了后代选择器，含义是找class为btn的元素内部class为active的后代元素，完全是另一回事了。所以写选择器之前一定要想清楚，自己要的是“同时满足”还是“任一满足”，或者是“嵌套关系”。
另外补充一点，连写类名不分顺序，$('.btn.active')和$('.active.btn')选中的结果是一样的，判断标准只看元素是否同时含有这些class。
进阶用法：过滤、判断与批量操作
掌握了基础语法后，实际项目里更多的是组合运用。第一种常见场景是先选中一批元素再过滤。比如页面上有很多列表项，想找出既有item类又处于选中状态selected类的项，除了直接写$('.item.selected')，也可以先选再过滤：
// 两种写法结果相同，第二种更适合条件动态拼装的场景
var items1 = $('.item.selected');
var items2 = $('.item').filter('.selected');
// filter里还可以写函数，按自定义逻辑过滤
var visibleItems = $('.item').filter(function() {
return $(this).css('display') !== 'none' && $(this).hasClass('selected');
});第二种场景是判断某个元素是否含有特定class，用hasClass()方法。它返回布尔值，常和if配合使用。注意hasClass('a b')这种写法在老版本jQuery里行为不可靠，稳妥的做法是分开判断，写成el.hasClass('a') && el.hasClass('b')。
第三种场景是批量切换多个class。原生JavaScript的classList支持一次性传多个类，jQuery的toggleClass也可以这样用：
// 给匹配的元素同时切换两个类，有则删无则加
$('.panel').toggleClass('highlight expanded');
// addClass和removeClass同样支持空格分隔的多个类
$('.box').addClass('active large');
$('.box').removeClass('active large');这样写比链式调用两次方法更简洁，执行效率也更好，因为只触发一次DOM操作的内部流程。
常见误区与性能提醒
第一个误区是把连写当成“或者”。有人以为$('.a.b')能选中带a类或带b类的元素，结果页面没反应就以为jQuery出了问题，其实是理解错了语义。遇到“选中结果和预期不符”的情况，第一时间检查选择器里用的是点号连写、空格还是逗号。
第二个误区和性能有关。jQuery的选择器引擎支持非常复杂的CSS选择器，但越复杂的选择器遍历开销越大。在老浏览器环境下，$('.a.b')这类写法无法直接利用原生的querySelectorAll快速路径时，jQuery需要先取出所有带a类的元素再逐个检查是否带b类。如果页面DOM规模很大，更好的习惯是给这类元素加上一个语义化的专用类名，或者用filter()从更小的集合里筛。同时尽量使用find()限定查找范围，例如$('#list').find('.item.selected')，比全文档搜索$('.item.selected')快得多。
第三个误区是误解动态class和选择器的关系。有人的代码先执行了$('.a.b')保存结果，之后通过addClass给某个元素加上了b类，却发现之前保存的jQuery对象里没有这个元素，于是怀疑选择器失效。其实选择器只在执行那一刻求值一次，保存的只是当时的快照。要在添加类之后再重新查询，或者直接在新元素上操作：
var $targets = $('.a.b'); // 此时只包含当时满足条件的元素
$('.some').addClass('b'); // 后加的类不会影响 $targets
var $targets2 = $('.a.b'); // 重新查询才能拿到新成员第四个误区是选择器里混入空格导致语义跑偏。$('.a .b')和$('.a.b')只差一个空格，前者是后代查找，后者是同元素多类匹配。排查问题时可以把选择器字符串打印出来仔细核对，这类笔误往往藏在肉眼很难注意到的地方。
小结
jQuery多个Classes选择器的核心就一句话：点号连写表示同时满足，逗号分隔表示任一满足，中间加空格是后代关系。日常开发中把这三条记牢，再配合filter、hasClass、toggleClass这些方法，绝大多数多类操作场景都能覆盖。同时注意限定查找范围来保证性能，理解选择器是一次性求值这一特性，就能避免大部分踩坑。
jQuery选择器多个classesjQuery类选择器修改时间：2026-09-14 07:20:34