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 提供的 [attribute=value] 选择器，就像一把量身定制的钥匙，能够直接“匹配”那些带有特定属性值的 HTML 元素。无论是筛选表单中的输入框，还是动态高亮导航栏的当前页面，这个选择器都展现了强大的实用性。对于编程初学者和中级开发者而言，掌握这一工具不仅能提升代码效率，更能为后续学习复杂交互逻辑打下坚实基础。

基础语法：理解选择器的核心逻辑

什么是属性选择器？

[attribute=value] 是 jQuery 中基于 HTML 元素属性的筛选工具。它的作用是：
在页面中查找所有属性名等于 attribute，且属性值等于 value 的元素。

例如，HTML 中有一个按钮元素：

<button type="submit" class="primary">提交</button>  

使用 $('button[type="submit"]')，即可精准选中该按钮。

核心语法结构

$( "[attribute=value]" )  

• attribute：目标元素的属性名（如 id、class、type）。
• value：属性的具体值（如 "button"、"submit"）。

示例：基础用法

<input id="username" type="text" placeholder="请输入用户名">  
<script>  
  // 选中 id 为 "username" 的输入框  
  $( "[id='username']" ).css( "border", "2px solid blue" );  
</script>  

这里，通过指定 id 属性的值为 "username"，代码成功为该输入框添加了蓝色边框。

进阶技巧：子集匹配与灵活筛选

1. 子集匹配（Subset Matchers）

实际开发中，属性值可能包含多个部分，此时需要更灵活的匹配方式：

符号说明

示例：动态匹配

假设页面中有以下元素：

<img src="images/logo.png" alt="公司Logo">  
<img src="images/team.jpg" alt="团队合影">  

使用 $('img[src*="images"]')，可以选中所有 src 属性包含 "images" 的图片。

2. 存在性匹配（Existence Matchers）

若只需筛选具有某个属性的元素，而无需关心属性值，可用简化写法：

$( "[attribute]" )  

例如，$('input[type]') 会选中页面中所有带有 type 属性的 <input> 元素。

3. 关系匹配（Relation Matchers）

通过结合运算符（>, <, >= 等），可以对属性值进行数值比较：

$( "[length>5]" ) // 匹配属性值大于5的元素  

注意：属性值需为可转换为数字的字符串，否则会被视为 NaN。

示例：表单验证

<input type="text" name="phone" placeholder="手机号">  
<script>  
  $( "input[name='phone'][length>11]" ).css( "color", "red" );  
</script>  

此代码会将手机号输入框中长度超过11位的文本标记为红色，但需注意实际开发中需结合 val() 方法获取输入值。

实战案例：选择器的多样化应用场景

案例1：表单元素的动态高亮

需求：当用户输入时，自动为输入框添加边框。

<form>  
  <input type="text" name="username" placeholder="用户名">  
  <input type="email" name="email" placeholder="邮箱">  
</form>  

<script>  
  // 监听所有输入框的输入事件  
  $( "input[type='text'], input[type='email']" ).on( "input", function() {  
    $(this).css( "border", "1px solid #4CAF50" );  
  });  
</script>  

通过结合多个 [type=value] 选择器，代码同时匹配了文本框和邮箱输入框。

案例2：动态加载内容时的元素筛选

假设从服务器返回以下 HTML 片段：

<div class="product" data-price="299">...</div>  
<div class="product" data-price="499">...</div>  

若需筛选价格低于500的商品：

$( ".product[data-price<='500']" ).addClass( "on-sale" );  

这里，通过 data-price 属性和关系匹配，快速定位目标元素。

与其他选择器的组合：增强筛选能力

[attribute=value] 可与 jQuery 的其他选择器结合，形成更精准的匹配逻辑：

1. 结合类选择器

// 选中 class 为 "button" 且 type 为 "submit" 的元素  
$( ".button[type='submit']" ).css( "background", "red" );  

2. 结合层级选择器

// 选中导航栏中 href 包含 "about" 的链接  
$( "nav a[href*='about']" ).addClass( "highlight" );  

3. 使用伪选择器

// 选中未被选中的复选框  
$( "input[type='checkbox']:not([checked])" ).click();  

常见问题与解决方案

问题1：属性值包含空格如何处理？

如果属性值本身有空格（如 class="btn primary"），需将整个值用引号包裹：

$( "[class='btn primary']" ) // 正确写法  
// 而非  
$( "[class=btn primary]" ) // 错误：会尝试匹配多个属性  

问题2：如何区分属性值的大小写？

默认情况下，jQuery 的选择器不区分大小写。若需严格匹配，可通过自定义函数实现：

$( "[data-color][data-color!='red']" ).each(function() {  
  if ( $(this).attr("data-color").toLowerCase() === "red" ) {  
    // 执行操作  
  }  
});  

问题3：动态添加的属性如何选择？

若元素的属性是通过 JavaScript 动态添加的，需确保选择器在属性更新后执行：

// 动态添加属性  
$( "#myDiv" ).attr( "data-status", "active" );  
// 延迟执行选择  
setTimeout( function() {  
  $( "[data-status='active']" ).show();  
}, 1000 );  

结论

jQuery [attribute=value] 选择器如同一把精准的手术刀，帮助开发者高效定位网页元素。从基础语法到高级用法，结合实际案例与代码示例，我们看到其在表单验证、动态交互、数据筛选等场景中的强大功能。

对于编程初学者，建议从简单属性（如 id、class）入手，逐步尝试子集匹配与关系运算；中级开发者则可探索与其他选择器的组合，优化代码逻辑。记住，工具的价值在于灵活运用——只有深刻理解底层原理，才能在复杂项目中游刃有余。

掌握这一选择器后，不妨尝试挑战更复杂的任务：比如根据 data-* 属性构建动态导航，或通过属性匹配实现响应式布局的元素切换。前端开发的奥秘，往往藏在这些“看似简单”的细节之中。