异常教程

jQuery :hidden 选择器（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代网页开发中，控制元素的可见性是一个常见需求。无论是表单验证时的提示信息显示、动态加载内容时的加载动画，还是复杂的交互效果，开发者都需要一种高效的方式来定位和操作隐藏或显示的元素。jQuery :hidden 选择器正是为此设计的核心工具之一。它允许开发者通过简洁的语法快速筛选出页面上所有隐藏的元素，或结合其他选择器实现更复杂的逻辑。

本文将从基础概念入手，逐步深入讲解 jQuery :hidden 选择器 的工作原理、应用场景及常见问题。通过代码示例与实际案例，帮助读者掌握这一工具，并理解其在前端开发中的重要性。

:hidden 选择器的基础用法

什么是选择器？

在 jQuery 中，选择器（Selector）是用于从 DOM 中快速定位特定元素的语法。例如，$("#myElement") 会选取 ID 为 myElement 的元素，而 $(".container") 则会选取所有 class 为 container 的元素。

:hidden 是一个过滤选择器，它的作用是筛选出所有符合隐藏条件的元素。其语法如下：

$(":hidden")

调用此选择器会返回一个包含页面中所有隐藏元素的 jQuery 对象集合。

简单示例：隐藏元素的批量操作

假设页面中有多个输入框，当用户提交表单时，需要将所有未填写的输入框标记为红色边框：

<form>  
  <input type="text" class="required" placeholder="姓名">  
  <input type="email" class="required" placeholder="邮箱">  
  <button type="submit">提交</button>  
</form>  

$("form").submit(function(e) {  
  e.preventDefault(); // 阻止表单默认提交  
  $(":hidden").each(function() {  
    $(this).css("border", "2px solid red");  
  });  
});

注意：此示例仅用于演示，实际验证逻辑应更复杂。

:hidden 选择器的工作原理

如何判断元素是否“隐藏”？

:hidden 的判定逻辑并非简单地检查元素的 display: none 属性。它的判断规则包括以下情况：

  1. 元素的 display CSS 属性值为 none；
  2. 元素的 width 和 height 均为 0；
  3. 元素的 opacity 为 0（但部分浏览器可能不支持此判断）；
  4. 元素被父元素完全遮挡（如父元素 overflow: hidden 且子元素超出可视区域）。

对比 visibility: hidden

与 visibility: hidden 不同，后者仅使元素不可见，但仍占用布局空间。而 :hidden 选择器不会选中 visibility: hidden 的元素，因为其仍被视为“可见”（只是不可交互）。

比喻说明：
可以将 display: none 想象为元素被完全移除，而 visibility: hidden 则是元素被“隐形斗篷”包裹，虽然看不见，但位置仍占着。

实际案例与进阶用法

案例 1：动态加载内容的隐藏元素处理

假设页面通过 AJAX 请求动态加载一组卡片，加载完成后需要隐藏所有未通过验证的卡片：

// 模拟 AJAX 响应  
const cards = [  
  { id: 1, isValid: true },  
  { id: 2, isValid: false },  
  { id: 3, isValid: true }  
];  

// 渲染卡片  
$.each(cards, function(index, card) {  
  const $card = $("<div>")  
    .text(`卡片 ${card.id}`)  
    .attr("data-id", card.id);  

  if (!card.isValid) {  
    $card.hide(); // 设置 display: none  
  }  

  $("body").append($card);  
});  

// 使用 :hidden 筛选无效卡片  
const invalidCards = $(":hidden").map(function() {  
  return $(this).data("id");  
}).get();  

console.log("无效卡片 ID:", invalidCards); // 输出: [2]

案例 2：与 :not() 组合筛选可见元素

若需要操作非隐藏元素，可结合 :not()：

// 为所有可见的 .button 元素添加点击事件  
$(".button:not(:hidden)").click(function() {  
  console.log("点击了可见按钮");  
});

注意事项与常见问题

问题 1：元素动态变化后选择器失效？

如果元素在运行时被动态隐藏或显示，需重新调用选择器以获取最新状态。例如：

// 错误写法（选择器缓存旧状态）  
const $hiddenElements = $(":hidden");  
setTimeout(() => {  
  $(".element").hide(); // 新隐藏元素  
  console.log($hiddenElements.length); // 未包含新隐藏的元素  
}, 1000);  

// 正确写法（实时查询）  
setTimeout(() => {  
  console.log($(":hidden").length); // 包含新隐藏的元素  
}, 1000);

问题 2：与 :visible 的混淆

:visible 是 :hidden 的反向选择器，用于选取可见元素。两者常被误用，需注意：

// 隐藏所有可见的 .box 元素  
$(".box:visible").hide(); // 正确  
$(".box:hidden").show(); // 错误（应为 $(".box:hidden").show() 可能隐藏已隐藏的元素？需逻辑确认）

进阶技巧：与动画效果结合

结合 :hidden 可实现优雅的交互效果。例如，点击按钮时切换元素的可见性，并添加过渡动画：

<button id="toggle">切换显示</button>  
<div class="content" style="display: none;">隐藏的内容</div>  

$("#toggle").click(function() {  
  const $content = $(".content");  
  if ($content.is(":hidden")) {  
    $content.slideDown(500); // 淡入显示  
  } else {  
    $content.fadeOut(300); // 淡出隐藏  
  }  
});

结论

jQuery :hidden 选择器 是前端开发中不可或缺的工具，它简化了隐藏元素的定位与操作，尤其在表单验证、动态内容加载等场景中发挥重要作用。通过理解其判定逻辑、合理结合其他选择器，并注意动态元素的实时查询，开发者可以更高效地实现复杂的交互功能。

掌握这一工具后，读者可以进一步探索 jQuery 的其他高级选择器（如 :animated、:empty），并结合 CSS 和 JavaScript 实现更强大的功能。实践是最好的老师，建议读者通过实际项目不断巩固所学知识。

最新发布

查看更多文章