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

为了使用 jQuery 选择页面中所有可见或隐藏的元素，我们可以使用以下 jQuery 选择器：

:visible Selector可见选择器用于选择文档中当前可见的所有元素。

• 句法：

  $(":visible") 

:hidden Selector隐藏选择器选择要处理的隐藏元素。

• 句法：

  $(":hidden")

下面的例子说明了上述方法：
例子：

  

    
        How to select all visible
        or hidden elements in a
        HTML page using jQuery ?
    
  
    
    
      
    
        h1 {
            color: green;
        }
          
        h4 {
            color: green;
        }
          
        body {
            text-align: center;
        }
          
        .geeks {
            display: inline-block;
            font: bold 16px sans-serif;
            color: green;
        }
          
        .hidden {
            display: none;
        }
    

  

    GeeksforGeeks
      
     
        How to select all visible or
        hidden elementsin a HTML
        page using jQuery
    
      
    GeeksforGeeks
      
    
        A Computer Sciecne Portal
    
      
    For Geeks
      
    
        Learn Contribute Explore
    
    
      
    
        Visible
    
      
    
        Hidden
    
    
      
    
      
    
        $(document).ready(function() {
            $(".visibleg").click(function() {
                var visibleBoxes = [];
                $.each($(".geeks"), function() {
                    if ($(this).is(":visible")) {
                        visibleBoxes.push($(this).text());
                    }
                });
                $("h4").text("Visible items are - "
                            + visibleBoxes.join(", "));
            });
  
            // Get hidden items
            $(".hiddeng").click(function() {
                var hiddenBoxes = [];
                $.each($(".geeks"), function() {
                    if ($(this).is(":hidden")) {
                        hiddenBoxes.push($(this).text());
                    }
                });
                $("h4").text("Hidden items are - " 
                            + hiddenBoxes.join(", "));
            });
        });
    

  

输出：