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+ 小伙伴加入学习 ,欢迎点击围观

理解基础:什么是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操作体系。记住,掌握工具的关键不在于记忆语法,而在于理解其背后的逻辑和应用场景。

最新发布