异常教程

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 的核心功能之一，它帮助开发者精准定位网页元素并执行操作。而 jQuery [attribute=value] 选择器* 是其中一种强大的属性匹配工具，适用于需要模糊匹配元素属性值的场景。例如，当需要筛选出所有包含特定关键字的链接、动态匹配商品分类标签时，这一选择器能显著提升代码的简洁性和灵活性。本文将从基础语法、实际案例到进阶技巧，逐步解析这一选择器的使用方法，并结合具体场景帮助开发者深入理解其价值。

一、什么是 [attribute*=value] 选择器？

[attribute*=value] 是 jQuery 中基于属性值进行模糊匹配的选择器。其核心功能是：筛选出所有属性值中包含指定子字符串的元素。这里的 *= 符号代表“包含”关系，与 ^=（以某值开头）和 $=（以某值结尾）形成互补，共同构成属性值的范围匹配能力。

形象比喻：
可以将其想象为一个“关键词过滤器”。假设你在图书馆寻找所有书名中包含“算法”的书籍，只需输入“算法”作为关键词，系统会自动列出所有符合条件的书目。类似地，这一选择器通过指定 value，让 jQuery 自动过滤出属性值中包含该值的所有元素。

二、基础语法与使用场景

1. 基础语法结构

$("[attribute*='value']")
  • attribute：要匹配的元素属性，如 class、href、data-* 等。
  • value：需包含在属性值中的子字符串。
  • *=：运算符，表示“属性值中包含指定子字符串”。

2. 常见使用场景

  • 动态筛选元素：例如，根据用户输入动态筛选列表项。
  • 处理自定义数据属性：如通过 data-category="electronics" 匹配所有电子产品标签。
  • 匹配模糊链接地址：例如，筛选所有 href 包含“https://example.com”的外部链接。

三、实战案例：动态筛选商品列表

1. 场景描述

假设有一个商品列表，每个商品项的 class 包含分类信息（如 category-electronics、category-books），用户希望根据输入的分类关键词动态筛选商品。

2. HTML 结构示例

<input type="text" id="filterInput" placeholder="输入分类关键词...">  
<ul id="productList">  
  <li class="category-electronics">智能手机</li>  
  <li class="category-books">编程书籍</li>  
  <li class="category-electronics">笔记本电脑</li>  
  <li class="category-accessories">耳机</li>  
</ul>

3. jQuery 实现代码

$("#filterInput").on("input", function() {  
  const keyword = $(this).val().toLowerCase();  
  $("#productList li").each(function() {  
    const className = $(this).attr("class");  
    // 使用 [attribute*=value] 选择器动态匹配  
    if (className && className.toLowerCase().includes(keyword)) {  
      $(this).show();  
    } else {  
      $(this).hide();  
    }  
  });  
});

4. 优化方案（使用选择器简化逻辑）

$("#filterInput").on("input", function() {  
  const keyword = $(this).val().trim();  
  // 直接通过选择器筛选并显示匹配项  
  $("#productList li").hide().filter(  
    `[class*='${keyword.toLowerCase()}']`  
  ).show();  
});

对比分析：优化后的代码利用选择器直接过滤，减少了循环遍历的复杂度，代码更简洁高效。

四、进阶技巧与注意事项

1. 结合其他选择器提升精确度

可以与其他选择器组合使用，例如：

// 匹配所有 class 包含"active"且标签为 div 的元素  
$("div[class*='active']");

2. 动态生成 value 值

通过变量动态设置 value，增强代码的灵活性：

const searchKeyword = "btn";  
$(`[class*='${searchKeyword}']`).css("background", "yellow");

3. 注意性能问题

  • 避免过度依赖模糊匹配：若需匹配大量元素，建议优先通过类名或 ID 精准定位。
  • 减少选择器嵌套层级：例如，$("#container [class*='filter']") 比直接 $(".filter-class") 效率更低。

五、常见问题解答

Q1：如何区分 [attribute*=value] 与其他属性选择器？

  • [attribute^=value]：匹配以指定值开头的属性值（如 href^="https"）。
  • [attribute$=value]：匹配以指定值结尾的属性值（如 class$="active"）。
  • [attribute*=value]：匹配包含指定值的属性值（如 class*="btn"）。

Q2：能否匹配多个子字符串？

可通过多个选择器组合实现：

// 匹配 class 包含"red"或"green"的元素  
$("[class*='red'], [class*='green']").css("color", "red");

Q3：在 IE 浏览器中是否兼容？

该选择器基于 CSS3 属性选择器，IE 9+ 及以上版本支持。若需兼容更早版本，建议改用 filter() 方法：

$("[class]").filter(function() {  
  return $(this).attr("class").indexOf("btn") !== -1;  
});

六、与原生 JavaScript 的对比

虽然原生 JavaScript 的 querySelectorAll 也支持类似语法：

document.querySelectorAll("[class*='btn']");

但 jQuery 的优势在于：

  1. 兼容性处理：自动适配不同浏览器的差异。
  2. 链式调用：可直接调用 jQuery 方法（如 .hide()、.css()）。
  3. 简化代码逻辑：如 filter() 方法的使用更直观。

结论

jQuery [attribute*=value] 选择器 是开发者应对模糊属性匹配场景的利器。通过本文的案例演示和技巧解析，读者可以掌握其核心用法，并在实际项目中灵活应用。无论是动态筛选列表、处理自定义数据属性，还是提升交互功能的灵活性，这一选择器都能显著简化代码逻辑，提升开发效率。建议开发者结合具体需求，合理选择属性选择器组合，以达到最佳性能与可维护性。

希望本文能帮助你更好地理解这一选择器的价值，若在实践中有任何疑问，欢迎在评论区交流探讨！

最新发布

查看更多文章