jQuery [attribute~=value] 选择器（一文讲透）

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

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

前言

在前端开发中，jQuery 的选择器（Selector）是高效操作 DOM 元素的核心工具。其中 [attribute~=value] 选择器虽然在日常开发中使用频率不算最高，但它在特定场景下能提供简洁且强大的功能。本文将从基础概念、使用场景、对比分析和实战案例等角度，逐步解析这一选择器的原理与应用技巧，帮助读者掌握其核心价值。

一、基础语法与核心原理

1.1 选择器的定义

[attribute~=value] 是 jQuery 中基于 HTML 属性值的“单词匹配”选择器。它的功能是筛选出属性值中包含指定值作为独立单词的元素。这里的“单词”指的是由空格分隔的字符串片段。

例如，若某个元素的 class 属性值为 "button primary"，那么 [class~=primary] 将匹配这个元素，因为 "primary" 是 class 属性中的一个独立单词。

1.2 语法结构

$( "[attribute~=value]" )  

• attribute：需要匹配的 HTML 属性名，如 class、data-* 或自定义属性。
• value：需要匹配的单词值，必须与属性值中的某个独立单词完全一致。

1.3 核心逻辑比喻

可以将 [attribute~=value] 的匹配机制想象为“标签筛选”：

• 假设一个元素的 class 属性像“标签集合”，每个标签由空格分隔；
• 选择器会检查目标值是否是其中一个标签，如果是则选中该元素。

二、常见使用场景与案例

2.1 场景 1：根据类名筛选元素

由于 HTML 的 class 属性天然支持多值（空格分隔），[attribute~=value] 在处理类名时非常实用。

案例 1：动态筛选按钮类型

<button class="action save">保存</button>  
<button class="action cancel">取消</button>  
<button class="action delete">删除</button>  

<script>  
  // 匹配所有 class 中包含 "action" 的按钮  
  $(".action").css("background", "#4CAF50");  

  // 通过 [class~=value] 选择器实现相同效果  
  $("[class~=action]").css("color", "white");  
</script>  

说明：

• 第一种写法 ".action" 是 jQuery 的简写语法，本质等同于 [class~=action]。
• 当需要匹配自定义属性或非 class 属性时（如 data-type），[attribute~=value] 就成为必要选择。

2.2 场景 2：动态属性值匹配

在处理动态生成的属性时，例如通过后端返回的数据设置 data- 属性，选择器能快速定位符合条件的元素。

案例 2：筛选特定分类的商品卡片

<div class="product" data-categories="electronics gadgets">Apple Watch</div>  
<div class="product" data-categories="clothing accessories">Leather Jacket</div>  
<div class="product" data-categories="books">Programming Book</div>  

<script>  
  // 显示所有属于 "electronics" 分类的商品  
  $("[data-categories~=electronics]").show();  
</script>  

输出结果：只有第一个商品卡片会被显示，因为其 data-categories 包含 "electronics" 这个独立单词。

三、与其他属性选择器的对比

为了帮助读者更好地理解 [attribute~=value] 的独特性，我们对比其与同类选择器的差异。

3.1 对比表格

3.2 关键区别

• [attribute*=value]：模糊匹配，只要属性值中存在目标值即可（不考虑单词边界）。例如，[class*="prim"] 会匹配 "primary"、"primitive" 等。
• [attribute~=value]：精确匹配，仅当目标值是属性值中的独立单词时才匹配。例如，[class~=primary] 不会匹配 "primary-color"。

3.3 实践建议

• 使用场景选择：
  • 若需严格按单词匹配（如 class 或自定义多值属性），选择 [attribute~=value]。
  • 若需要模糊匹配（如搜索关键词），选择 [attribute*=value]。

四、进阶技巧与代码优化

4.1 结合其他选择器

通过与其他选择器组合，可以实现更复杂的功能。例如：

案例 3：筛选同时满足多个属性条件的元素

<div class="product" data-status="available" data-category="electronics">...</div>  
<div class="product" data-status="out-of-stock" data-category="clothing">...</div>  

<script>  
  // 选择状态为 "available" 且分类包含 "electronics" 的商品  
  $("[data-status=available][data-category~=electronics]").addClass("highlight");  
</script>  

4.2 动态生成选择器

在需要动态生成选择器时，可以结合 JavaScript 变量灵活构造：

const targetCategory = "books";  
const selector = `[data-category~=${targetCategory}]`;  
$(selector).css("border", "2px solid blue");  

4.3 注意事项

• 大小写敏感：默认情况下，选择器对大小写敏感。例如，[class~=Primary] 不会匹配 "primary"。
• 空格处理：属性值中的单词必须严格以空格分隔。例如，"red,blue" 不会被视为两个独立单词。

五、常见问题与解决方案

5.1 问题 1：为什么我的选择器没有匹配到元素？

可能原因及解决方法：

• 属性值未正确分隔：确保属性值中的单词由空格分隔。例如，data-tags="htmlcss" 不会被视为两个单词，应改为 data-tags="html css"。
• 拼写错误：检查属性名和目标值是否与 HTML 元素完全一致（包括大小写）。

5.2 问题 2：如何匹配包含特殊字符的单词？

若目标值包含空格或特殊符号（如 "new-york"），需确保其作为独立单词存在。例如：

<div class="city new-york">...</div>  

<script>  
  // 正确写法：直接使用目标值作为单词  
  $("[class~=new-york]").css("color", "red");  
</script>  

六、实战案例：构建可复用的筛选功能

6.1 需求背景

假设我们有一个商品列表，每个商品卡片的 data-features 属性存储了多个特性（如 "wifi battery"），需要根据用户选择的特性动态筛选商品。

6.2 HTML 结构

<!-- 商品卡片 -->  
<div class="product" data-features="wifi battery">...</div>  
<div class="product" data-features="4g battery">...</div>  
<div class="product" data-features="wifi 4g">...</div>  

<!-- 筛选按钮 -->  
<button data-filter="wifi">筛选 Wi-Fi 商品</button>  
<button data-filter="4g">筛选 4G 商品</button>  

6.3 jQuery 实现

// 绑定点击事件，根据按钮的 data-filter 值筛选商品  
$("button").click(function() {  
  const filterValue = $(this).data("filter");  
  const selector = `[data-features~=${filterValue}]`;  

  // 隐藏所有商品，仅显示匹配项  
  $(".product").hide();  
  $(selector).show();  
});  

6.4 扩展优化

• 多条件筛选：通过按位或（|）组合多个选择器，例如 [data-features~=wifi][data-features~=4g]。
• 重置按钮：添加一个重置筛选的按钮，触发 $(".product").show()。

结论

[attribute~=value] 选择器是 jQuery 中一个功能强大但常被低估的工具。它通过精确匹配属性中的独立单词，为动态内容筛选、类名管理等场景提供了简洁的解决方案。通过理解其与同类选择器的差异，并结合实际案例灵活运用，开发者能显著提升 DOM 操作的效率。

掌握这一选择器的核心逻辑后，建议读者尝试将其应用到个人项目中，例如构建可复用的筛选组件或优化现有代码的可读性。随着实践的深入，你会逐渐发现它在特定场景下不可替代的价值。

希望本文能帮助你更好地理解 jQuery 的 [attribute~=value] 选择器！如果还有其他疑问或需要进一步探讨，请随时在评论区交流。