异常教程

jQuery :even 选择器（超详细）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 作为轻量级 JavaScript 库，凭借其简洁的语法和强大的选择器功能，始终占据着重要地位。而 jQuery :even 选择器，正是这类工具中的“精准筛选专家”。它像超市货架上的智能分拣器，能快速定位到需要操作的目标元素，尤其在处理表格、列表等重复结构时，能显著提升代码效率。本文将从基础概念到实战案例，系统解析这一选择器的使用技巧与底层逻辑。

选择器基础：理解索引与“偶数”规则

索引系统：从数学角度解析选择器机制

在 jQuery 中，所有通过选择器获取的元素都会形成一个集合，这个集合的索引从 0 开始计数。例如：

// 获取页面中所有 <div> 元素
var elements = $("div");
// 第一个元素索引是 0，第二个是 1，依此类推

:even 选择器的作用，就是匹配集合中索引为 偶数 的元素。这里需要特别注意：在数学中“偶数”通常指能被 2 整除的自然数（如 0, 2, 4），但在编程场景中，索引从 0 开始的特点意味着：

  • 第 1 个元素（索引 0）会被选中
  • 第 3 个元素（索引 2）会被选中
  • 以此类推

形象比喻：这就像图书馆书架上的书籍，管理员从左到右编号时，第 1 本（位置 0）会被标记为“偶数层”，而每隔两本才会再次标记。这种索引规则是理解选择器行为的关键。

基础用法：高亮表格偶数行的经典场景

场景示例：创建交互式数据表格

在数据展示场景中，为表格添加“斑马线”效果（Zebra Striping）是常见的需求。通过结合 CSS 类和 :even 选择器，可以轻松实现这一效果：

<table>
  <tr><td>数据1</td></tr>
  <tr><td>数据2</td></tr>
  <tr><td>数据3</td></tr>
  <tr><td>数据4</td></tr>
</table>

<style>
.highlight {
  background-color: #f0f0f0;
}
</style>

<script>
$(document).ready(function() {
  $("table tr:even").addClass("highlight");
});
</script>

代码解析：

  1. $("table tr:even")：选择表格中所有 <tr> 元素，并筛选出索引为偶数的行
  2. .addClass("highlight")：为选中的行添加样式类
  3. 最终效果：第 1 行（索引0）、第3行（索引2）会呈现浅灰色背景

扩展思考：若想实现“奇数行高亮”，可以使用 :odd 选择器，其索引规则与 :even 完全相反（索引1、3、5等）。

进阶技巧：动态操作与复合选择器

动态内容处理：应对 AJAX 加载的数据

当页面内容通过 AJAX 动态加载时，需确保在数据更新后重新应用选择器。例如：

// 假设通过 AJAX 加载新行
$.ajax({
  success: function(response) {
    $("#table-body").append(response.newRows);
    // 重新应用选择器
    $("#table-body tr:even").addClass("highlight");
  }
});

复合选择器：结合其他选择器实现精准定位

选择器可以与其他 jQuery 选择器组合使用，例如筛选特定类名的偶数行：

// 选择 class="important" 的表格中偶数行
$(".important-table tr:even").css("font-weight", "bold");

深入对比：与 :nth-child 的异同分析

索引计算差异：两种选择器的“视角”区别

  • :even：基于 jQuery 选择器返回的元素集合索引（从 0 开始）
  • :nth-child(even)：基于元素在父容器中的原始 DOM 位置（从 1 开始）

关键区别示例：

<table>
  <tr class="hidden"></tr> <!-- 隐藏行 -->
  <tr>显示行1</tr>
  <tr>显示行2</tr>
</table>

// :even 的结果：
$("tr:even") // 选中显示行1（索引0）
// :nth-child(even) 的结果：
$("tr:nth-child(even)") // 选中显示行2（父容器中的第2个 <tr>）

比喻解释：这如同两位图书管理员，一位只看自己整理的书籍列表（jQuery 集合），另一位则根据整个书架的实际摆放（原始 DOM 结构）来判断位置。

性能优化：选择器背后的执行逻辑

索引遍历机制：理解底层实现原理

当执行 $("selector:even") 时，jQuery 的内部流程大致如下：

  1. 先通过基础选择器（如 $("tr")）获取所有匹配元素
  2. 遍历元素集合，记录每个元素的索引值
  3. 筛选出索引为偶数的元素

性能建议：

  • 对于静态内容，直接使用选择器即可
  • 在处理大量元素时，可先缓存选择器结果再操作：
var $rows = $("tr");
$rows.filter(":even").addClass("highlight");

常见问题与解决方案

问题1：动态添加元素后选择器失效？

解答：需在操作后重新调用选择器。例如：

// 添加新行后
$("table").append("<tr>新数据</tr>");
// 重新应用样式
$("table tr:even").addClass("highlight");

问题2：如何实现“从第3行开始”的偶数筛选？

解答：结合 :gt() 选择器：

// 选择索引大于1（即第3行起）的偶数行
$("tr:gt(1):even").css("color", "red");

实战案例：动态表单的偶数项验证

场景描述：验证注册表单中的间隔字段

假设需要验证用户输入的银行卡号，每4位一组，需对偶数组进行特定校验：

<input type="text" class="card-group" value="1234">
<input type="text" class="card-group" value="5678">
<input type="text" class="card-group" value="9012">

$(".card-group:even").each(function(index) {
  const value = $(this).val();
  // 对偶数组（索引0、2等）执行校验逻辑
  if (!/^\d{4}$/.test(value)) {
    $(this).addClass("invalid");
  }
});

结论：选择器的生态价值与学习建议

总结要点：

  1. 索引规则：0起始的偶数索引特性需重点掌握
  2. 适用场景：表格、表单等结构化数据的筛选与样式控制
  3. 组合能力：与其他选择器和 jQuery 方法无缝衔接

学习建议：

  • 通过修改索引值（如将 :even 改为 :odd）观察效果变化
  • 尝试结合 :nth-child 理解选择器差异
  • 在实际项目中替换传统循环遍历的代码，体验简洁语法的优势

掌握 jQuery :even 选择器，不仅能提升代码效率，更能培养开发者对元素集合操作的系统性思维。这种能力在处理复杂交互逻辑时，将成为解决重复性任务的“自动化工具”。建议读者通过本文提供的案例代码，逐步实践并探索选择器的更多可能性。

最新发布

查看更多文章