异常教程

jQuery :visible 选择器（一文讲透）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，控制元素的可见性是一个高频需求。无论是实现动态内容加载、表单验证反馈，还是构建交互式导航菜单，开发者常常需要快速筛选出可见的DOM元素。jQuery 的 :visible 选择器正是为此而生，它像一个精准的“过滤器”，帮助开发者在复杂的页面结构中快速定位目标元素。本文将从基础用法到进阶技巧，结合实际案例，深入解析 jQuery :visible 选择器 的核心功能与应用场景，帮助读者掌握这一工具的“隐藏实力”。

基础用法：快速筛选可见元素

什么是 :visible 选择器？

:visible 是 jQuery 提供的一个过滤性选择器，它的作用是仅匹配当前可见的DOM元素。这里的“可见”有严格定义：

  • 元素的 CSS display 属性不为 none；
  • 元素的宽度和高度均大于 0；
  • 元素的所有祖先元素均可见（例如父容器未被隐藏）。

简单来说，只要元素在页面上实际显示出来，无论其是否被部分遮挡或处于滚动区域外，均会被 :visible 选中。

基本语法与示例

使用 :visible 的基本语法与 jQuery 其他选择器一致：

$(selector + ":visible").method();

例如，假设页面中有多个 <div> 元素，部分被隐藏，可以通过以下代码获取所有可见的 <div>：

$("div:visible").css("background-color", "yellow");

效果：所有可见的 <div> 背景将变为黄色。

关键点解析

  1. 动态响应能力：
    :visible 的判断是实时的。即使元素在页面加载后被动态隐藏或显示（如通过 JavaScript 或 CSS 动画），再次调用 :visible 时会重新计算可见性。

    • 比喻：就像在拥挤的房间里，:visible 会实时扫描每个人的可见状态，而不会依赖“记忆”之前的观察结果。

  2. 与 :hidden 的互补性：
    jQuery 还提供了 :hidden 选择器，用于匹配不可见元素。两者可以结合使用，例如：

    // 隐藏所有当前可见的 .box 元素  
$(".box:visible").hide();

进阶技巧：结合其他选择器与方法

1. 与属性选择器结合筛选

:visible 可以与其他选择器（如类名、属性选择器）组合，实现更精准的过滤。例如：

// 选中所有可见且带有 data-status="active" 属性的 div  
$("div[data-status='active']:visible").each(function() {  
  console.log("可见且活跃的元素：", this);  
});

场景示例：在动态表格中，仅对可见的“已审核”行执行操作。

2. 结合 filter() 方法动态筛选

若需要根据更复杂的条件筛选可见元素，可结合 filter() 方法：

// 选中可见且文本长度超过 10 字符的 span  
$("span").filter(":visible").filter(function() {  
  return $(this).text().length > 10;  
}).addClass("highlight");

效果：可见且文本过长的 <span> 元素会被添加高亮类。

3. 与动画结合实现交互

:visible 常用于控制动画的触发条件。例如：

$("#toggle-btn").click(function() {  
  if ($("#content").is(":visible")) {  
    $("#content").slideUp();  
  } else {  
    $("#content").slideDown();  
  }  
});

关键点：

  • is(":visible") 用于判断目标元素是否可见，避免动画冲突。
  • 比喻：就像门上的感应器，只有在门关闭时才会触发开门动作。

性能优化与常见误区

误区 1：误判元素的可见性

某些情况下，:visible 的判断逻辑可能不符合预期：

  • 示例：元素的 display 不是 none，但宽度为 0 或高度为 0。 
    <div style="width: 0; height: 0;"></div>  
// 此元素会被视为不可见
  • 解决方案：若仅需判断 display 属性，可直接检查 CSS 属性值： 
    if ($(element).css("display") !== "none") {  
  // 执行逻辑  
}

误区 2：忽略祖先元素的影响

若某个元素的父容器被隐藏，则该元素即使自身 display 正常，也会被 :visible 排除。例如：

<div style="display: none;">  
  <div id="child" style="display: block;"></div>  
</div>  
// $("#child:visible") 的结果为空

解决思路：若需忽略父容器影响，可直接检查目标元素的 display 属性。

性能优化建议

  1. 减少选择器链长度：
    将 :visible 放在选择器的最后，例如 $(".item:visible") 而非 :visible.item，以提高 jQuery 的解析效率。
  2. 缓存结果集：
    若需多次操作可见元素，先将其缓存到变量中： 
    const $visibleItems = $(".item:visible");  
$visibleItems.each(...); // 多次复用

实战案例：构建动态过滤列表

场景描述

假设有一个商品列表，用户需要根据价格区间筛选可见商品，并统计当前可见项的数量。

HTML 结构

<div class="product" data-price="299">商品A</div>  
<div class="product" data-price="599">商品B</div>  
<!-- 其他商品元素 -->  
<button id="filter-btn">过滤低价商品</button>  
<div id="count"></div>

jQuery 实现

$(document).ready(function() {  
  // 点击按钮时隐藏高价商品  
  $("#filter-btn").click(function() {  
    $(".product").each(function() {  
      const price = $(this).data("price");  
      if (price > 500) {  
        $(this).hide();  
      } else {  
        $(this).show();  
      }  
    });  
    // 更新可见项数量  
    const visibleCount = $(".product:visible").length;  
    $("#count").text(`当前可见商品：${visibleCount} 件`);  
  });  
});

关键点分析

  1. 动态隐藏/显示：通过遍历所有商品元素并根据条件设置 hide() 或 show()。
  2. 实时计数：利用 $(".product:visible").length 获取可见元素数量，实现数据可视化。
  3. 扩展性：若需增加筛选条件（如分类、评分），只需在 each() 方法中添加逻辑即可。

与其他选择器的对比

以下表格对比了 :visible 与其他常见选择器的功能差异：

选择器作用描述典型用例
:visible匹配所有可见元素，基于 display、尺寸及父级可见性综合判断统计可见元素数量、动态交互控制
:hidden匹配不可见元素，逻辑与 :visible 相反显示隐藏内容前的预处理
:empty匹配无子元素或文本的空元素清理未填充的内容容器
:animated匹配当前处于动画执行中的元素防止动画冲突或状态标记

结论

jQuery :visible 选择器 是前端开发中一个轻量但强大的工具，它简化了可见性判断的复杂性，帮助开发者快速实现动态交互逻辑。通过结合其他选择器、方法和性能优化策略，开发者可以将其灵活应用于表单验证、内容过滤、动画控制等场景。

在使用时需注意以下核心原则：

  1. 实时性：:visible 的判断是动态的，适合在事件触发后重新计算；
  2. 组合能力：与其他选择器或方法结合可扩展其功能边界；
  3. 误判规避：在需要精确控制的场景中，需结合 CSS 属性检查或逻辑判断。

掌握 :visible 的底层逻辑与应用场景，不仅能提升代码效率，更能培养开发者对 DOM 状态管理的全局视角。下次当需要快速筛选可见元素时，不妨让 :visible 成为你的“默认选择”！

最新发布

查看更多文章