jQuery选择器主要包括基本选择器（如元素、ID、类选择器）、层次选择器（如后代、子选择器）、过滤选择器（如:first、:even）及表单选择器（如:text、:password）等，原生JavaScript的document.getElementById()不属于jQuery选择器，它是DOM操作方法，直接通过ID获取元素，而非jQuery的选择器语法，jQuery选择器均以字符串形式传入，如$("#id")，而document.getElementById()是原生JS方法，功能上虽类似，但属于不同范畴。
jQuery选择器深度剖析：揭秘哪些选择方式“另有归属”？
jQuery作为前端开发史上的里程碑式工具,自2006年John Resib发布以来，便以其“写更少的代码，做更多的事”的理念颠覆了JavaScript开发模式，其核心魅力之一，便是将CSS选择器的优雅语法引入DOM操作，让开发者通过简洁的表达式快速定位元素，极大降低了DOM操作的门槛，许多初学者在学习时，常会对“哪些选择方式真正属于jQuery家族”产生困惑——有些看似“jQuery专属”的语法，实则“另有归属”；而jQuery的选择器体系，也远比表面更丰富，本文将从jQuery选择器的底层逻辑出发，系统梳理其类型边界，并揭示那些“易被误认”的非jQuery选择方式。
jQuery选择器的“家族图谱”：不止于“类CSS”
jQuery选择器的本质,是对原生JavaScript DOM操作方法的封装与抽象，它通过模仿CSS选择器的语法，将复杂的节点遍历逻辑简化为链式调用，同时扩展了更多灵活的过滤功能，其完整体系可分为四大类，每一类都有独特的应用场景：
基本选择器：DOM元素的“精准定位术”
这是jQuery选择器的基石,也是最接近CSS语法的部分，用于通过ID、类名、标签名等直接定位元素：
- ID选择器：
$("#box")—— 通过元素的唯一ID匹配，返回单个jQuery对象（底层调用document.getElementById()）。 - 类选择器：$(".active") —— 通过类名匹配，返回所有包含该类的元素集合（底层调用
document.getElementsByClassName()）。 - 元素选择器：$("div") —— 通过标签名匹配，返回所有指定标签的元素集合（底层调用
document.getElementsByTagName()）。 - 通配符选择器：$("*") —— 匹配文档中所有元素（慎用，性能较差）。
- 分组选择器：$("div, p, .box") —— 将多个选择器合并，返回匹配任一条件的元素集合（底层通过
querySelectorAll实现批量查询）。
层次选择器：DOM树的“导航仪”
当需要基于元素在DOM树中的层级关系（如父子、兄弟、相邻）进行选择时，层次选择器便能大显身手：
- 后代选择器：$("parent child") —— 选择parent元素下所有child元素（包括子元素、孙元素等后代）。
示例：$("ul li")匹配<ul>下所有<li>，无论层级深度。 - 子元素选择器：$("parent > child") —— 仅选择parent的直接子元素（区别于后代选择器，不包括孙元素）。
示例：$("ul > li")仅匹配<ul>的子级<li>，不匹配嵌套在<li>中的<li>。 - 相邻兄弟选择器：$("prev + next") —— 选择prev元素紧邻的下一个兄弟元素（仅一个，且需同层级）。
示例：$("h3 + p")匹配<h3>后面直接跟着的<p>。 - 通用兄弟选择器：$("prev ~ siblings") —— 选择prev元素之后的所有兄弟元素（同层级，不限数量）。
示例：$(".title ~ p")匹配类名为title的元素之后的所有<p>。
过滤选择器：精准筛选的“筛子”
过滤选择器通过特定条件（如索引、内容、可见性等）对已选择的元素集合进行二次筛选，分为“基本过滤”和“内容过滤”两大子类：
- 基本过滤：
$("li:first")—— 匹配第一个<li>（等同于eq(0)）。$("li:last")—— 匹配最后一个<li>。$("li:even")/$("li:odd")—— 匹配偶数/奇数索引的<li>（索引从0开始）。$("li:eq(2)")—— 匹配索引为2的<li>（精确索引）。$("li:gt(1)")—— 匹配索引大于1的<li>（greater than）。$("li:lt(3)")—— 匹配索引小于3的<li>（less than）。hidden—— 匹配所有不可见元素（包括display:none、visibility:hidden、type="hidden"的表单元素等）。visible—— 匹配所有可见元素（与hidden相对）。
过滤**：$("div:contains('jQuery')")—— 匹配包含文本“jQuery”的<div>。$("td:empty")—— 匹配内容为空的<td>（无子元素、无文本）。$("div:parent")—— 匹配有子元素或文本的<div>（与empty相对）。$("input:checked")—— 匹配选中的复选框/单选框。$("option:selected")—— 匹配下拉框中选中的<option>。
表
