jQuery :first-of-type 选择器（保姆级教程）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 作为简化 JavaScript 开发的经典库，提供了大量便捷的选择器，帮助开发者快速定位目标元素。其中，jQuery :first-of-type 选择器 是一个功能强大且使用场景丰富的工具，尤其适合需要精准操作特定类型元素的场景。本文将从基础概念、语法解析到实战案例，深入浅出地讲解这一选择器的使用方法，帮助开发者掌握其核心逻辑与应用技巧。

什么是 jQuery :first-of-type 选择器？

jQuery :first-of-type 是 jQuery 提供的一个伪类选择器，其功能是选择某个父元素下同类元素中的第一个子元素。例如，在一个包含多个 <div> 和 <p> 标签的容器中，:first-of-type 可以单独选中第一个 <div> 或第一个 <p>，具体取决于上下文。

形象比喻：
可以将 HTML 结构想象成一个书架，每个元素（如 <div>、<p>）是不同类别的书籍。:first-of-type 相当于“找到同一类书中的第一本”，而不管其他类别书籍的位置如何。

基础语法与使用场景

语法结构

$( "parent > :first-of-type" )  

• 参数说明：
  • parent：父级元素的选择器（可选）。
  • :first-of-type：伪类选择器，直接附加在需要匹配的元素类型前。

示例：
若要选择页面中第一个 <h2> 标题：

$("h2:first-of-type").css("color", "red");  

此代码会将页面中所有 <h2> 标题中的第一个设置为红色。

核心特性解析

1. 基于元素类型匹配：
   :first-of-type 仅根据元素的 HTML 标签名判断，例如 <div> 和 <span> 是不同元素类型，即使它们的样式相同。

2. 父级依赖性：
   该选择器会遍历父元素下的所有子元素，仅选中同类元素中的第一个。例如，若父元素中有多个 <p> 和 <div>，:first-of-type 会分别选中第一个 <p> 和第一个 <div>。

3. 兼容性与性能：
   由于 jQuery 内部通过原生 document.querySelectorAll() 实现，其性能与 CSS 选择器一致，适合中小型项目。

实战案例：从简单到复杂的应用

案例 1：表单验证中的第一个输入框

假设需要为表单中的第一个输入框添加默认焦点：

<form>  
  <input type="text" name="username">  
  <input type="email" name="email">  
  <input type="password" name="password">  
</form>  

// 选中 form 下第一个 input 元素  
$("form > :first-of-type").focus();  

此代码会自动将光标定位到第一个文本输入框。

案例 2：动态加载内容时的首项高亮

在动态生成列表时，可能需要高亮显示第一个列表项：

// 假设通过 AJAX 加载数据后生成列表  
let htmlContent = "";  
for (let item of data) {  
  htmlContent += `<li>${item.name}</li>`;  
}  
$("#list-container").html(htmlContent);  

// 选中列表中的第一个 <li> 并添加样式  
$("#list-container > li:first-of-type").addClass("highlight");  

通过结合动态生成与选择器，可实现交互效果。

案例 3：导航栏首项默认选中

在导航菜单中，常需让第一个菜单项默认处于激活状态：

<nav>  
  <a href="#home">Home</a>  
  <a href="#about">About</a>  
  <a href="#contact">Contact</a>  
</nav>  

$("nav > a:first-of-type").addClass("active");  

此代码直接为第一个 <a> 元素添加 active 类，无需额外遍历逻辑。

与类似选择器的对比：避免常见误区

1. :first-of-type vs :first-child

对比代码：

<div class="container">  
  <div>Div 1</div>  
  <p>Paragraph 1</p>  
  <p>Paragraph 2</p>  
</div>  

// :first-of-type 选中第一个 <div> 和第一个 <p>  
$(".container > div:first-of-type").css("background", "yellow");  
$(".container > p:first-of-type").css("background", "lightblue");  

// :first-child 仅选中第一个子元素（即 <div>）  
$(".container > :first-child").css("border", "2px solid red");  

2. :first-of-type vs :first

• :first 是 jQuery 的全局选择器，会选中所有匹配元素中的第一个。
• :first-of-type 是基于父元素的相对选择器。

示例：

// 选中页面中第一个 <h2>  
$("h2:first").css("font-size", "2em");  

// 选中每个 <section> 中的第一个 <h2>  
$("section > h2:first-of-type").css("color", "green");  

常见问题与解决方案

问题 1：如何选择父元素下的第一个特定元素？

解答：
直接在选择器中组合父元素和 :first-of-type：

$("#parent > .child-class:first-of-type"); // 选中 #parent 下第一个 .child-class 类元素  

问题 2：如何在动态内容中确保选择器生效？

解答：
若内容是通过 JavaScript 动态生成的，需在内容加载完成后执行选择器：

$(document).ready(function() {  
  // 或使用 .on() 绑定事件后操作  
  $("#list").on("DOMNodeInserted", function() {  
    $(this).find("li:first-of-type").css("font-weight", "bold");  
  });  
});  

问题 3：如何同时选中多个元素类型中的第一个？

解答：
使用多重选择器语法：

$(".container > div:first-of-type, .container > p:first-of-type");  

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

1. 与 :not() 组合排除特定元素

例如，选择除第一个 <div> 外的所有 <div>：

$(".container > div:not(:first-of-type)").hide();  

2. 结合 .each() 实现遍历逻辑

$("section > p:first-of-type").each(function() {  
  $(this).prepend("★ "); // 在每个段落首添加符号  
});  

3. 动态切换样式

function highlightFirstItem() {  
  $(".product-list > .item:first-of-type").toggleClass("highlight");  
}  

总结

jQuery :first-of-type 选择器 是开发者工具箱中不可或缺的利器，其简洁的语法和精准的匹配能力，使其在表单处理、动态内容交互、导航栏设计等场景中大放异彩。通过本文的讲解，读者应能掌握其核心逻辑、使用场景及常见问题的解决方案。

实践建议：

• 从简单案例开始，逐步尝试结合其他选择器和 jQuery 方法。
• 使用浏览器开发者工具（如 Chrome DevTools）实时调试选择器效果。
• 对比 CSS 中的 :first-of-type 与 jQuery 实现，理解底层逻辑差异。

掌握这一选择器后，开发者可以更高效地操作 DOM，同时为后续学习其他高级选择器（如 :nth-of-type()、:last-child）打下坚实基础。