$和$$是Chrome控制台原生DOM选择器，$等价于document.querySelector()返回首个匹配元素，$$等价于document.querySelectorAll()返回所有匹配元素的NodeList。
控制台里的 $ 和 $$ 是浏览器原生提供的 DOM 快速选择工具，不是 jQuery 的专属语法。它们本质是 document.querySelector() 和 document.querySelectorAll() 的快捷封装，专为调试场景设计，用起来轻便直接。
$(selector)：只拿第一个匹配元素
它返回文档中**首个**符合 CSS 选择器的 DOM 元素，类型是原生 Element 对象，不是 jQuery 对象。这意味着你不能直接链式调用 .click() 或 .text() 这类 jQuery 方法。
-
$('#header')→ 获取 id 为 header 的元素（等价于document.querySelector('#header')） -
$('.item')→ 获取 class 包含 item 的**第一个**元素，即使页面有 10 个也不会全返回 -
$('button[data-action="save"]')→ 支持属性选择器，返回第一个匹配按钮
$$ (selector)：拿回所有匹配元素的数组
它返回一个静态 NodeList（可当数组用），包含所有匹配项，适合批量操作或遍历。
-
$$('li')→ 返回全部 li 元素组成的列表，长度可查：$$('li').length -
$$('.card')→ 获取所有 class 为 card 的元素，支持后续.forEach()或索引访问：$$('.card')[0] - 注意：它不支持 jQuery 风格的方法，但能直接调用原生方法，比如
$$('input').forEach(el => el.focus())
别把 $ 当成 jQuery —— 先确认来源再使用
如果当前页面引入了 jQuery，控制台的 $ 很可能已被覆盖。输入 $ 回车，看返回内容：
- 显示
ƒ $(selector, [startNode]) { [CommandLineAPI] }→ 是浏览器原生的 - 显示类似
ƒ (e,t){return new jQuery.fn.init(...)→ 是 jQuery 提供的，行为和返回值完全不同 - 不确定时，可用
document.querySelector()和document.querySelectorAll()替代，最稳妥
还有个实用兄弟：$x(xpath)
当 CSS 选择器不好写（比如要找父级、文本包含某字、跨层级定位），可以用 XPath：
-
$x('//div[@class="main"]//p[1]')→ 找 main 类 div 下第一个 p -
$x('//*[contains(text(), "提交成功")]')→ 找文本含“提交成功”的任意元素 - 返回 NodeList，和
$$类似，支持索引与遍历
