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