异常教程

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 操作的工具，其选择器功能一直是开发者高效处理页面元素的核心利器。其中，jQuery [attribute!=value] 选择器作为属性选择器的一种，能够精准筛选出属性值不等于特定值的元素，尤其适用于动态内容过滤、表单验证等场景。对于编程初学者和中级开发者而言，理解这一选择器的原理与应用场景，不仅能提升代码编写效率，还能加深对 jQuery 选择器体系的整体认知。本文将从基础概念、语法解析、实战案例到进阶技巧，逐步展开这一主题的讲解。

一、属性选择器的基石：理解基础语法

1.1 什么是属性选择器？

jQuery 的属性选择器允许开发者通过元素的 HTML 属性（如 class、id、type 等）来定位目标元素。例如，[type="text"] 可以选中所有 type 属性值为 text 的表单元素。而 [attribute!=value] 则是其中一种特殊类型，专门用于选中属性值不等于指定值的元素。

形象比喻：如果将 HTML 元素比作图书馆的书籍，属性选择器就像一个智能分类器，能根据书脊上的标签（属性值）快速筛选出符合条件的书籍。而 [attribute!=value] 则是分类器中的“排除模式”，专门找出那些不符合特定标签的书籍。

1.2 语法结构与示例

基础语法：

$( "[attribute!=value]" )
  • attribute：要检查的 HTML 属性名（如 class、src、disabled 等）。
  • value：需要比较的目标值，通常需用引号包裹字符串值。

示例 1：选中非文本类型的输入框

<input type="text" placeholder="文本输入框">  
<input type="checkbox" name="agree">  

// 选中所有 type 属性不等于 "text" 的输入框  
$( "[type!='text']" ).css( "border", "2px solid red" );

此代码会为复选框添加红色边框，而文本输入框不受影响。

1.3 注意事项

  • 区分大小写：属性值的比较是区分大小写的。例如，[value!="YES"] 不会匹配 value="yes" 的元素。
  • 属性存在性：若元素未定义目标属性（如 <div></div> 中未设置 class 属性），则该元素不会被选中。

进阶技巧：
可以通过结合其他选择器或伪类来扩展功能。例如：

// 选中所有未被禁用的按钮  
$( "button:not([disabled!=true])" )

（注：此写法需根据实际属性值调整，disabled 属性通常只需存在即表示启用）

二、实战场景与代码示例

2.1 场景 1：动态过滤列表内容

假设页面中有一个商品列表，每个商品项的 data-price 属性存储了价格。用户希望隐藏价格高于 100 的商品：

<div class="product" data-price="89">商品 A</div>  
<div class="product" data-price="120">商品 B</div>  
<div class="product" data-price="59">商品 C</div>  

$( document ).ready( function() {  
  // 隐藏 data-price 不等于 "100" 且大于 100 的元素  
  $( "[data-price!=100][data-price]>100" ).hide();  
} );

注意：此代码存在逻辑漏洞！因为 data-price 是字符串类型，需先转换为数值再比较。正确写法应结合 jQuery 的 filter() 方法：

$( ".product" ).filter( function() {  
  return parseFloat( $( this ).attr( "data-price" ) ) > 100;  
} ).hide();

2.2 场景 2：表单验证

在表单提交前，检查是否未填写必填字段：

<form>  
  <input type="text" name="username" required>  
  <input type="email" name="email">  
  <button type="submit">提交</button>  
</form>  

$( "form" ).submit( function( event ) {  
  // 选中所有 required 属性存在但 value 为空的输入框  
  $( "input[required]:not([value=''])" ).each( function() {  
    $( this ).css( "border", "1px solid red" );  
  });  
  event.preventDefault(); // 暂停表单提交  
} );

（注：此示例需根据实际表单结构调整，value 属性可能不适用所有输入类型）

三、进阶技巧与性能优化

3.1 结合通配符与正则表达式

虽然 [attribute!=value] 本身不支持正则表达式，但可通过 filter() 方法实现更灵活的匹配：

// 选中所有 class 属性不包含 "active" 的元素  
$( "*:not([class*='active'])" );

此代码利用 *= 运算符（属性值包含指定字符串）的反向逻辑，筛选出不包含 active 的元素。

3.2 性能优化建议

  1. 减少选择器复杂度：避免在单个选择器中叠加过多条件，例如： 
    // 不推荐：  
$( "[data-type!='video'][data-type!='audio'][data-type!='image']" )  
// 推荐：  
$( "[data-type]" ).not( "[data-type='video'], [data-type='audio'], [data-type='image']" );
  2. 缓存选择器结果：若需多次操作同一选择器，应将其缓存到变量中： 
    const $nonTextInputs = $( "[type!='text']" );  
$nonTextInputs.css( "color", "red" ); // 第一次操作  
$nonTextInputs.val( "默认值" ); // 第二次操作

四、常见问题与解决方案

4.1 问题 1：选择器未生效

可能原因：

  • 属性值包含空格或特殊字符（如 class="btn primary"），需使用 *= 或 ~= 等其他运算符。
  • 未等待 DOM 加载完成，导致元素未被选中。

解决方案：

$( document ).ready( function() {  
  $( "[class!='primary']" ).css( "background", "#f0f0f0" );  
} );

4.2 问题 2：如何同时排除多个值？

方法 1：使用多个选择器：

$( "[type!='text'], [type!='checkbox']" ); // 选中非文本和非复选框的元素

方法 2：使用 not() 方法：

$( "input" ).not( "[type='text']", "[type='checkbox']" );

五、总结与延伸学习

通过本文，我们系统学习了 jQuery [attribute!=value] 选择器 的语法、应用场景及优化技巧。这一选择器的核心价值在于通过属性值的“不等于”条件，实现精准的元素筛选，尤其在动态内容处理和表单交互中表现突出。

后续学习建议：

  1. 探索其他属性选择器（如 [attribute^=value]、[attribute$=value]）。
  2. 结合 jQuery 的 filter()、map() 等方法实现更复杂的逻辑。
  3. 对比原生 JavaScript 的 querySelectorAll() 语法差异。

掌握这类基础选择器后，开发者可以更高效地构建交互式 Web 应用。建议读者通过修改本文示例代码、尝试不同属性组合，逐步深化对 jQuery 选择器体系的理解。

最新发布

查看更多文章