如何使用 jQuery 选择 HTML 页面中的所有可见或隐藏元素？

在 HTML 页面中，有时我们需要选择页面中所有可见或隐藏的元素，jQuery 提供了方便的方法来实现这个功能。

以下是使用 jQuery 选择 HTML 页面中所有可见或隐藏元素的步骤：

步骤 1 - 引入 jQuery 库

首先，在 HTML 页面中引入 jQuery 库。可以使用以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤 2 - 选择所有可见元素

要选择所有可见元素，可以使用 :visible 选择器。以下代码演示了如何选择所有可见元素：

var visibleElements = $(':visible');

此代码将所有可见元素存储在名为 visibleElements 的变量中。你可以根据需要使用该变量。

步骤 3 - 选择所有隐藏元素

要选择所有隐藏元素，可以使用 :hidden 选择器。以下代码演示了如何选择所有隐藏元素：

var hiddenElements = $(':hidden');

此代码将所有隐藏元素存储在名为 hiddenElements 的变量中。你可以根据需要使用该变量。

步骤 4 - 示例

以下是一个使用 jQuery 选择页面中所有可见或隐藏元素的代码示例：

$(document).ready(function() {
  var visibleElements = $(':visible');
  var hiddenElements = $(':hidden');
  
  console.log('Visible elements count: ' + visibleElements.length);
  console.log('Hidden elements count: ' + hiddenElements.length);
});

此代码将在文档准备好后（即 DOM 加载完成后）选择页面中所有可见或隐藏元素，并将它们的数量打印到控制台中。

现在，你知道了如何使用 jQuery 选择 HTML 页面中的所有可见或隐藏元素，希望这篇文章能帮助你更好地了解 jQuery 的用法。