jQuery 杂项 size() 方法（建议收藏）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 作为简化 DOM 操作的工具，提供了许多便捷的方法。其中，size() 方法虽然看似简单，但其背后隐藏的逻辑和应用场景值得深入探讨。对于编程初学者和中级开发者而言，理解这一方法不仅能提升代码效率，还能帮助建立对 jQuery 核心机制的直观认知。本文将从基础概念、实际案例到进阶技巧，逐步解析 jQuery 杂项 size() 方法 的原理与用法，并通过对比、比喻和代码示例，让读者轻松掌握这一工具。

一、什么是 jQuery 的 size() 方法？

size() 方法是 jQuery 中用于获取当前 jQuery 对象中元素数量的函数。简单来说，它返回一个数值，表示当前被选中的 DOM 元素集合的大小。例如，若页面中有 3 个 <div> 元素，执行 $("div").size() 将返回 3。

1.1 基本语法与返回值

$(selector).size();

• 语法说明：
  • $(selector)：选择需要统计的 DOM 元素。
  • .size()：调用方法返回元素数量。
• 返回值类型：数值（Number）。

1.2 形象比喻：购物车的物品计数器

可以将 jQuery 对象想象成一个“购物车”，而 size() 就是这个购物车的计数器。当你往购物车里添加或移除商品时，计数器会实时更新数量。类似地，当通过 jQuery 筛选出一组元素后，size() 会告诉你当前“购物车”里有多少个“商品”。

二、size() 方法与 length 属性的对比

在 jQuery 中，size() 方法常与 length 属性被同时讨论。两者功能相似，但存在细微差异，需根据场景选择使用。

2.1 length 属性简介

length 是 jQuery 对象的内置属性，直接返回元素集合的长度。例如：

console.log($("div").length); // 输出与 $("div").size() 相同的结果  

2.2 两者的异同点

2.3 选择建议

• 推荐使用 length：在大多数情况下，length 的性能更优且无需额外方法调用。
• 保留 size() 的场景：当代码需要更直观地表达“统计”意图时，或在需要与旧版代码兼容时。

三、size() 方法的典型应用场景

3.1 动态元素数量的实时监控

假设页面中有一个按钮，每次点击会动态添加一个 <li> 元素到列表中。通过 size() 可实时显示列表项的数量：

HTML 结构：

<button id="addItem">添加列表项</button>
<ul id="myList"></ul>
<p>当前列表项数量：<span id="count"></span></p>

jQuery 代码：

$("#addItem").click(function() {
  $("#myList").append("<li>新列表项</li>");
  // 更新计数器
  $("#count").text($("#myList li").size());
});

此案例中，size() 每次点击后立即计算最新的 <li> 元素数量，确保页面显示与实际数据同步。

3.2 条件判断与流程控制

在需要根据元素数量执行不同逻辑时，size() 可作为条件判断的核心依据。例如，当用户输入的内容超过 3 个时，触发警告提示：

$("#inputField").on("input", function() {
  const inputLength = $(this).val().length;
  if ($("p.warning").size() === 0 && inputLength > 3) {
    $("<p class='warning'>输入内容过长！</p>").insertAfter(this);
  } else if (inputLength <= 3) {
    $("p.warning").remove();
  }
});

此代码通过 size() 判断警告提示是否存在，避免重复创建元素。

四、进阶技巧：结合筛选器与链式调用

size() 的真正威力在于与 jQuery 的筛选方法（如 filter()、:visible 伪类）结合使用，实现复杂场景的元素数量统计。

4.1 统计可见元素的数量

假设页面中有多个 <div> 元素，部分通过 CSS 隐藏。使用 :visible 筛选可见元素后，再调用 size()：

const visibleCount = $("div:visible").size();
console.log("可见的 div 元素数量：" + visibleCount);

4.2 结合自定义筛选逻辑

若需统计满足特定条件的元素（例如文本包含“重点”字样的 <span>），可通过 filter() 方法：

const filteredCount = $("span").filter(function() {
  return $(this).text().includes("重点");
}).size();
console.log("包含'重点'的 span 元素数量：" + filteredCount);

4.3 链式调用优化代码

jQuery 的链式调用特性允许将多个操作串联，例如先筛选元素再统计数量：

const result = $("div")
  .filter(".active")
  .not(":hidden")
  .size();
// 代码更简洁，且逻辑清晰  

五、常见误区与最佳实践

5.1 误区：误将 size() 用于非 jQuery 对象

size() 是 jQuery 方法，若直接作用于原生 DOM 元素集合（如 document.querySelectorAll 返回的结果），会报错。

错误示例：

const nativeList = document.querySelectorAll("div");
console.log(nativeList.size()); // 报错！  

正确做法：

console.log($(nativeList).size()); // 先转换为 jQuery 对象  

5.2 性能优化建议

• 优先使用 length：除非需要代码可读性更高，否则用 length 替代 size()。
• 避免频繁调用：在循环或高频事件中，建议将 size() 的结果缓存到变量，减少重复计算。

5.3 兼容性注意事项

虽然 size() 在现代 jQuery 版本中仍有效，但官方推荐逐步迁移到 length。若需维护旧代码，可保留 size() 以确保兼容性。

六、案例实战：动态表格行数统计

6.1 需求描述

设计一个表格，用户可通过按钮动态添加或删除行，同时实时显示当前行数。

6.2 HTML 结构

<table id="dynamicTable">
  <thead><tr><th>标题</th></tr></thead>
  <tbody>
    <tr><td>初始行</td></tr>
  </tbody>
</table>
<button id="addRow">添加行</button>
<button id="removeRow">删除最后一行</button>
<p>当前行数：<span id="rowCount"></span></p>

6.3 jQuery 实现

// 初始化行数显示
updateRowCount();

function updateRowCount() {
  const rows = $("#dynamicTable tbody tr");
  const count = rows.size(); // 使用 size() 统计行数
  $("#rowCount").text(count);
}

$("#addRow").click(function() {
  $("#dynamicTable tbody").append("<tr><td>新行</td></tr>");
  updateRowCount();
});

$("#removeRow").click(function() {
  $("#dynamicTable tbody tr:last").remove();
  updateRowCount();
});

此案例通过 size() 方法动态更新行数，展示了 size() 在 DOM 操作中的实际应用。

结论

jQuery 杂项 size() 方法 是一个功能简洁但用途广泛的小工具。通过本文的讲解，读者可以掌握其基本语法、与 length 属性的区别、以及在动态统计、条件判断等场景下的具体应用。对于开发者而言，理解这一方法不仅能提升代码效率，还能加深对 jQuery 核心机制的理解。未来在开发中，建议优先使用 length 属性以优化性能，同时在需要清晰表达意图时保留 size() 的使用。通过持续实践与案例分析，开发者可以更好地驾驭这一工具，为复杂前端逻辑提供支持。