异常教程

jQuery :not() 选择器（长文讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，精准选择目标元素是 DOM 操作的核心。jQuery 作为简化 JavaScript 开发的利器，提供了丰富的选择器工具。其中，jQuery :not() 选择器 是一个功能强大的过滤工具，它允许开发者通过排除不符合条件的元素，实现更灵活的元素筛选。无论是编程初学者还是中级开发者，掌握这一选择器都能显著提升代码效率与可读性。本文将从基础语法、应用场景、进阶技巧等角度，深入讲解 :not() 的使用方法，并通过实际案例帮助读者理解其核心价值。

一、基础语法与核心原理

1.1 选择器的语法结构

jQuery :not() 的基本语法如下：

$(selector).not(selector|function|element)

其中，第一个 selector 是基础选择范围，第二个参数可以是：

  • 选择器字符串：如 "button"，表示排除所有按钮元素；
  • 函数：动态判断是否排除元素；
  • 元素或元素集合：直接排除特定元素。

例如，以下代码会隐藏页面中所有非按钮元素：

$("body *").not("button").hide();

1.2 过滤机制：像“筛子”一样筛选元素

可以将 :not() 理解为一个“逆向筛选器”。假设你有一堆不同颜色的积木，想要选出所有非红色积木，只需将红色积木筛除即可。类似地，jQuery :not() 会先收集所有匹配初始选择器的元素，再从中剔除符合条件的部分，最终返回剩下的元素集合。

示例代码：

// 选择所有段落，但排除 class 为 "highlight" 的段落  
$("p").not(".highlight").css("color", "gray");

二、常见应用场景与代码示例

2.1 排除特定元素类型

在表单验证或交互设计中，常需要忽略某些特定元素。例如，阻止所有输入框的默认行为，但保留提交按钮的点击事件：

// 绑定点击事件，但排除按钮元素  
$("input").not("button").click(function() {  
  alert("非按钮输入框被点击！");  
});

2.2 动态过滤内容

当页面内容动态加载时，jQuery :not() 可结合其他选择器实现条件筛选。例如，隐藏未选中的复选框：

// 显示所有选中的复选框，隐藏未选中的  
$("input[type='checkbox']").not(":checked").parent().hide();

2.3 结合 CSS 选择器增强功能

通过与 CSS 类名结合，可以精准控制元素样式。例如，为非活动状态的导航项添加灰色边框：

// 排除 class 为 "active" 的元素  
$(".nav-item").not(".active").css("border", "1px solid #ccc");

三、与 CSS 的:not() 伪类区别

3.1 核心差异：作用范围与逻辑

虽然 CSS 和 jQuery 都有 :not()，但二者存在关键区别：
| 特性 | jQuery :not() | CSS :not() |
|---------------------|----------------------------------------|--------------------------------|
| 作用对象 | 筛选已匹配的 DOM 元素集合 | 定义 CSS 规则的元素范围 |
| 动态性 | 支持函数参数，可动态判断 | 仅支持静态选择器 |
| 性能 | 需要遍历元素集合，可能影响性能 | 浏览器原生优化，性能更优 |

示例对比：

  • jQuery：$("div").not(":contains('Hello')")
  • CSS：div:not(:has(div))（CSS4 新增，需注意兼容性）

四、高级技巧与进阶用法

4.1 嵌套使用实现复杂筛选

通过多层 :not() 可构建复杂条件。例如，选择所有非按钮、非链接的可点击元素：

// 排除按钮和链接元素  
$("button, a").not("button, a").click(...);  
// 或更简洁的方式  
$(":not(button):not(a)").click(...);

4.2 结合 filter() 方法动态筛选

当需要基于元素属性或内容动态判断时，可配合 filter() 方法：

// 隐藏所有文本长度超过10个字符的段落  
$("p").not(function() {  
  return this.textContent.length > 10;  
}).hide();

4.3 性能优化建议

由于 :not() 需遍历元素集合，大规模数据时需注意性能。优化策略包括：

  1. 缩小初始选择范围：如 $("div#container *") 比 $("body *") 更高效；
  2. 优先使用原生 CSS：静态筛选尽量用 CSS 实现；
  3. 缓存结果：避免重复调用选择器，如 var $items = $(".items");。

五、常见问题与解决方案

5.1 为什么 :not() 无法排除动态添加的元素？

jQuery :not() 仅筛选初始匹配的元素集合。若新元素是动态添加的，需重新调用选择器或使用事件委托：

// 事件委托示例  
$(document).on("click", "div:not(.disabled)", function() {  
  // 处理逻辑  
});

5.2 如何排除多个元素类型？

通过逗号分隔选择器或使用多重 :not()：

// 方法1：排除按钮和链接  
$("div").not("button, a");  
// 方法2：链式调用  
$("div").not("button").not("a");

5.3 与 :has() 的组合使用

结合 :has() 可筛选包含或排除特定子元素的父元素：

// 选择不包含图片的 div  
$("div").not(":has(img)");

六、实践案例：构建可交互的动态列表

6.1 案例目标

实现一个任务列表，用户可添加任务并标记完成状态，同时隐藏已完成的任务：

6.2 HTML 结构

<ul id="task-list">  
  <li class="task">任务1</li>  
  <li class="task">任务2</li>  
</ul>  
<button id="toggle-completed">隐藏已完成任务</button>

6.3 jQuery 逻辑

$(document).ready(function() {  
  // 绑定完成事件  
  $("#task-list").on("click", ".task", function() {  
    $(this).toggleClass("completed");  
  });  

  // 隐藏已完成任务的按钮点击事件  
  $("#toggle-completed").click(function() {  
    // 排除 class 为 "completed" 的任务项  
    $(".task").not(".completed").show();  
    $(".task.completed").hide();  
  });  
});

6.4 样式补充

.task.completed {  
  text-decoration: line-through;  
}

结论

jQuery :not() 选择器 是前端开发中不可或缺的工具，它通过逆向筛选机制简化了复杂场景下的元素操作。无论是基础的排除特定元素类型，还是结合其他方法实现动态筛选，开发者都能通过此选择器提升代码的灵活性与可维护性。随着对 :not() 的深入理解，读者可以尝试将其与 filter()、事件委托等高级技术结合，进一步优化项目的交互逻辑与性能表现。

掌握 jQuery :not() 的关键在于理解其“过滤”本质，并在实际项目中不断实践。通过本文提供的案例与技巧，相信读者能够快速上手这一选择器，并将其融入日常开发流程，为网页交互设计提供更多可能性。

最新发布

查看更多文章