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