异常教程
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+ 小伙伴加入学习 ，欢迎点击围观
前言
在 Web 开发中，精准定位页面元素是前端工程师的核心技能之一。jQuery 作为简化 DOM 操作的利器，提供了丰富的选择器语法，其中 [attribute|=value] 选择器是一个容易被低估但实用性极高的工具。它通过匹配特定属性值的“分类标签”模式，帮助开发者高效筛选符合规则的 HTML 元素。本文将从基础概念、工作原理到实际应用场景，逐步解析这一选择器的使用技巧，并通过代码示例和类比解释，让编程初学者和中级开发者都能轻松掌握其精髓。
一、基础概念：选择器语法与核心功能
1.1 什么是属性选择器？
jQuery 的属性选择器是一类通过元素的 HTML 属性（如 class、id、lang 等）进行筛选的选择器。例如：
// 选择所有 type 属性为 "text" 的输入框
$("input[type='text']");
而 [attribute|=value] 是其中一种特殊语法，用于匹配属性值 以指定值开头，并且后面紧接连字符（-） 的元素。其核心逻辑可以理解为：
"查找所有属性值属于某个分类或其子分类的元素"。
1.2 语法结构解析
[attribute|=value]
attribute：目标 HTML 元素的属性名（如lang、class）。value：要匹配的分类前缀（如en、zh）。
匹配规则：
当且仅当属性值满足以下两个条件时，元素会被选中：
- 属性值以
value开头； value后面的第一个字符必须是连字符（-），或属性值恰好等于value。
二、工作原理：用“分类标签”理解匹配逻辑
2.1 类比：语言代码的父子关系
想象一个语言代码系统：
en表示“英语”en-us表示“美式英语”en-gb表示“英式英语”zh-cn表示“简体中文（中国）”
此时，[lang|="en"] 选择器会匹配所有 lang="en" 或 lang="en-*" 的元素。这就像分类标签的父子关系：
en → 父类
en-us → 子类
en-gb → 子类
代码示例：
<p lang="en">Hello World</p>
<p lang="en-us">Hello from USA</p>
<p lang="zh-cn">你好，世界</p>
<script>
// 匹配所有英语相关内容
$("[lang|='en']").css("color", "blue");
</script>
执行后，前两段文字会变蓝，第三段保持原色。
2.2 匹配规则的数学表达式
若属性值为 attr_val，则匹配条件可表示为：
attr_val === value || attr_val.startsWith(value + "-")
例如：
value = "zh"时，zh-cn符合条件，zh-tw也符合，但c-zh不符合。- 若属性值正好等于
value（如zh），则直接匹配。
三、典型应用场景与案例解析
3.1 场景一：国际化语言内容筛选
在多语言网站中，可通过 lang 属性管理不同语言的段落。例如：
<div class="content">
<p lang="en">This is English content</p>
<p lang="zh-hans">这是简体中文内容</p>
<p lang="ja">これは日本語のコンテンツです</p>
</div>
<script>
// 显示所有中文相关内容（包括简体/繁体）
// 注意：zh-hans 和 zh-hant 都以 "zh" 开头
$("[lang|='zh']").show();
</script>
此案例中，zh-hans 符合 lang|="zh" 的匹配规则，因此会显示中文段落。
3.2 场景二：表单元素的动态分类
在表单中，可通过自定义属性实现字段分类。例如：
<form>
<input type="text" data-type="contact-name">
<input type="email" data-type="contact-email">
<input type="tel" data-type="contact-phone">
<input type="text" data-type="address">
</form>
<script>
// 筛选所有 contact-* 类型的输入框
$("[data-type|='contact']").each(function() {
$(this).css("border", "2px solid red");
});
</script>
此代码将给所有 data-type 以 contact 开头的输入框添加红色边框。
四、进阶技巧与常见问题
4.1 与其他选择器的组合使用
可结合其他选择器语法实现更复杂的筛选逻辑。例如：
// 选择所有 type="radio" 且 name 以 "option" 开头的元素
$("[type='radio'][name|='option']").prop("checked", true);
4.2 大小写敏感问题
属性值的匹配是严格区分大小写的。例如：
lang="EN"不会被[lang|='en']匹配- 若需忽略大小写，需手动处理：
$("[lang]").filter(function() { return this.lang.toLowerCase().startsWith("en-"); }).css("color", "blue");
4.3 动态添加元素的兼容性
当页面通过 JavaScript 动态新增元素时，需确保选择器在元素存在后再执行。例如：
// 错误示例：在元素添加前执行选择器
$("[data-type|='dynamic']").hide();
// 正确做法：在元素添加后立即执行
$("#dynamic-container").append(newElement);
$("#dynamic-container [data-type|='dynamic']").hide();
五、常见误区与解决方案
5.1 误区一：误以为匹配所有包含 value 的属性
错误认知：认为 [lang|='en'] 会匹配 lang="en-US" 或 lang="en"。
实际规则：必须严格满足“以 value 开头 + 连字符”或完全等于 value。例如 en-US 是有效匹配，但 en-US-UK 不符合，因中间缺少连字符。
5.2 误区二：忽略属性值的连字符位置
错误代码：
// 试图匹配 "color-red"，但属性值为 "colorred"
$("[class|='color']").css("color", "red");
修正方法：确保属性值包含连字符：
<div class="color-red">...</div>
六、性能优化建议
6.1 避免过度嵌套选择器
虽然 [attribute|=value] 功能强大，但频繁嵌套可能导致性能下降。例如：
// 低效写法：重复遍历 DOM
$("[data-type|='section']").find("[data-type|='item']").each(...);
// 优化方案：合并选择器
$("[data-type|='section'][data-type|='item']").each(...);
6.2 结合原生 JavaScript 的 querySelectorAll
对于现代浏览器，可结合原生 API 提升效率：
// 原生方法
document.querySelectorAll("[lang|='zh']").forEach(element => {
// 处理逻辑
});
结论
jQuery [attribute|=value] 选择器通过“分类标签”的匹配逻辑，为开发者提供了一种简洁高效的方式，用于筛选具有层级关系或分类属性的元素。无论是国际化内容管理、表单字段分类，还是动态内容过滤，这一选择器都能显著减少代码复杂度。
掌握其工作原理和常见应用场景后，开发者可以将其与其他选择器、函数灵活结合，进一步提升 DOM 操作的效率和代码的可维护性。记住：选择器的精准使用，是构建健壮 Web 应用的重要基石。
通过本文的案例分析和技巧总结，希望读者不仅能理解这一选择器的语法，更能将其自然融入实际开发中，解决真实场景中的复杂需求。