[分享]揭秘jQuery“not”选择器的神奇魅力：轻松掌握高效筛选技巧

jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 操作。在 jQuery 中，选择器是核心功能之一，它允许开发者轻松地选取 DOM ...

jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 操作。在 jQuery 中，选择器是核心功能之一，它允许开发者轻松地选取 DOM 元素。其中，“not”选择器是一个非常有用的功能，它可以排除特定元素，从而实现更精确的选择。本文将深入探讨 jQuery “not”选择器的使用方法和技巧。

什么是“not”选择器？

“not”选择器用于选择那些不符合指定条件的元素。它可以通过在选择器前面加上“:not(条件)”来实现。例如，如果你想选择所有不包含“class”属性值为“example”的元素，可以使用如下选择器：

$:not('.example')

这个选择器会返回所有没有“example”类的元素。

“not”选择器的使用场景

排除不需要的元素

在许多情况下，我们可能需要从一组元素中选择特定的元素，而排除其他不需要的元素。这时，“not”选择器就派上用场了。以下是一个简单的例子：

// 假设有一个包含多个元素的列表
 
Item 1
 
Item 2
 
Item 3
 
Item 4

// 使用“not”选择器排除所有不包含“item”类的元素
$(document).ready(function() { $('li:not(.item)').hide();
});

在这个例子中，所有不包含“item”类的

// 选择所有不包含“item”类且包含“active”类的元素
$(document).ready(function() { $('li:not(.item):contains("active")').css('color', 'red');
});

// 使用 CSS 类选择器排除所有不包含“item”类的元素
$(document).ready(function() { $('.item').show();
});

// 使用链式选择器选择所有不包含“item”类的元素
$(document).ready(function() { $('li:not(.item)').hide();
});