jQuery选择器是其核心功能，用于快速定位DOM元素，语法类似CSS，简洁高效，主要分为基本选择器（如元素标签$("div")、ID$("#id")、类$(".class")）、层次选择器（如后代$("parent child")、相邻$("prev+next")）、过滤选择器（如:first取首个、:even取偶数索引）及表单选择器（如:input、:text），它简化了DOM操作，支持链式调用，比原生JavaScript更易用，是jQuery高效处理页面的基础。
jQuery选择器入门：轻松搞定元素定位
提到jQuery,许多前端开发者首先想到的便是它强大的选择器功能，作为JavaScript库中的经典之作，jQuery之所以能在前端领域占据重要地位，很大程度上归功于其简洁高效的选择器机制——它将原本繁琐的DOM元素定位转化为类似"写CSS"般的直观体验，让开发者无需关心浏览器兼容性即可精准操作页面元素，我们就来系统梳理jQuery中常用的选择器，帮你快速掌握这一核心技能。
什么是jQuery选择器？
在JavaScript中,操作页面元素的前提是"定位元素"，原生JavaScript提供了document.getElementById()、document.getElementsByTagName()等方法，但这类方法存在明显痛点：语法冗长、功能单一，且需额外处理跨浏览器兼容性问题（如IE8不支持getElementsByClassName()）。
jQuery选择器本质上是一套"快速定位元素"的语法糖，它借鉴了CSS选择器的语法规则，通过简洁的表达式精准匹配页面元素，并返回一个jQuery对象（可理解为"元素的包装集"），这个对象类似数组，包含匹配元素的集合，同时提供了丰富的方法（如css()、click()、hide()等），让我们能链式调用完成样式修改、事件绑定等操作。
常用的jQuery选择器分类
jQuery选择器种类丰富,按功能可分为基本选择器、层次选择器、过滤选择器、表单选择器四大类，下面我们逐一解析最常用的类型，并结合实例说明其应用场景。
基本选择器：构建选择器体系的基石
基本选择器是jQuery选择器的"敲门砖"，也是日常开发中使用频率最高的类型，主要包括以下5种：
ID选择器
- 语法：
$("#id") - 功能：通过元素的
id属性定位目标元素。 - 示例：
$("#header")会选择页面中id="header"的元素（注意：id具有唯一性，故返回的jQuery对象仅包含1个元素）。 - 场景：适用于定位页面中的唯一组件，如导航栏、页脚等。
类选择器
- 语法：
$(".class") - 功能：匹配所有
class属性包含指定类名的元素。 - 示例：
$(".active")会选择所有class中包含active的元素（可能返回多个元素）。 - 场景：适用于批量操作具有相同样式的元素，如标签页、轮播图指示器等。
元素选择器
- 语法：
$("element") - 功能：通过HTML标签名匹配所有同类元素。
- 示例：
$("p")会选择页面中所有的<p>标签。 - 场景：适用于批量操作某一类标签，如重置所有段落的字体大小。
通配符选择器
- 语法：
- 功能：匹配页面中的所有元素。
- 示例：会选择
<html>、<body>、<div>等所有元素。 - 注意：实际开发中较少单独使用（性能开销大），但常与其他选择器组合，如
$("div *")选择<div>下的所有后代元素。
分组选择器
- 语法：
$("selector1, selector2, ...") - 功能：同时匹配多个选择器指定的元素，相当于逻辑"或"。
- 示例：
$("h1, p, .intro")会选择所有<h1>标签、<p>标签以及class="intro"的元素。 - 场景：适用于同时对不同类型的元素执行相同操作，如统一设置标题和段落的间距。
层次选择器：精准定位元素的"亲属关系"
页面中的元素通常通过嵌套或并列形成层次结构,层次选择器帮我们精准定位元素的祖先、后代、兄弟等关系，实现更精细的元素控制。
后代选择器
- 语法：
$("ancestor descendant") - 功能：选择指定祖先元素下的所有后代元素（包括子元素、孙元素等，不限层级）。
- 示例：
$("div p")会选择所有<div>元素内的<p>标签，无论<p>是<div>的直接子元素还是深层嵌套。 - 场景：适用于操作容器内的特定类型元素，如文章列表中的摘要段落。
子元素选择器
- 语法：
$("parent > child") - 功能：仅选择指定父元素的直接子元素（不包含孙元素及更深层元素）。
- 示例：
$("ul > li")会选择所有<ul>的直接子<li>，不会选中<ul>内嵌套的<ul>中的<li>
