TRAE-AI编程
你用原生 JS 写 document.getElementById 写了一堆，看到别人一行 $() 就选中元素，是不是想知道到底怎么用？jQuery 选择器，本质是把 CSS 选择器的写法直接搬进 $() 里，用更短的代码选中页面元素。本文讲清 5 种最常用写法、各自的适用场景，以及两个新人易踩的坑。看完你能用对选择器，不再满屏 getElementById。今天这篇文章，编程狮就把这块讲透。从点名规则到链式调用，再到事件委托，读完你就能用最短的代码选中任意页面元素。
一、先看结论
| 想选什么 | 写法 | 适用场景 |
|---|---|---|
| 按 id 选唯一元素 | $('#box') |
页面里唯一标识的元素 |
| 按 class 选一批 | $('.item') |
同类样式/批量操作 |
| 按标签选 | $('li') |
某类标签全部 |
| 按属性选 | $('[data-id]') |
带特定属性的元素 |
| 按层级/状态选 | $('ul li:first') |
嵌套或过滤 |
二、选择器到底是什么
jQuery 常用选择器 的思路很简单：你平时写 CSS 时用 #id、.class、标签名 来定样式，jQuery 把这些语法原样塞进 $('这里')，它就会返回匹配的元素集合（jQuery 对象）。底层其实是浏览器原生 querySelectorAll，但 jQuery 帮你在旧浏览器上做了兼容，还把集合包装成能链式调用的对象。
一个比喻：CSS 选择器像“点名规则”，#box 是“叫 box 的那一个”，.item 是“所有叫 item 的”。jQuery 只是把这套点名规则拿来“操作”而不是“美化”那些元素。建议先过一遍 jQuery 教程 的入门章节。
三、写法一与二：id 与 class 选择器
<!-- 演示结构：一个 id 元素，多个 class 元素 -->
<div id="box">我是盒子</div>
<p class="item">项目一</p>
<p class="item">项目二</p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 写法一：jQuery id 选择器，选中唯一元素
$('#box').css('color', 'red');
// 写法二：class 选择器，一次性选中所有 .item
$('.item').css('font-size', '18px');
</script>
上面这段做了什么：$('#box') 用 id 精准命中那个 div 并改红字；$('.item') 命中两个 <p>，一次性把字号改大。id 在页面应唯一，class 可以重复，这是两者最大的使用区别。
四、写法三到五：标签、属性与层级
<ul>
<li data-id="1">A</li>
<li data-id="2">B</li>
<li>C</li>
</ul>
<script>
// 写法三：标签选择器，选中所有 li
$('li').css('list-style', 'none');
// 写法四：属性选择器，选中带 data-id 的 li
$('[data-id]').addClass('has-id');
// 写法五：层级 + 状态过滤，选中 ul 下第一个 li
$('ul li:first').css('font-weight', 'bold');
</script>
上面这段做了什么：标签选择器 li 命中全部三项；前端高薪课 [data-id] 只命中前两个带属性的；:first 过滤出第一个。jQuery 还支持 :last、:even、:checked 等大量过滤伪类，能少写很多循环判断。
五、两个最容易踩的坑
| 现象 | 原因 | 修复 |
|---|---|---|
$ 报错 is not defined |
在引入 jQuery 之前就执行了脚本 | 把业务脚本放在 jQuery 引入之后，或用 $(function(){...}) 等 DOM 就绪 |
| 选中为空、样式没生效 | 脚本在元素渲染前就跑，元素还不存在 | 用 $(document).ready() 包裹，确保 DOM 已就绪 |
第一个坑：jQuery 没加载完就用 $，自然未定义。务必保证 <script src="jquery..."> 在前，你的代码在后。第二个坑：把脚本写在 <head> 里而元素在 <body> 后面，运行时元素还没生成，选择器返回空集合。用 $(function(){ ... })（等同于 ready）等 DOM 构建完成再操作，就能稳定命中。
jQuery 选择器本质上是“用一句话告诉引擎：我要哪些元素”，它把原生 DOM 查询封装得很顺手。常见类别要分清：#id 通过 id 选（最快，因为浏览器有 getElementById 原生支持）、.class 按类名选、tag 按标签选、[attr=value] 按属性选、parent > child 或 ancestor descendant 按层级选，还有 :first、:eq(n) 这类伪类。写的时候有个重要认知：$() 返回的永远是“集合”，哪怕只匹配到一个元素，所以链式调用 $("li").first().addClass("x") 是常态，别把它当成单个元素去用。
性能上记住一条经验：id 选择器最快，通配符 * 最慢、尽量少用；不要在已经很小的容器里再做超长层级嵌套（比如 body div ul li a.xxx），层级越深引擎要过滤的候选越多。更现代的做法是借助 $(context) 或 $(parent).find(selector) 把搜索范围缩小到某个子树内，速度会明显提升。另外，事件委托是选择器的高阶用法：与其给 100 个列表项分别绑定点击，不如在父元素上监听、再用 e.target 或 $(this).closest("li") 反查，既省内存又兼容动态新增的元素。
到了今天，原生 document.querySelector 和 querySelectorAll 已经能做大部分 jQuery 选择器能做的工作，新项目里很多人直接用原生 API 或框架的 ref 来替代 jQuery。但 jQuery 选择器仍有价值：它的浏览器兼容性兜底极强，老项目维护和“渐进增强”场景里依然省心；而且它的链式写法和 :eq、:contains 这类扩展伪类，写起来比原生更短。选型建议很朴素——新项目能不用 jQuery 就别引它，老项目继续用完全没问题，重点是别用错选择器类型，也别把简单的事写复杂。
再多说一个高频场景：事件委托。与其给列表里每个 <li> 单独绑点击，不如在父元素 ul 上监听、再用 e.target 反查，新增项也能自动生效，既省内存又兼容动态内容。其中 jQuery id 选择器（$('#id')）因为底层直接走原生 getElementById，是所有选择器里最快的一种，适合选页面里唯一的元素；而 class 选择器适合批量操作。性能上记住：id 最快、通配符 * 最慢；层级越深，引擎要过滤的候选越多，所以别写 body div ul li a.xxx 这种超长链。另外，老项目里常见 $('.class').each(...) 逐个处理，但能用选择器一次选中的就别写循环。把“选对类型、id 优先、事件委托”记牢，jQuery 选择器就算真正用明白了。
动手配置好页面后，把选择器示例复制到本地运行，检查选中结果是否符合预期；若返回空集合，按“DOM 未就绪”的方向排查失败原因并修复。适用场景、性能差异与边界写法下面根据官方文档整理，未在本机逐浏览器执行。
总结
要点带走：
- jQuery 选择器直接复用 CSS 选择器 语法，写进
$()即可选中元素； - id 选唯一、class 选一批、标签选全部、属性选带标识的、层级过滤做精细命中；
- 脚本要在 jQuery 引入之后、且 DOM 就绪之后 再执行，否则
$未定义或选中为空。
下一步建议系统过一遍 jQuery 教程，把事件和动画一起练。
延伸学习
想把这块知识系统补齐，可以按这个顺序来：
- JqueryUI 教程
- 转行 IT
- jQuery 入门实战
常见问题
Q：jQuery 选择器和 CSS 选择器一样吗？
A：语法基本一样，id、class、标签、属性、层级过滤都能直接用。区别是 CSS 用它来加样式，jQuery 用它来“选中并操作”元素，并且多了一堆 :first、:checked 这类便于编程的过滤伪类。
Q：为什么我用 $ 提示未定义？
A：基本都是脚本在 jQuery 库加载之前就运行了。把你的业务 <script> 放到引入 jQuery 的 <script> 之后，或者用 $(function(){}) 等页面就绪后再执行。
Q：邪修 jQuery能选多个吗？
A：HTML 规范里 id 应当唯一，所以 $('#x') 只取第一个匹配。如果要批量操作，请改用 class 选择器 $('.x')。强行用重复 id 既不规范也会让选择器行为不可预期。
