jQuery :visible 选择器

jQuery 中的 :visible 选择器用于选择所有当前可见的元素。它作用于可见元素。文档中占用空间的元素被认为是可见元素。可见元素的高度和宽度都大于 0。

具有 visibility:hidden 和 opacity:0 等 CSS 属性的元素被认为是可见元素，因为具有相应属性的元素会在文档中占用空间，尽管它们对眼睛不可见。不在文档中的元素被认为是隐藏的。

此选择器与 :hidden 选择器作用相反。因此，:hidden 选择器不会选择由 :visible 选择器选择的元素，反之亦然。

因此，:visible 选择器将不会选择满足以下任一条件的元素 -

• 类型为“hidden”的表单元素。
• 宽度和高度设置为 0 的元素。
• 元素设置为 display : none。
• 一个隐藏的父元素，该父元素也隐藏了子元素。

语法

使用 :visible 选择器的常用语法如下 -

该选择器不带任何参数使用。但是，我们可以在选择器前面使用 id、class 或标签名来选择特定的元素。

示例

在此示例中，我们将 CSS 属性 visibility:hidden 应用于一个段落元素，并为其分配了一个唯一的 id。使用此 id，我们将使用 :visible 选择器检查相应的元素，看它是否可见。

输出

执行上述代码后，输出将是 -

单击给定按钮后，输出将是 -