📌  相关文章
📜  jQuery | :隐藏选择器(1)

📅  最后修改于: 2023-12-03 14:43:14.737000             🧑  作者: Mango

jQuery | :隐藏选择器

在许多情况下，我们需要通过JavaScript操作元素的可见性，隐藏一些元素。jQuery的 :hidden 选择器就是用来选取那些隐藏了的元素，常用于 show() 和 hide() 函数中。

语法

:hidden 选择器的基本语法如下：

$(":hidden")
用法
1. 选取所有隐藏的元素
$(":hidden")

该语句用于选取所有隐藏的元素，包括有 display: none、 visibility: hidden 和父元素有 display: none 的元素。

2. 选取特定区域内隐藏的元素
$("#container :hidden")

该语句用于选取 id 为 container 的元素下的所有隐藏的元素。

3. 选取隐藏的表单元素
$("input[type='hidden']")

该语句用于选取所有 type 属性为 hidden 的表单元素。

案例
<!DOCTYPE html>
<html>
<head>
  <title>jQuery | :hidden选择器</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#btn-show").click(function(){
        $("p:hidden").show();
      });
      $("#btn-hide").click(function(){
        $("p:visible").hide();
      });
    });
  </script>
</head>
<body>
  <button id="btn-show">显示所有段落</button>
  <button id="btn-hide">隐藏所有段落</button>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  <p style="display:none;">这是第三个段落(隐藏的)。</p>
  <p style="display:none;">这是第四个段落(隐藏的)。</p>
</body>
</html>

该代码会在页面中添加两个按钮，当点击“显示所有段落”按钮时，会将隐藏的段落显示出来；当点击“隐藏所有段落”按钮时，会将可见的段落隐藏起来。在这个例子中，我们使用了 :hidden 和 :visible 选择器来选取需要显示或隐藏的段落元素。