如何在 jQuery 中检查元素是否被隐藏

1. 用 jQuery 检查元素是否被隐藏的方法
2. 了解 jQuery 中的:hidden 选择器
3. 快速检查元素是否隐藏的技巧

任何 DOM 中的对象都可以通过将其 CSS 属性 display 指定为 none 来隐藏。

用 jQuery 检查元素是否被隐藏的方法

首先，我们创建一个标题元素 <h1>，并应用内联 CSS 属性来隐藏它。

<h1 style="display:none;">Your text here</h1>

在 jQuery 中，有两个可见性过滤器 - :hidden 和 :visible 选择器。它们分别指定元素是否隐藏和可见。可以通过下面的方法轻松检查。

<script>
$(document).ready(function(){
//checks if document is ready
 if($("h1").is(":hidden")){
  alert("The heading is hidden.");
  //your function here
 } 
if($("h1").is(":visible"){
  alert("The heading  is visible.");
 }
});
</script>

它给出了一个警告说： The heading is hidden.

了解 jQuery 中的:hidden 选择器

:hidden 选择器基于以下原因将一个元素标识为隐藏。

1. 它的 CSS display 属性的值为 none。
2. 该元素是一个带有 type="hidden"的表单元素。
3. 该元素的 height 和 width 值显示设置为 0。
4. 父元素是隐藏的。

所以，CSS visibility 属性设置为 hidden 或 opacity 属性设置为 0 的元素，在 jQuery 中被认为是可见的，因为它们仍然占用 DOM 中的空间。

另外，如果要检查元素的具体 CSS 属性是否被隐藏，我们可以使用以下方法。

<script>
if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){
alert("The heading is hidden.");
//your function here
}
</script>

快速检查元素是否隐藏的技巧

jQuery 不能利用原生 DOM 的 querySelectorAll() 方法。它还会产生一些性能问题，因为它迫使浏览器重新渲染页面以确定可见性。所以与其使用元素，不如使用类或 CSS 选择器，然后使用 .find(":hidden")。

<h1 style="display:none;">Your text here</h1>
<script>
 $(document).ready(function(){
  var hiddenHeadings = $("body").find(":hidden").is("h1");
   if(hiddenHeadings.length > 0){
    alert("There is atleast one heading hidden.");
   }
 });
</script>

在这里可以直接访问 hiddenHeadings，并可以对其进行操作。