异常教程

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

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 的灵魂

在前端开发中，选择器（Selector）是 jQuery 最核心的功能之一。它们如同程序员手中的“导航仪”，帮助我们精准定位网页中的 HTML 元素。而 :last 选择器，便是这一工具箱中的“定位神器”之一。它能快速锁定某个元素集合中的最后一个成员，无论该元素是段落、列表项，还是动态生成的内容块。无论是初学者还是中级开发者，掌握这一选择器都能显著提升代码效率，减少重复劳动。本文将从基础语法到实战案例，逐步解析 :last 的用法与技巧。

一、基础语法：如何用 :last 选择最后一个元素

1.1 语法结构

jQuery 的 :last 选择器语法非常简洁：

$( "选择器:last" )

例如，若要选取页面中最后一个 <p> 标签，代码为：

$("p:last")

这行代码会返回所有 <p> 元素中的最后一个节点。

1.2 形象比喻：排队中的“队尾识别”

可以将 :last 想象成一个“排队系统”中的“队尾识别器”。例如，当多个元素按顺序排列时，:last 会自动定位到队列的最后一个成员。就像在电影院排队买票时，工作人员能一眼认出队伍末尾的人一样。

1.3 基础案例：选取最后一个段落

假设页面中有以下 HTML 结构：

<p>这是第一个段落。</p>  
<p>这是第二个段落。</p>  
<p>这是第三个段落。</p>

通过以下代码，可以为最后一个 <p> 添加背景色：

$("p:last").css("background-color", "#FFD700");

执行后，第三个段落会呈现亮黄色背景。

二、进阶技巧：与复杂选择器的结合使用

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

:last 可以与其他选择器组合，例如：

  • 结合类选择器：选取某个类名下的最后一个元素。 
    $(".list-item:last").css("color", "red");
  • 结合属性选择器：选取特定属性值的最后一个元素。 
    $("a[href$='.pdf']:last").hide();

    这会隐藏最后一个以 .pdf 结尾的链接。

2.2 动态内容的处理

如果页面内容是动态生成的（例如通过 AJAX 或 JavaScript 添加元素），:last 会实时反映最新的元素列表。例如：

// 动态添加一个 <div>  
$("body").append("<div>新元素</div>");  

// 立即选取最后一个 <div>  
$("div:last").css("border", "2px solid blue");

此时新添加的 <div> 会被选中并添加蓝色边框。

2.3 注意上下文环境

:last 的作用范围仅限于当前选择器的上下文。例如，若在某个父元素内部使用：

$("#container p:last")

这会选取 #container 内部最后一个 <p> 元素，而非全局最后一个 <p>。

三、实战案例：:last 在真实场景中的应用

3.1 案例 1：表单提交时验证最后一个输入框

在表单提交时，可能需要验证最后一个输入框的值是否为空：

$("#submit-btn").click(function() {  
  var lastInputValue = $("input:text:last").val();  
  if (lastInputValue === "") {  
    alert("最后一个输入框不能为空！");  
    return false;  
  }  
});

这里通过 input:text:last 定位到最后一个文本输入框，确保其内容有效。

3.2 案例 2：幻灯片轮播的最后一个元素控制

在轮播图中，若需要为最后一个幻灯片添加“返回首页”按钮：

$(".slide:last").append('<button class="home-btn">首页</button>');

此代码会在最后一个幻灯片的末尾插入按钮。

3.3 案例 3：动态列表的增删操作

假设有一个动态增删的购物车列表：

// 添加新商品  
$("ul").append("<li>新商品</li>");  

// 选取最后一个商品并高亮  
$("ul li:last").addClass("highlight");

每次添加新商品后，最后一个 <li> 会被高亮显示。

四、注意事项与替代方案

4.1 性能优化

:last 内部依赖 :eq() 方法实现，若需频繁操作大量元素，建议先缓存结果：

var $lastItem = $(".items:last");  
$lastItem.css(...); // 后续操作直接使用变量

4.2 与 :last-child 的区别

:last 与 CSS 的 :last-child 不同：

  • :last 选取某个选择器匹配的所有元素中的最后一个。
  • :last-child 选取父元素中最后一个子元素（无论是否匹配选择器）。

例如：

<div class="parent">  
  <p>段落 1</p>  
  <div>这是最后一个子元素</div>  
</div>  

$(".parent p:last") // 选取最后一个 <p>（即段落 1）  
$(".parent :last-child") // 选取 <div>（因为它是父元素的最后一个子元素）

4.3 纯 CSS 替代方案

对于静态内容，可用 CSS 的 :last-child 或 :nth-last-child(1)：

/* 选取父元素中的最后一个 <p> */  
.parent p:last-child {  
  background-color: #FFD700;  
}

结论：:last 是精准定位的高效工具

:last 选择器凭借其简洁的语法和强大的功能，在 jQuery 开发中扮演着重要角色。无论是基础的元素操作，还是复杂场景的动态处理，它都能帮助开发者快速实现目标。然而，合理结合上下文、理解其与同类选择器的差异，以及关注性能优化，是高效使用它的关键。

通过本文的案例与技巧，读者应能掌握 :last 的核心用法，并在实际项目中灵活应用。记住，选择器的威力不仅在于其本身，更在于开发者对场景的深刻理解——这正是前端开发的魅力所在。

（全文共计约 1600 字）

最新发布

查看更多文章