jQuery | :可见选择器

可见选择器是 jQuery 中非常实用的筛选器之一。它可以帮助我们选择当前可见的元素，避免了对隐藏元素进行无效的操作，提高了程序性能。

使用方法

可见选择器使用 :visible 来选取当前可见的元素，使用 :hidden 来选取当前隐藏的元素。

// 选取当前可见的元素
$("selector:visible");

// 选取当前隐藏的元素
$("selector:hidden");

其中 selector 为需要选取的元素选择器。

示例

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item" style="display:none">Item 2</div>
  <div class="item">Item 3</div>
</div>

JavaScript

// 选取所有可见的元素
$(".item:visible").addClass("visible");

// 选取所有隐藏的元素
$(".item:hidden").addClass("hidden");

CSS

.visible {
  background-color: green;
}

.hidden {
  background-color: red;
}

注意事项

• :visible 会选取所有不含 hidden、display:none 或 opacity:0 属性的元素。
• 当元素的父元素或祖先元素含有 hidden、display:none 或 opacity:0 属性时，该元素也会被视为隐藏元素。
• :hidden 与 :visible 取反，选取所有含有 hidden、display:none 或 opacity:0 属性的元素。

总结

可见选择器是 jQuery 中非常实用的筛选器，它可以帮助我们选择当前可见的元素，避免了对隐藏元素进行无效的操作，提高了程序性能。但需要注意，当元素的父元素或祖先元素含有 hidden、display:none 或 opacity:0 属性时，该元素也会被视为隐藏元素。