首页
/ 正文

jQuery 选择器（建议收藏）

更新时间: 2025-04-07 22:30:43

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习，欢迎点击围观

前言

在现代 Web 开发中，jQuery 选择器如同一把精准的钥匙，能够快速定位页面中的 HTML 元素。无论是初学者构建简单的交互效果，还是中级开发者处理复杂的数据操作，掌握这一工具都能显著提升开发效率。本文将从基础到进阶，系统解析 jQuery 选择器的核心原理与实际应用，通过生动的比喻和代码示例，帮助读者轻松掌握这一技能。

一、选择器的基石：基本语法与核心概念

1.1 选择器的定义与作用

jQuery 选择器是通过 CSS 语法或自定义规则，从页面中筛选出特定 HTML 元素的工具。它的作用类似于“导航系统”，开发者通过它快速找到目标元素，进而实现动态操作（如修改样式、绑定事件或更新内容）。

核心概念：
| 术语 | 解释 |
|---------------|--------------------------------------------------------------------|
| 选择器 | 定位 HTML 元素的规则或模式，例如 $("#myId") 或 $("div")。 |
| 上下文 | 限定选择器搜索的范围，默认为整个文档。 |
| 匹配元素 | 符合选择器规则的 HTML 元素集合，以 jQuery 对象形式返回。 |

1.2 基础语法结构

使用 $() 函数包裹选择器规则，即可获取元素。例如：

// 选择 ID 为 "header" 的元素  
const header = $("#header");  

// 选择所有 <button> 元素  
const buttons = $("button");

比喻：
想象页面中的元素是图书馆的书籍，选择器就是书架上的分类标签。通过标签（如“小说”或“ID:1001”），读者能快速找到目标书籍，而无需翻遍所有书架。

二、基础选择器：快速定位元素的入门技巧

2.1 ID 选择器 `#id`

通过元素的 id 属性定位唯一元素。例如：

<div id="main-content">...</div>

$("#main-content").css("background", "yellow");

特点：

每个页面中 id 必须唯一。
性能最优，因为浏览器会直接调用原生的 document.getElementById。

2.2 类选择器 `.class`

通过元素的 class 属性匹配多个元素。例如：

<button class="btn btn-primary">提交</button>  
<button class="btn btn-danger">取消</button>

$(".btn").click(function() {  
  alert("按钮被点击了！");  
});

比喻：
类选择器如同“标签系统”，多个书籍可以贴上相同的标签（如“编程”），方便批量操作。

2.3 元素选择器 `element`

根据 HTML 标签名选择元素。例如：

// 选择所有 <p> 元素  
$("p").hide();

2.4 通配符选择器 `*`

匹配页面中所有元素。例如：

// 将所有元素的边框设为红色  
$("*").css("border", "1px solid red");

注意：
通配符性能较低，仅在必要时使用。

三、层级选择器：精准控制元素关系

3.1 后代选择器 `ancestor descendant`

选择某个元素的所有后代元素。例如：

<div class="container">  
  <p>第一段</p>  
  <div class="sub-container">  
    <p>第二段</p>  
  </div>  
</div>

// 选择 .container 下的所有 <p> 元素  
$(".container p").text("内容被修改");

3.2 子选择器 `parent > child`

仅选择直接子元素。例如：

// 仅选择 .container 的直接子 <p> 元素  
$(".container > p").css("color", "blue");

3.3 相邻兄弟选择器 `prev + next`

选择紧邻前一个元素的下一个元素。例如：

<h2>标题</h2>  
<p>段落1</p>  
<p>段落2</p>

// 选择标题后的第一个 <p> 元素  
$("h2 + p").css("font-weight", "bold");

3.4 通用兄弟选择器 `prev ~ siblings`

选择前一个元素之后的所有兄弟元素。例如：

// 选择标题之后的所有 <p> 元素  
$("h2 ~ p").css("margin-left", "20px");

比喻：
层级选择器如同家庭关系图谱：

后代选择器是“家族所有成员”；
子选择器是“直接子女”；
兄弟选择器是“同一父母下的兄弟姐妹”。

四、过滤选择器：按条件筛选元素

4.1 基础过滤选择器

4.1.1 `:first` 和 `:last`

选择第一个或最后一个匹配的元素：

// 选择第一个 <div>  
$("div:first").addClass("highlight");  

// 选择最后一个 <li>  
$("li:last").css("color", "red");

4.1.2 `:even` 和 `:odd`

按索引奇偶性筛选元素：

// 为偶数索引的 <tr> 添加背景色  
$("tr:even").css("background", "#f0f0f0");

4.1.3 `:eq(index)` 和 `:gt(index)`

按索引精确或范围筛选：

// 选择索引为 2 的元素（从 0 开始）  
$("div:eq(2)").show();  

// 选择索引大于 3 的元素  
$("li:gt(3)").hide();

4.2 内容过滤选择器

4.2.1 `:contains(text)`

匹配包含特定文本的元素：

// 选择包含“JavaScript”的 <a> 元素  
$("a:contains('JavaScript')").css("color", "green");

4.2.2 `:empty`

选择无子元素或文本的元素：

// 隐藏空的 <div>  
$("div:empty").hide();

4.3 可见性过滤选择器

