举例讲解jQuery中可见性过滤选择器的使用

jQuery中的可见性过滤器选择器是一种强大的工具，用于根据元素的可见性状态选择相应的元素。这个选择器分为不可见性选择器和可见性选择器，分别用于选取不可见和可见的元素。如果你正在寻找与元素的可见性相关的功能，那么这些选择器将是你的得力助手。

不可见性选择器（:hidden）用于选取所有不可见的元素。这些元素可能是通过CSS样式设置为display:none，或者是input表单的type属性设置为hidden，又或者是由于某些原因被隐藏的元素。使用jQuery中的语法$(':hidden')可以方便地选取这些元素。这个选择器返回的集合元素是所有不可见的元素。

相反，可见性选择器（:visible）用于选取所有可见的元素。无论元素的样式如何，只要它们当前对用户可见，就可以被这个选择器选中。使用jQuery中的语法$(':visible')可以选取这些元素。这个选择器返回的集合元素是所有可见的元素。

使用这些选择器的方法非常简单。例如，你可以使用$('p:hidden').size()来获取隐藏的元素p的数量，或者使用$('p:visible').size()来获取显示的元素p的数量。这些操作可以帮助你了解页面上元素的可见性状态，从而进行进一步的操作。需要注意的是，hidden过滤器包含的不仅仅是CSS样式为display:none的元素，还包括input表单类型为type="hidden"和visibility:hidden的元素。

让我们观察一个HTML结构，透过这个结构，您可以更直观地了解两种选择器的工作原理及使用方式。

设想一个包裹元素`div`，内含有多个子元素，包括可见的与隐藏的。在这个结构中，我们会如何使用不同的选择器来定位和处理这些元素。

HTML结构示例：

```html

```

接下来是对应的CSS样式代码：

```css

.wrap { / 样式定义省略 / }

.wrap div { / 样式定义省略 / }

span { / 样式定义省略 / }

.startHidden { / 定义隐藏元素的样式 / } / 此处省略其他样式定义 /

```

在这个初步效果展示之后，我们来详细一个特别重要的选择器：`:hidden`选择器。它是一个非常实用的工具，能够帮助我们快速定位和处理页面中的隐藏元素。但在这之前，我们先明确隐藏元素包括哪些种类和定义方式。比如那些由于样式设定（如`display:none`）或表单属性（如`type="hidden"`）导致的不可见元素。而`visibility:hidden`并不属于`:hidden`选择器的范畴。在编写代码时需要注意区分这两种不同的隐藏方式。下面是关于`:hidden`选择器的使用说明：

一、不可见性选择器 `:hidden` 介绍

选择器语法示例： $(E:hidden) 或 $(:hidden)。前者可以明确选择特定类型的隐藏元素E，后者则选择所有隐藏的元素。 描述：`:hidden`选择器用于选取所有不可见的元素。需要注意的是，某些浏览器可能会将`