异常教程

jQuery not() 方法（保姆级教程）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

理解基础：什么是jQuery not() 方法？

在前端开发中，精准操作DOM元素是提升用户体验和功能实现的关键。jQuery的not()方法正是为此设计的强大工具。它允许开发者从一组元素中排除符合条件的项，如同使用筛子过滤沙粒般高效。无论是排除特定类名、ID，还是动态条件，not()都能帮助开发者快速定位目标元素。

语法与基本用法

not()方法的核心语法如下：

$(selector).not(selector|function|element|jQuery object);
  • 参数：可以是选择器字符串、函数、DOM元素或jQuery对象
  • 返回值：排除指定项后的元素集合

示例1：排除特定类名的元素

// 选择所有段落，但排除带有".highlight"类的元素
$("p").not(".highlight").css("color", "red");

此代码将所有普通段落文字设为红色，但保留.highlight类的样式不变。就像在一堆苹果中挑出所有绿色的，只处理红色的苹果一样直观。

与原生JavaScript的对比

在原生JavaScript中，需结合filter()方法实现类似效果：

document.querySelectorAll("p").forEach(p => {
  if (!p.classList.contains("highlight")) {
    p.style.color = "red";
  }
});

而jQuery的not()方法通过简洁的链式调用，减少了代码复杂度，体现了其"写得少，做得多"的设计理念。

进阶技巧：not()方法的深度解析

not()与filter()方法的区别

方法功能方向参数类型典型用途
not()排除符合条件的元素选择器/函数/对象过滤不需要的项
filter()保留符合条件的元素选择器/函数/对象筛选需要的项

示例对比：

// not()示例：排除已选中的复选框
$("input[type='checkbox']").not(":checked").prop("disabled", true);

// filter()示例：仅启用已选中的复选框
$("input[type='checkbox']").filter(":checked").prop("disabled", false);

动态条件的排除场景

通过回调函数实现动态判断：

// 排除宽度小于200px的元素
$(".box").not(function() {
  return $(this).width() < 200;
}).addClass("selected");

这里将元素自身作为判断依据，类似"身高超过180cm才能入选篮球队"的筛选逻辑。

链式调用的灵活组合

// 先筛选所有段落，排除前两个，再筛选出带".error"类的
$("p")
  .not(":lt(2)") // 排除前两个
  .filter(".error") // 进一步筛选
  .css("background", "yellow");

这种组合使用方式，如同在图书馆中先排除儿童区书籍，再从中挑选编程类书籍。

实战案例：not()方法的应用场景

案例1：表单验证时的条件排除

// 验证所有输入框，但排除只读字段
$("input[type='text']").not("[readonly]").each(function() {
  if (!$(this).val().trim()) {
    $(this).addClass("invalid");
  }
});

此场景常用于表单提交前的验证，确保只检查可编辑的字段。

案例2：动态过滤商品列表

// 点击分类时，排除当前分类外的其他商品
$(".category-btn").click(function() {
  var currentCategory = $(this).data("category");
  $(".product")
    .not("[data-category='"+currentCategory+"']")
    .hide();
});

通过data-*属性实现商品分类的动态显示，类似电商平台的筛选功能。

案例3：排除当前活动元素

// 鼠标悬停时，排除当前元素的兄弟元素
$(".item").hover(
  function() {
    $(this).siblings().not(this).css("opacity", "0.5");
  },
  function() {
    $(this).siblings().css("opacity", "1");
  }
);

这种效果常见于导航栏悬停高亮，实现非当前项的半透明效果。

性能优化与注意事项

1. 避免过度嵌套选择器

// 不推荐：深层嵌套
$("#container div .item").not(".disabled").show();

// 推荐：使用上下文优化
$(".item", "#container").not(".disabled").show();

2. 函数回调的性能考量

// 避免在循环中频繁调用
var $elements = $(".box");
$elements.not(function() {
  // 复杂计算逻辑
}).each(...);

3. 与CSS选择器的结合使用

// 优先使用CSS选择器减少DOM操作
$("div:not(.hidden)").css("display", "block");

结论与展望

jQuery的not()方法通过直观的语法和灵活的参数配置，成为DOM操作中的重要工具。从基础的排除操作到结合其他方法的复杂场景，它都能提供简洁高效的解决方案。随着前端框架的演进，理解这类基础方法仍能帮助开发者更高效地处理复杂场景。

建议读者通过实际项目练习，尝试将not()与其他方法组合使用，逐步掌握其精髓。掌握这个方法后，可以进一步探索has(), is()等关联方法，构建更强大的DOM操作体系。记住，掌握工具的关键不在于记忆语法，而在于理解其背后的逻辑和应用场景。

最新发布

查看更多文章