4.3.1 `:visible` 和 `:hidden`

根据元素是否可见筛选：

// 显示所有隐藏的表单元素  
$("input:hidden").show();

4.4 表单相关选择器

4.4.1 `:input`

匹配所有表单控件（如 <input>, <select>, <textarea>）：

// 为所有输入框添加边框  
$("input").css("border", "1px solid #ccc");

4.4.2 `:checked`

选择被选中的复选框或单选按钮：

// 获取选中的复选框值  
var selected = $("input:checked").val();

五、动态选择与优化技巧

5.1 上下文选择器

通过指定上下文（DOM 节点或 jQuery 对象），缩小搜索范围：

// 在 #content 范围内选择 <span> 元素  
const spans = $("span", "#content");

5.2 组合选择器

使用逗号分隔多个选择器，合并结果：

// 选择所有 <a> 和 <button> 元素  
$("a, button").on("click", function() { ... });

5.3 性能优化建议

避免复杂嵌套：如 $("div .content p") 比 $(".content p") 更耗时。
缓存选择结果：重复使用的元素应存储在变量中，避免多次查询。
优先使用原生 API：如通过 document.querySelectorAll 处理复杂选择。

六、实战案例：构建动态表单验证

6.1 需求分析

设计一个包含用户名、邮箱和密码的表单，要求：

输入时实时验证格式。
提交时显示错误提示。

6.2 代码实现

<form id="myForm">  
  <input type="text" name="username" placeholder="用户名">  
  <input type="email" name="email" placeholder="邮箱">  
  <input type="password" name="password" placeholder="密码">  
  <button type="submit">提交</button>  
</form>

// 实时验证输入  
$("#myForm input").on("input", function() {  
  const $this = $(this);  
  const value = $this.val();  

  if ($this.is("[name='username']") && value.length < 3) {  
    $this.addClass("error");  
  } else {  
    $this.removeClass("error");  
  }  
});  

// 表单提交验证  
$("#myForm").on("submit", function(e) {  
  e.preventDefault();  

  // 验证邮箱格式  
  const $email = $("input[name='email']");  
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  
  if (!emailRegex.test($email.val())) {  
    $email.addClass("error");  
    return;  
  }  

  // 验证密码长度  
  const $password = $(":password");  
  if ($password.val().length < 6) {  
    $password.addClass("error");  
    return;  
  }  

  // 提交成功  
  alert("验证通过！");  
  $(this).find("input").val("");  
});

6.3 效果说明

通过 $("input[name='username']") 等选择器精准定位表单字段。
使用 :password 简化密码输入框的选择。
通过事件绑定实现动态交互，提升用户体验。

结论

jQuery 选择器是前端开发中不可或缺的工具，它简化了 DOM 操作的复杂度，让开发者能够高效地与页面元素交互。从基础的 ID、类选择器，到进阶的层级和过滤规则，掌握这些技巧能显著提升编码效率。

对于初学者，建议从简单选择器起步，逐步尝试组合和动态选择；中级开发者则可深入研究性能优化和高级过滤逻辑。通过本文提供的案例和代码示例，读者能够快速将理论转化为实践，最终在实际项目中灵活运用 jQuery 选择器的强大功能。

记住，选择器的精髓在于“精准匹配”，如同在茫茫数据中找到唯一的钥匙——每一次选择都应有明确的目标与逻辑。保持练习，你将逐渐成为 DOM 操作的“导航专家”！

jQuery 选择器（建议收藏）

前言

一、选择器的基石：基本语法与核心概念

1.1 选择器的定义与作用

1.2 基础语法结构

二、基础选择器：快速定位元素的入门技巧

2.1 ID 选择器 #id

2.2 类选择器 .class

2.3 元素选择器 element

2.4 通配符选择器 *

三、层级选择器：精准控制元素关系

3.1 后代选择器 ancestor descendant

3.2 子选择器 parent > child

3.3 相邻兄弟选择器 prev + next

3.4 通用兄弟选择器 prev ~ siblings

四、过滤选择器：按条件筛选元素

4.1 基础过滤选择器

4.1.1 :first 和 :last

4.1.2 :even 和 :odd

4.1.3 :eq(index) 和 :gt(index)

4.2 内容过滤选择器

4.2.1 :contains(text)

4.2.2 :empty

4.3 可见性过滤选择器

4.3.1 :visible 和 :hidden

4.4 表单相关选择器

4.4.1 :input

4.4.2 :checked

五、动态选择与优化技巧

5.1 上下文选择器

5.2 组合选择器

5.3 性能优化建议

六、实战案例：构建动态表单验证

6.1 需求分析

6.2 代码实现

6.3 效果说明

结论

最新发布

HTML DOM Style marginRight 属性（超详细）

HTML DOM Style marginTop 属性（超详细）

HTML DOM Style padding 属性（长文讲解）

HTML DOM Style paddingBottom 属性（一文讲透）

HTML DOM Style paddingLeft 属性（长文讲解）

HTML DOM Style paddingRight 属性（长文讲解）

HTML DOM Style bottom 属性（保姆级教程）

HTML DOM Style clear 属性（超详细）

HTML DOM Style clip 属性（建议收藏）

HTML DOM Style cssFloat 属性（长文讲解）