异常教程

jQuery [attribute] 选择器（建议收藏）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 作为简化 JavaScript 操作的利器，其核心功能之一便是通过灵活的选择器快速定位 HTML 元素。其中，[attribute] 选择器如同一把万能钥匙，能够根据元素的属性特征精准筛选目标节点。无论是表单验证、动态交互还是数据驱动的页面更新，掌握这一技能都能显著提升开发效率。本文将通过循序渐进的方式，带领读者从基础语法到高级技巧全面掌握这一强大工具。

一、基础语法：属性选择器的 DNA

1.1 基本结构解析

jQuery 的 [attribute] 选择器以方括号 [] 为标志，其核心语法为：

$( "[attribute]" )
$( "[attribute=value]" )
$( "[attribute$=value]" )

这就像在图书馆寻找书籍时，通过书名、作者或分类号等特征缩小搜索范围。例如：

// 选择所有 type 属性等于 "text" 的 input 元素
$('input[type="text"]').css("border", "2px solid blue");

1.2 属性存在检测

最简单的用法是检测元素是否包含某个属性：

// 选择所有带有 checked 属性的 checkbox
$(':checkbox[checked]').prop('disabled', true);

这类似于在超市货架上寻找贴有"有机"标签的商品，属性选择器就是我们的"标签扫描器"。

二、进阶用法：属性值的精准匹配

2.1 完全匹配

当需要元素属性值与指定值完全一致时，直接使用 = 运算符：

// 选中所有 href 属性值为 "https://example.com" 的链接
$('a[href="https://example.com"]').addClass('highlight');

这就像在快递单上寻找收件地址完全匹配的包裹，任何偏差都会被排除在外。

2.2 模糊匹配：以...开头或结尾

通过 $= 和 ^= 运算符实现尾部或头部匹配：

// 匹配所有以 .jpg 结尾的图片
$('img[src$=".jpg"]').each(function() {
    console.log("找到图片：" + $(this).attr('src'));
});

// 匹配所有以 https:// 开头的链接
$('a[href^="https://"]').css('color', 'green');

这里可以想象为在文件系统中搜索特定后缀的文件，或识别以某个域名开头的超链接。

2.3 包含匹配：~和运算符

使用 ~= 运算符匹配包含指定值的空格分隔属性：

// 选中所有 class 包含 "active" 的元素
$('[class~="active"]').css('background', '#ffeeba');

这就像在社交网络中筛选所有带有特定话题标签的帖子，空格分隔的属性值如同话题标签列表。

三、组合逻辑：多条件筛选的艺术

3.1 并列条件：AND 逻辑

通过连续使用属性选择器实现多条件同时满足：

// 选中 type 为 text 且 disabled 的 input 元素
$('input[type="text"][disabled]').val("已禁用");

这就像在招聘网站同时筛选"前端开发"和"远程办公"的职位，必须满足所有条件。

3.2 否定条件：NOT 运算符

配合 :not 选择器实现排除逻辑：

// 选中所有非选中状态的 checkbox
$('input[type="checkbox"]:not([checked])').click();

这类似于在超市货架上排除所有过期商品，只保留未过期的选项。

3.3 混合选择器：层级与属性结合

可以与层级选择器结合使用：

// 选中 div 元素下的所有未读消息（data-read 为 false）
$('div.message:not([data-read="true"])').addClass('unread');

这种组合如同在文件夹结构中筛选特定属性的子文件，既考虑位置又关注属性特征。

四、动态场景：选择器的实战应用

4.1 表单验证的神器

在表单处理时，属性选择器能精准定位输入元素：

// 为所有 required 的 input 添加验证提示
$(':input[required]').on('blur', function() {
    if (!$(this).val()) {
        $(this).after('<span class="error">必填字段</span>');
    }
});

4.2 数据驱动的动态内容

根据数据属性（data-attributes）控制内容显示：

// 根据 data-category 过滤商品列表
$('#filter').on('change', function() {
    const category = $(this).val();
    $('.product').hide();
    $(`.product[data-category="${category}"]`).show();
});

4.3 性能优化案例

避免使用过于宽泛的选择器，结合属性筛选提升效率：

// 低效写法：遍历所有元素
$('div').filter('[data-type="highlight"]').css('background', 'yellow');

// 优化写法：直接定位目标
$('div[data-type="highlight"]').css('background', 'yellow');

五、常见误区与最佳实践

5.1 属性值的大小写问题

HTML 属性值的大小写可能影响匹配结果，建议使用小写或结合正则表达式：

// 不区分大小写的匹配方案
$('[class]').filter(function() {
    return $(this).attr('class').toLowerCase().includes('active');
});

5.2 特殊字符的转义

当属性值包含特殊符号时，需使用双引号包裹并转义内部引号：

// 正确写法：处理包含空格的 class 名
$('[class="btn primary"]').css('border', '1px solid red');

5.3 选择器优先级原则

遵循"先属性后行为"的原则，优先使用属性过滤再执行操作：

// 先筛选再操作，避免全页面遍历
$('[data-editable]').each(function() {
    $(this).attr('contenteditable', 'true');
});

六、对比与扩展：选择器生态全景

6.1 与 CSS 选择器的异同

虽然语法相似，但 jQuery 的 [attribute] 选择器支持更灵活的匹配方式： | 功能描述 | CSS 支持 | jQuery 支持 | |-------------------------|-------------------|----------------------| | 属性存在检测 | 不支持 | [attribute] | | 属性值尾部匹配 | 不支持 | [attr$=value] | | 多条件 AND 组合 | 需多重选择器 | 直接连续书写 |

6.2 与原生 JavaScript 的互操作

通过 querySelectorAll 实现类似功能：

// jQuery 写法
$('a[href^="https://"]').addClass('secure');

// 纯 JS 等效写法
document.querySelectorAll('a[href^="https://"]').forEach(el => {
    el.classList.add('secure');
});

结论：让代码更具可读性的选择器哲学

掌握 jQuery [attribute] 选择器不仅是一项技术能力，更是培养"元素思维"的重要过程。通过精准的属性定位，开发者能编写出更高效、可维护的代码。建议读者在日常开发中：

  1. 将常用选择器整理成模板库
  2. 结合浏览器开发者工具实时调试
  3. 通过单元测试验证选择器的稳定性

记住，优秀的选择器如同精准的手术刀，既能保护页面结构完整，又能实现功能的完美落地。当您需要在复杂的 DOM 树中定位特定元素时，jQuery 的 [attribute] 选择器永远是您的可靠伙伴。

附录：常用 [attribute] 选择器速查表

语法模式功能描述示例代码
[attribute]检测属性存在$('input[disabled]')
[attribute=value]完全匹配属性值$('a[href="https://example.com"]')
[attribute$=value]匹配属性值结尾$('img[src$=".png"]')
[attribute^=value]匹配属性值开头$('a[href^="mailto:"]')
[attribute*=value]匹配属性值包含$('div[title*="重要"]')
[attribute~=value]空格分隔的值列表匹配$('[class~="warning"]')
[attribute|=value]精确或语言变体匹配$('[lang|=en]')（匹配 "en" 或 "en-US"）
:not([attribute])排除属性存在的元素$(':not([hidden])')
[attr1][attr2]同时满足多个属性条件$('input[type="text"][required]')
[attr][text*="keyword"]结合属性与文本内容匹配$('[data-type="news"][text*="紧急"]')

通过持续实践这些模式，您将逐渐形成"属性思维"，在处理复杂 DOM 结构时得心应手。记住，选择器的精妙之处不在于语法本身，而在于开发者对 HTML 结构的理解与掌控。

最新发布

查看更多文章