在jquery中选取第一个元素的过滤选择器是

admin 2026年02月03日 22:29 103 0

在jQuery中，选取第一个元素的过滤选择器是:first，用于匹配元素集合中的第一个元素。$("div:first")会选择页面中所有div元素中的第一个div，还可通过first()方法实现相同功能，如$("div").first()，两者的区别在于:first是选择器，可直接在CSS选择器中使用，而first()`是方法，需调用，这两种方式均能高效获取目标元素集合的首个元素，适用于需要操作首个DOM元素的常见场景。

jQuery中选取第一个元素的过滤选择器详解

在jQuery的世界里,选择器就像是开发者的"魔法棒"，能够精准地定位页面上的元素，过滤选择器作为选择器家族中的重要成员，通过特定的条件筛选，帮助我们快速获取具有特定特征的元素，选取第一个元素的过滤选择器first是日常开发中最基础且最常用的功能之一，本文将深入探讨first选择器的原理、用法、注意事项，并通过丰富的实例助你掌握这一实用技巧。

什么是过滤选择器？

过滤选择器是jQuery选择器体系中的一个重要分支,它基于元素的特定属性（如位置、状态、层级关系等）从已匹配的元素集合中进一步筛选出符合条件的元素，与基本选择器（如元素选择器$("div")、类选择器$(".class")等）直接定位元素不同，过滤选择器是在基本选择器的基础上进行"二次筛选"，语法形式通常为"selector:filter"，其中filter代表过滤条件。

过滤选择器的强大之处在于它能够：

从大量元素中快速定位目标
支持复杂的条件组合
提供链式调用的便利性

选取第一个元素的过滤选择器：`first`

在jQuery中,first选择器专门用于从匹配的元素集合中选取第一个元素，无论这个元素位于DOM树的哪个层级，只要它在当前匹配结果中位于第一个位置，就会被选中，这种基于位置的筛选方式在处理列表、表格、导航栏等结构化内容时特别有用。

语法格式

$("selector:first")

参数说明：

selector：基本选择器，可以是元素名（如"li"）、类名（如".item"）、ID（如"#main"）等，用于初步定位元素
first：过滤条件，表示从初步匹配的元素集合中选取第一个元素

示例演示

假设我们有以下HTML结构：

<ul class="product-list">
  <li>产品A</li>
  <li>产品B</li>
  <li>产品C</li>
</ul>
<div class="container">
  <p>欢迎来到我们的网站</p>
  <p>这里有最新的产品信息</p>
</div>
<ol>
  <li>第一步：注册账号</li>
  <li>第二步：完善资料</li>
  <li>第三步：开始使用</li>
</ol>

基本用法示例

选取第一个<li>元素：

$("li:first").css("color", "red"); // 将"产品A"的文字设为红色

选取第一个<p>元素：

$("p:first").text("欢迎页面"); // 将"欢迎来到我们的网站"替换为"欢迎页面"

选取第一个<ol>元素：

$("ol:first").addClass("ordered-list"); // 给第一个有序列表添加类名

核心特点

位置优先原则： first选择器只关心元素在当前匹配集合中的位置，与元素在DOM树中的层级无关。
```
// 选取所有ul中的第一个ul，而非所有ul中的第一个li
$("ul:first").css("border", "1px solid red");
```
返回jQuery对象：即使只匹配到一个元素，first返回的仍然是jQuery对象（包含单个元素的集合），因此可以直接调用jQuery的方法：
```
$("div:first").fadeOut(1000); // 第一个div淡出效果
```
空集合处理：如果没有匹配到任何元素，first返回的是空的jQuery对象，不会报错，后续方法调用也不会生效：
```
// 如果没有id为"nonexistent"的元素，这行代码不会报错
$("#nonexistent:first").hide();
```

链式调用支持：可以与其他选择器和方法链式使用：

$(".container p:first").addClass("highlight").css("font-weight", "bold");

`first`与`first-child`的区别

在实际开发中,first选择器经常与first-child选择器混淆，但两者的作用机制完全不同：

选择器	作用范围	匹配结果数量
`first`	从所有匹配的元素中选取第一个	最多匹配1个元素
`first-child`	选取每个父元素的第一个子元素（且该子元素符合基本选择器）	可能匹配多个元素

示例对比

假设有以下HTML结构：

<div class="section">
  <p>这是div的第一个子元素p</p>
  <span>这是div的第二个子元素</span>
</div>
<div class="section">
  <p>这是另一个div的第一个子元素p</p>
  <ul>
    <li>列表项1</li>
  </ul>
</div>

$("p:first")：

$("p:first").css("color", "red"); // 只选第一个p："这是div的第一个子元素p"

$("p:first-child")：

$("p:first-child").css("color", "blue"); // 选两个p：两个div中的第一个p

更复杂的对比示例

<article>
  <h2>文章标题</h2>
  <p>文章内容1</p>
  <p>文章内容2</p>
</article>
<section>
  <h2>章节标题</h2>
  <p>章节内容1</p>
  <p>章节内容2</p>
</section>

// :first 只选第一个p
$("p:first").css("font-size", "18px"); // 只有"文章内容1"字体变大
// :first-child 选每个父元素的第一个p（可能多个）
$("p:first-child").css("font-weight", "bold"); // "文章内容1"和"章节内容1"都加粗

实际应用场景

导航栏高亮首页链接

<nav class="main-nav">
  <a href="/" class="nav-link">首页</a>
  <a href="/products" class="nav-link">产品</a>
  <a href="/about" class="nav-link">关于我们</a>
  <a href="/contact" class="nav-link">联系我们</a>
</nav>

// 高亮首页链接
$(".nav-link:first").addClass("active");

表格首行特殊样式

<table class="data-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>产品经理</td>
    </tr>
  </tbody>
</table>

// 为表格第一行添加特殊样式
$("tbody tr:first").css({
  "background-color": "#f5f5f5",
  "font-weight": "bold"
});

轮

标签： #元素选择 #过滤选择