jQuery：如何检查元素是否隐藏？（新手解析）

引言：为什么这个问题困扰着每一位前端开发者

想象一下这个场景：你正在编写一个包含下拉菜单、模态框或手风琴效果的交互页面。用户点击按钮后，某个区块应该平滑地出现或消失。但如果你不小心尝试动画化一个已经隐藏的元素呢？或者反过来，显示了一个本就可见的元素？结果就是——bug、界面抖动以及失望的用户。

正因如此，"How do I check if an element is hidden in jQuery?" 这个问题是Stack Overflow上最热门的问题之一。它收到了超过一千个回答，这绝非偶然。正确判断元素可见性的能力是一项基础技能，能为你节省数小时的调试时间。

在本文中，我们将详细讲解如何使用jQuery检查元素是否隐藏。你将了解其中的陷阱、display:none与visibility:hidden的区别，并学会编写可靠的代码。我们开始吧！

.is(':hidden')方法——你的主要工具

检查元素是否隐藏最简单、最常用的方法是使用.is()方法配合伪选择器:hidden。jQuery内置提供了这个功能。

它是如何工作的

jQuery中的:hidden选择器会选择以下元素：

\n
• 具有CSS属性display: none的元素；
\n
• 类型为<input type="hidden">的元素；
\n
• 宽度和高度为零的元素（例如width: 0; height: 0）；
\n
• 隐藏父元素的后代（继承不可见性）。
\n

最简单的检查方式如下：

// 检查id为"myDiv"的元素是否隐藏\nif ($('#myDiv').is(':hidden')) {\n    console.log('元素已隐藏！');\n} else {\n    console.log('元素可见。');\n}

通过.is(':visible')检查可见性

对于相反的逻辑，使用:visible选择器：

if ($('#myDiv').is(':visible')) {\n    console.log('元素在页面上可见。');\n}

这两种方法都运行快速且直观易懂。但有一个细微之处：如果元素是通过visibility: hidden或opacity: 0隐藏的怎么办？jQuery会将这些元素视为可见的，这常常让新手感到意外。

陷阱：visibility: hidden 和 opacity: 0

许多开发者错误地认为:hidden能响应所有隐藏元素的方式。事实并非如此。

visibility: hidden 示例

visibility: hidden属性使元素不可见，但它仍然占据页面空间。jQuery认为这样的元素是可见的，因为其尺寸不为零。

<div id="myBox" style="visibility: hidden;">我不可见，但占据空间</div>\n\n<script>\nconsole.log( $('#myBox').is(':hidden') );  // false\nconsole.log( $('#myBox').is(':visible') ); // true\n</script>

opacity: 0 示例

透明度也是如此：

<div id="transparentBox" style="opacity: 0;">透明，但对jQuery来说可见</div>\n\n<script>\nconsole.log( $('#transparentBox').is(':hidden') );  // false\n</script>

如果你的代码使用了fadeIn()/fadeOut()或透明度动画，标准的:hidden检查会让你失望。对于这种情况，你需要检查具体的CSS属性。

如何检查 visibility: hidden 或 opacity: 0

当你需要知道元素是否通过这些属性隐藏时，使用.css()方法：

检查 visibility

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');\nif (isVisibilityHidden) {\n    console.log('元素通过visibility隐藏');