首页
/ 正文

jQuery [attribute$=value] 选择器（长文解析）

更新时间: 2025-04-07 01:07:39

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 的属性选择器提供了一套高效的方法，帮助开发者快速筛选符合特定规则的 HTML 元素。其中，[attribute$=value] 选择器是一个功能强大的工具，它能够根据元素属性的结尾部分进行匹配。本文将深入解析这一选择器的原理、用法及实际案例，帮助编程初学者和中级开发者掌握这一技巧，并灵活应用于项目开发中。

一、属性选择器的基石：理解基本语法与逻辑

1.1 属性选择器的定义与作用

jQuery 的属性选择器允许开发者通过元素的属性值（如 class、id、src 等）来筛选目标元素。例如，[type="text"] 可以选中所有 type 属性为 "text" 的 <input> 元素。而 [attribute$=value] 则属于属性选择器的一种子类型，其核心逻辑是：
匹配属性值以特定字符串结尾的元素。

1.2 `$=` 操作符的直观比喻

想象你正在整理一个文件夹，里面存放了大量图片文件，文件名以 .jpg、.png 或 .gif 结尾。如果你只想快速找到所有以 .jpg 结尾的图片，只需检查文件名的结尾部分即可。[attribute$=value] 的逻辑与此类似——它像一个“结尾匹配探测器”，专门寻找属性值以指定字符串结尾的元素。

二、基础用法与代码示例

2.1 基础语法结构

jQuery("[attribute$='value']");

attribute：目标元素的属性名（如 href、class）。
$=：操作符，表示“以…结尾”。
value：需要匹配的字符串结尾部分。

注意：

属性名和值均需用单引号或双引号包裹。
$= 是区分大小写的，但 HTML 属性本身通常不区分大小写（如 class="myClass" 和 class="MYCLASS" 会被视为不同值）。

2.2 案例 1：匹配以特定扩展名结尾的图片链接

假设页面中有以下 HTML 结构：

<img src="image1.jpg" alt="风景图">  
<img src="image2.png" alt="图标">  
<img src="image3.gif" alt="动画">

若想选中所有以 .jpg 结尾的图片，可使用：

$("img[src$='.jpg']").css("border", "2px solid red");

执行后，只有第一张图片会被添加红色边框。

2.3 案例 2：动态匹配按钮类名

假设页面中有多个按钮，类名以 _btn 结尾：

<button class="primary_btn">提交</button>  
<button class="secondary_btn">取消</button>  
<button class="danger_btn">删除</button>

通过以下代码可选中所有此类按钮并绑定点击事件：

$("[class$='_btn']").click(function() {  
  alert("按钮被点击！");  
});

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

3.1 属性选择器家族的其他成员

jQuery 提供了多种属性选择器，共同组成了强大的筛选工具：
| 选择器类型 | 功能描述 | 示例 |
|------------------|------------------------------|-------------------------------|
| [attribute] | 匹配具有该属性的元素 | input[type] |
| [attribute=value] | 匹配属性值完全等于指定值的元素 | input[type="text"] |
| [attribute^=value] | 匹配属性值以指定字符串开头的元素 | a[href^="https://"] |
| [attribute$=value] | 匹配属性值以指定字符串结尾的元素（本文主题） | img[src$=".jpg"] |
| [attribute*=value] | 匹配属性值包含指定字符串的元素 | div[class*="container"] |

3.2 `$=` 与 `*=` 的协同案例

假设需要选中所有类名中包含 container 且以 box 结尾的元素，可结合使用：

$("[class*='container'][class$='box']").addClass("highlight");

此代码会匹配类似 <div class="page-container-main-box"></div> 的元素。

四、进阶技巧与常见场景

4.1 动态生成的属性值匹配

在动态网页中，元素的属性可能由 JavaScript 生成。例如，假设后端返回的数据中，图片的 src 属性以 user_avatar_ 开头和 .webp 结尾，可以通过以下方式筛选：

// 匹配所有以 .webp 结尾的图片  
$("img[src$='.webp']").each(function() {  
  // 执行替换操作，将 .webp 转换为 .jpg  
  this.src = this.src.replace(".webp", ".jpg");  
});

4.2 结合其他选择器优化性能

直接使用属性选择器可能对性能有一定影响，尤其是处理大量元素时。可以通过缩小作用域或组合选择器来优化：

// 优先定位父容器内的元素  
$("#gallery img[src$='.jpg']").each(...);

4.3 避免常见陷阱

空值或无效匹配：若属性值不存在或不匹配，选择器将返回空集合，需通过条件判断避免后续操作出错。
```
var $images = $("img[src$='.jpg']");  
if ($images.length > 0) {  
  // 执行操作  
}  
```
特殊字符转义：若 value 中包含特殊符号（如 .、$），需使用 \\ 转义。例如匹配以 .com 结尾的链接：
```
$("a[href$='.com']").css("color", "blue");  
```

五、实战案例：构建动态表单验证

5.1 场景描述

假设需要为表单中所有以 _required 结尾的输入框添加实时验证：

<form>  
  <input type="text" name="username_required" placeholder="用户名">  
  <input type="email" name="email_required" placeholder="邮箱">  
  <input type="text" name="notes" placeholder="备注（非必填）">  
</form>

5.2 实现代码

