在前端开发中，使用Chrome浏览器的开发者工具是必不可少的。其中一个非常有用的功能是通过控制台使用 $() 或 document.querySelector() 来查询HTML元素。
实际上，在Chrome浏览器中还有一种更加便捷的方式来选择HTML元素，那就是使用 $ 符号。
$符号的定义
在Chrome浏览器中，$ 符号被定义为全局变量，它是一个函数，可以接收一个CSS选择器作为参数，并返回匹配该选择器的第一个元素。如果没有找到匹配的元素，则返回 undefined。
以下是$符号的基本语法：
$(selector)
其中，selector 是一个有效的 CSS 选择器字符串。
例如，要选择页面上的一个 ID 为 myElement 的元素，可以使用以下代码：
var el = $('#myElement');高级用法
查询多个元素
如果需要选择匹配所有给定选择器的元素，则可以使用 $$() 函数。该函数与 $() 函数类似，但返回一个元素数组。以下是示例代码：
var elements = $$('div.myClass');查询子元素
如果需要选择某个元素的子元素，则可以使用 $x() 函数。该函数接收两个参数：父元素和子元素的选择器。以下是示例代码：
var childEl = $x(parentEl, 'div.myClass');
查询属性
如果需要查询元素的某个属性，则可以使用 $0.property 语法。这将返回第一个匹配选择器的元素的属性值。以下是示例代码：
var href = $('#myLink').href;指导意义
$ 符号是一个强大且方便的工具，可以极大地提高开发效率。然而，它并不是标准的JavaScript API，仅仅只是Chrome浏览器中的一个功能。因此在实际开发中，应当尽可能地避免过度依赖于该符号。
除了 $ 符号之外，还有很多其他的选择器函数和API可供使用，例如 document.querySelector() ，document.querySelectorAll() 等等。开发者应该根据需求选择适合自己的工具。
示例代码
HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ------- ------ ----- ----------------------- ------- ----- ----------------------- ------- ----- ----------------------- ------- --- ------------------------------ -------------------- -------- ----------------------- ----- -- - -------------- ------------------ ----- -------- - ------------------ ------------------------ ----- ------- - ----------------- --------------- ----------------------- ----- ---- - ------------------ -------------------- ---------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14193