异常教程

jQuery 多个类选择器（千字长文）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，选择器（Selector）是操作 HTML 元素的核心工具之一。jQuery 作为简化 DOM 操作的 JavaScript 库，提供了丰富的选择器语法，其中 多个类选择器 是开发者高频使用的功能之一。无论是筛选特定元素、动态修改样式，还是实现交互效果，多个类选择器都能帮助开发者高效完成任务。本文将从基础语法到高级技巧，结合实际案例，深入讲解如何利用这一功能提升开发效率。

一、基础语法：如何选择多个类的元素

1.1 单类选择器的回顾

在开始讲解多个类选择器前，我们需要先回顾单类选择器的使用方式。在 jQuery 中，通过 . 符号加类名即可选中所有具有该类的元素。例如：

$(".highlight").css("background-color", "yellow");

这条代码会将所有带有 highlight 类的元素背景色改为黄色。

1.2 多个类的组合选择

当需要同时匹配多个类时，jQuery 提供了简洁的语法：将多个类名连写，不加空格。例如，要选择同时包含 card 和 active 类的元素，可以这样写：

$(".card.active").css("border", "2px solid blue");

形象比喻：这就像在图书馆筛选书籍时，要求同时满足“科幻小说”和“畅销书”两个标签——只有同时符合这两个条件的元素才会被选中。

1.3 选择包含任意一个类的元素

如果需要选择包含 任意一个类 的元素（即“或”关系），则需要使用逗号分隔多个类选择器。例如：

$(".highlight, .warning").css("font-weight", "bold");

这条代码会将所有带有 highlight 或 warning 类的元素字体加粗。

注意：连写类名是“与”关系，逗号分隔是“或”关系，这是两个完全不同的逻辑。

二、复合选择器：结合其他选择器扩展功能

jQuery 的强大之处在于其选择器可以与其他语法结合，实现更复杂的筛选逻辑。

2.1 结合元素选择器

可以将类选择器与元素类型结合，例如只选中 同时是 div 元素且包含 featured 类 的元素：

$("div.featured").addClass("animated");

2.2 结合 ID 选择器

如果需要选中某个特定 ID 的元素，同时它还包含多个类，可以这样写：

$("#sidebar.sidebar-dark").show();

这条代码会显示 ID 为 sidebar 且包含 sidebar-dark 类的元素。

2.3 动态选择器的嵌套

在条件判断中动态构建选择器字符串也是一种常见场景。例如，根据用户输入动态筛选元素：

const query = ".section-" + category + ".visible";  
$(query).each(function() {  
  // 执行操作  
});

三、动态操作：添加、删除和切换类

多个类选择器不仅用于静态筛选，还能与 jQuery 的方法结合，实现动态交互。

3.1 添加类：addClass()

当需要给元素添加多个类时，可以直接传递包含多个类的字符串，用空格分隔：

$(".item").addClass("active hover-effect");

3.2 删除类：removeClass()

同样，删除多个类时也遵循相同语法：

$(".alert").removeClass("success error");

3.3 切换类：toggleClass()

toggleClass() 方法可以快速切换类的有无。例如，点击按钮时切换元素的 hidden 和 visible 类：

$("#toggle-btn").click(function() {  
  $(".content").toggleClass("hidden visible");  
});

技巧：通过传递多个类名，可以实现“此开彼合”的效果，例如同时移除一个类并添加另一个。

四、实际案例：构建可过滤的卡片列表

4.1 案例需求

假设我们有一个卡片列表，每个卡片包含多个标签类（如 tech, design, business）。用户需要通过点击按钮，仅显示符合特定类组合的卡片。

4.2 HTML 结构示例

<div class="card tech">  
  <h3>技术类文章</h3>  
</div>  
<div class="card design">  
  <h3>设计类文章</h3>  
</div>  
<button class="filter-btn" data-filter=".tech">显示技术类</button>  
<button class="filter-btn" data-filter=".design">显示设计类</button>

4.3 jQuery 实现代码

$(".filter-btn").click(function() {  
  const filter = $(this).data("filter");  
  $(".card").hide(); // 先隐藏所有卡片  
  $(filter).show(); // 显示符合类选择器的卡片  
});

扩展场景：若需同时筛选多个标签（如显示同时属于 tech 和 business 的卡片），只需修改按钮的 data-filter 值为 .tech.business。

五、进阶技巧：利用多个类选择器优化性能

5.1 减少选择器嵌套层级

复杂的选择器可能降低性能，因此建议优先使用类名而非多层嵌套。例如，将：

$("#main .section .item.highlight")

优化为：

$(".section-item.highlight")

5.2 使用 find() 和 filter() 方法

当需要在已选元素集合中进一步筛选时，find() 和 filter() 方法能提升可读性和效率。例如：

// 在所有卡片中筛选出 tech 类的子元素  
$(".card").find(".tech").css("color", "red");

六、常见问题与解决方案

6.1 为什么我的多个类选择器没有生效？

  • 检查类名拼写：确保 HTML 中的类名与选择器完全一致（区分大小写）。
  • 优先级冲突：CSS 中其他样式可能覆盖了 jQuery 修改的样式，可尝试添加 !important。
  • 执行顺序问题：确保选择器在元素渲染后执行，或使用 $(document).ready()。

6.2 如何选择不包含某个类的元素？

使用 :not() 伪类：

$(".card:not(.hidden)").slideUp(); // 隐藏未隐藏的卡片

结论

jQuery 的多个类选择器是一个灵活且强大的工具，它简化了元素筛选的复杂度，让开发者能够以更少的代码实现更复杂的功能。无论是基础的静态选择，还是动态的交互场景，掌握这一功能都能显著提升开发效率。

通过本文的案例和技巧，读者可以：

  1. 理解多个类选择器的语法逻辑（“与”和“或”关系）；
  2. 结合其他选择器扩展功能；
  3. 在动态操作和性能优化中应用最佳实践。

建议读者通过实际项目练习，例如构建可筛选的列表、动态切换主题等，逐步掌握这一技能。记住，熟练使用选择器是成为 jQuery 高手的第一步！

（全文约 1800 字）

最新发布

查看更多文章