// 1. 选中所有 name 属性以 "_required" 结尾的输入框  
$("[name$='_required']").on("input", function() {  
  // 2. 清除错误提示  
  $(this).removeClass("error");  
  // 3. 验证非空  
  if ($(this).val().trim() === "") {  
    $(this).addClass("error");  
  }  
});  

// 4. 表单提交时的最终验证  
$("form").submit(function(event) {  
  var isValid = true;  
  $("[name$='_required']").each(function() {  
    if ($(this).val().trim() === "") {  
      isValid = false;  
      $(this).addClass("error");  
    }  
  });  
  if (!isValid) {  
    event.preventDefault();  
    alert("请填写所有必填项！");  
  }  
});

5.3 扩展思路

可进一步结合正则表达式或自定义属性（如 data-validate="email"）实现更复杂的验证规则。
通过 CSS 为 .error 类添加红色边框等样式，提升用户体验。

六、性能优化与最佳实践

6.1 减少 DOM 查询频率

将频繁使用的 $("[attribute$=value]") 结果缓存到变量中，避免重复查询：

const $requiredFields = $("[name$='_required']");  
// 后续操作直接使用 $requiredFields

6.2 结合 CSS 选择器提升效率

若属性选择器与 CSS 类名结合使用，可优先通过类名缩小范围：

// 优于直接使用属性选择器  
$(".form-control[src$='.jpg']").each(...);

6.3 替代方案：原生 JavaScript

若项目中已较少使用 jQuery，可改用原生的 querySelectorAll：

document.querySelectorAll("[class$='_btn']").forEach(btn => {  
  btn.addEventListener("click", function() {  
    // 处理逻辑  
  });  
});

结论

jQuery [attribute$=value] 选择器如同一把精准的“结尾匹配钥匙”，帮助开发者快速定位符合特定条件的元素。通过本文的讲解，读者应能掌握其基本语法、应用场景及优化技巧。在实际开发中，建议结合其他选择器、CSS 类名及性能优化策略，进一步提升代码的健壮性和效率。掌握这一工具后，开发者可以更从容地应对表单验证、动态内容筛选等常见需求，为构建高效、易维护的前端项目奠定基础。

关键词布局示例（自然融入正文）：

在“基础用法”章节直接使用“jQuery [attribute$=value] 选择器”描述案例；

在“实战案例”中通过代码注释和场景描述间接提及关键词；

在“对比表格”中以属性选择器家族的视角强化关键词的关联性。

jQuery [attribute$=value] 选择器（长文解析）

前言

一、属性选择器的基石：理解基本语法与逻辑

1.1 属性选择器的定义与作用

1.2 `$=` 操作符的直观比喻

二、基础用法与代码示例

2.1 基础语法结构

2.2 案例 1：匹配以特定扩展名结尾的图片链接

2.3 案例 2：动态匹配按钮类名

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

3.1 属性选择器家族的其他成员

3.2 `$=` 与 `*=` 的协同案例

四、进阶技巧与常见场景

4.1 动态生成的属性值匹配

4.2 结合其他选择器优化性能

4.3 避免常见陷阱

五、实战案例：构建动态表单验证

5.1 场景描述

5.2 实现代码

5.3 扩展思路

六、性能优化与最佳实践

6.1 减少 DOM 查询频率

6.2 结合 CSS 选择器提升效率

6.3 替代方案：原生 JavaScript

结论

最新发布

RegExp + 量词（长文讲解）

RegExp * 量词（保姆级教程）

RegExp ? 量词（千字长文）

RegExp {X} 量词（长文讲解）

RegExp {X,Y} 量词（长文解析）

RegExp {X,} 量词（手把手讲解）

RegExp $ 量词（千字长文）

RegExp ^ 量词（超详细）

RegExp ?= 量词（建议收藏）

RegExp ?! 量词（保姆级教程）

jQuery [attribute$=value] 选择器（长文解析）

前言

一、属性选择器的基石：理解基本语法与逻辑

1.1 属性选择器的定义与作用

1.2 $= 操作符的直观比喻

二、基础用法与代码示例

2.1 基础语法结构

2.2 案例 1：匹配以特定扩展名结尾的图片链接

2.3 案例 2：动态匹配按钮类名

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

3.1 属性选择器家族的其他成员

3.2 $= 与 *= 的协同案例

四、进阶技巧与常见场景

4.1 动态生成的属性值匹配

4.2 结合其他选择器优化性能

4.3 避免常见陷阱

五、实战案例：构建动态表单验证

5.1 场景描述

5.2 实现代码

5.3 扩展思路

六、性能优化与最佳实践

6.1 减少 DOM 查询频率

6.2 结合 CSS 选择器提升效率

6.3 替代方案：原生 JavaScript

结论

最新发布

RegExp + 量词（长文讲解）

RegExp * 量词（保姆级教程）

RegExp ? 量词（千字长文）

RegExp {X} 量词（长文讲解）

RegExp {X,Y} 量词（长文解析）

RegExp {X,} 量词（手把手讲解）

RegExp $ 量词（千字长文）

RegExp ^ 量词（超详细）

RegExp ?= 量词（建议收藏）

RegExp ?! 量词（保姆级教程）

1.2 `$=` 操作符的直观比喻

3.2 `$=` 与 `*=` 的协同案例