极客笔记jQuery 在 jQuery 中 :hidden 和 :not(:visible) 的区别
在本文中，我们将介绍 jQuery 中 :hidden 和 :not(:visible) 选择器的区别。
阅读更多：jQuery 教程
:hidden 选择器
:hidden 选择器用于选取所有隐藏的元素。一个元素被视为隐藏的条件是：
- 它的 style 属性设置为 display:none；
- 它是一个 input 元素，type 属性设置为 hidden；
- 它是一个父元素，且所有子元素都隐藏。
例如，下面的代码中的 div 元素就会被 :hidden 选择器选中：
<div style="display:none;">这是一个隐藏的 div 元素。</div>
:not(:visible) 选择器
:not(:visible) 选择器用于选取所有不可见的元素。一个元素被视为不可见的条件是：
- 它的 style 属性设置为 display:none 或 visibility:hidden；
- 任何祖先元素的 style 属性设置为 display:none。
下面的代码中的 div 元素就会被 :not(:visible) 选择器选中：
<div style="visibility:hidden;">这是一个不可见的 div 元素。</div>
示例说明
为了更好地理解 :hidden 和 :not(:visible) 选择器的区别，我们来看一个示例。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(document).ready(function(){("#btn1").click(function(){
var hiddenElements = (":hidden");
hiddenElements.css("background-color", "yellow");
});("#btn2").click(function(){
var invisibleElements = $("div:not(:visible)");
invisibleElements.css("background-color", "red");
});
});
</script>
</head>
<body>
<button id="btn1">使用 :hidden 选择器</button>
<button id="btn2">使用 :not(:visible) 选择器</button>
<div style="display:none;">这是一个隐藏的 div 元素。</div>
<div style="visibility:hidden;">这是一个不可见的 div 元素。</div>
</body>
</html>
上面的代码中，当点击 “使用 :hidden 选择器” 按钮时，所有隐藏的元素的背景颜色将会变为黄色。而当点击 “使用 :not(:visible) 选择器” 按钮时，所有不可见的元素的背景颜色将会变为红色。
总结
在 jQuery 中，:hidden 选择器选择所有隐藏的元素，而 :not(:visible) 选择器选择所有不可见的元素。它们的区别在于对于父元素隐藏的情况的处理。使用这些选择器可以方便地对隐藏或不可见的元素进行操作。