异常教程

jquery selector（建议收藏）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，jQuery selector 是连接 JavaScript 与 HTML 元素的桥梁，它通过简洁的语法帮助开发者快速定位和操作页面中的 DOM 元素。无论是初学者还是中级开发者，掌握 jQuery 选择器的核心逻辑，都能显著提升开发效率。本文将从基础概念讲起，逐步深入讲解不同类型的 jQuery 选择器，并通过案例演示其应用场景，帮助读者建立系统化的理解框架。

什么是 jQuery Selector？

jQuery selector 是一种基于 CSS 语法的查询机制，用于在 HTML 文档中筛选出符合条件的元素。它的设计灵感来源于 CSS 选择器，但功能更强大，支持动态查询和逻辑组合。可以将其想象为“网页元素的过滤器”：开发者通过编写特定的规则（如元素 ID、类名、属性值等），让 jQuery 返回匹配的元素集合，从而执行后续操作（如修改样式、绑定事件或更新内容）。

核心特点：

  1. 语法简洁：相比原生 JavaScript 的 document.getElementById 或 document.querySelector，jQuery 的选择器语法更直观。
  2. 灵活组合：支持通过逻辑运算符（如 +、>、~）和伪选择器（如 :first、:even）构建复杂查询。
  3. 兼容性好：自动处理不同浏览器的差异，开发者无需额外适配。

基础选择器：快速入门

1. 标签选择器

通过 HTML 标签名直接匹配元素，例如：

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

比喻：标签选择器就像“通缉令”，只要元素的“身份”（标签名）符合条件，就会被选中。

2. ID 选择器

通过元素的 id 属性定位唯一元素，语法为 #id_name：

$("#header"); // 选择 id 为 "header" 的元素

注意：ID 在 HTML 中必须唯一，因此该选择器总是返回一个元素（或空集合）。

3. 类选择器

通过元素的 class 属性匹配多个元素，语法为 .class_name：

$(".highlight"); // 选择所有 class 包含 "highlight" 的元素

案例：假设页面中有多个按钮需要统一添加点击事件，只需：

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

4. 通用选择器

* 可匹配页面中所有元素，但实际开发中需谨慎使用：

$("body *"); // 选择 body 下的所有后代元素

层次选择器：构建父子关系的过滤网

层次选择器用于根据元素间的父子、相邻等关系进行筛选，常见类型包括：

1. 后代选择器（空格分隔）

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

$("div p"); // 选择所有位于 <div> 内部的 <p> 元素

比喻：就像“家族族谱”，只要在指定的父辈（div）家族树中，无论隔了多少代（子元素、孙元素），都会被选中。

2. 子元素选择器（> 符号）

仅选择直接子元素：

$("#container > .item"); // 选择 id 为 container 的元素的直接子元素中 class 为 item 的元素

3. 相邻兄弟选择器（+ 符号）

选择紧邻且符合条件的下一个兄弟元素：

$("h2 + p"); // 选择每个 <h2> 元素后面直接跟的 <p> 元素

4. 兄弟选择器（~ 符号）

选择所有后续兄弟元素：

$("h2 ~ div"); // 选择所有位于 <h2> 后面的 <div> 元素

属性选择器：精准定位元素

属性选择器通过元素的属性（如 type、href）进行筛选，语法格式为 [attribute] 或 [attribute=value]：

1. 精确匹配

$("input[type='text']"); // 选择所有 type 属性值为 text 的 input 元素

2. 模糊匹配

支持以下运算符：

  • ^=：以指定值开头
  • $=：以指定值结尾
  • *=：包含指定值

示例：

$("a[href$='.pdf']"); // 选择所有链接地址以 .pdf 结尾的 <a> 元素

3. 多属性组合

使用逗号分隔多个条件，或用逻辑符号连接：

$("input[required][type='email']"); // 同时满足 required 和 type=email 的 input  
$("input[type='radio'], input[type='checkbox']"); // 选择所有单选或复选框

伪类选择器：动态筛选元素

伪类选择器（以 : 开头）可基于元素的状态、位置或内容进行筛选：

1. 基础伪类

  • :first：第一个匹配的元素
  • :last：最后一个匹配的元素
  • :even：偶数索引元素（从 0 开始）
  • :odd：奇数索引元素

案例：为表格的偶数行添加斑马纹：

$("tr:even").css("background-color", "#f0f0f0");

2. 表单相关伪类

  • :checked：选中的复选框或单选按钮
  • :disabled：禁用的表单元素
  • :focus：当前获得焦点的元素

3. 内容过滤伪类

  • :contains(text)：包含指定文本的元素
  • :empty：无子元素或文本的元素

组合选择器：构建复杂查询

通过逻辑运算符（如 +、,、）和嵌套，可以组合多个选择器：

1. 逻辑“或”（逗号分隔）

$(".btn, #submit"); // 选择所有 .btn 类元素和 id 为 submit 的元素

2. 嵌套选择器

$("#menu li:first"); // 选择 id 为 menu 的元素下的第一个 <li>

3. 组合条件

$("input[type='text'][required]"); // 同时满足 type=text 和 required 的输入框

进阶技巧：动态选择与上下文限定

1. 动态选择器

通过变量或计算后的字符串生成选择器：

const dynamicClass = "active";  
$(`.${dynamicClass}`).show(); // 显示所有带有动态类名的元素

2. 上下文限定

指定搜索范围，避免全局遍历：

$("#sidebar").find(".nav-item"); // 仅在 #sidebar 内寻找 .nav-item 元素

常见问题与最佳实践

问题 1：选择器性能优化

过于复杂的嵌套选择器可能导致性能下降。例如：

$("body div ul li a"); // 不推荐，层级过深

优化建议：添加唯一标识符或使用更直接的选择器：

$(".nav-menu li a"); // 更高效，假设 .nav-menu 是父容器的类名

问题 2：避免全局搜索

始终为选择器指定上下文，减少 DOM 遍历范围：

const container = $("#main-container");  
container.find("input[type='text']").val("默认值"); // 仅在 #main-container 内查找

问题 3：动态内容处理

若内容通过 AJAX 动态加载，需使用事件委托：

$(document).on("click", ".dynamic-btn", function() {  
  // 处理动态添加的按钮点击事件  
});

实战案例：实现折叠面板

需求：点击标题展开或折叠内容区域。

HTML 结构：

<div class="accordion">  
  <h3 class="title">标题 1</h3>  
  <div class="content">内容 1</div>  
  <!-- 更多面板 -->  
</div>

jQuery 实现：

$(".title").click(function() {  
  // 选择当前标题的下一个兄弟元素（即对应的 .content）  
  $(this).next(".content").slideToggle();  
});

结论

jQuery selector 是开发者与网页元素交互的核心工具，其语法简洁、功能强大，且学习曲线平缓。通过本文的讲解，读者应能掌握基础到进阶的选择器用法，并能够结合实际场景灵活应用。无论是快速定位元素、构建复杂查询，还是优化代码性能，选择器的合理使用都能显著提升开发效率。建议读者通过实际项目练习，逐步深化对选择器逻辑的理解，并探索更多高级技巧。

本文内容基于 jQuery 3.x 版本，如需了解更多细节，可参考官方文档或相关技术社区资源。

最新发布

查看更多文章