$ 与 $$(*) 是什么？

系统管理员 2023-02-15 15:57 14阅读 0赞

## 前言 ##

今天在阅读一篇文章：[小伙伴遇到这个问题说不想干前端了——一次Chrome翻译造成的玄学bug][Chrome_bug]。主要内容是说翻译插件引发页面的react报错。

文章中用`$$('*')` 去获取报错页面所有的dom标签和正常无报错页面的dom标签，再进行对比来定位问题。  
具体代码如下：

$$('*').reduce((acc, {  tagName }) => `${ acc}${ tagName},`, '')

这篇文章看到了一个`$$('*')`的写法。我感到好奇，这个到底是什么？

## 可能性 1 ##

通常来说这个`$`符号是`jQuery` 的别名写法。`$$('*')`难道是符号是`jQuery`某种高级写法吗？或者是设定了`jQuery`的使用是 `$$`

很多javascript库使用`$`作为一个函数或者变量名.如果你要使用这些j`avascript`库又要使用`jQuery` 那么可以使用`jQuery`的`noConflict()`来来修改`jQuery`的别名。

> **noConflict()** 方法让渡变量 $ 的 jQuery 控制权。  
> 该方法释放 jQuery 对 $ 变量的控制。  
> 该方法也可用于为 jQuery 变量规定新的自定义名称。

比如：

var $$ =$.noConflict();

在控制台试试`$$('*')`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70]  
但是它返回的是`jQuery object`. 并不是数组。执行这条语句是会报错的

var $$ =$.noConflict();
    $$('*').reduce((acc, {  tagName }) => `${ acc}${ tagName},`, '')

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70 1]

## 正解 ##

在网上看到一篇问答：\[What is the difference between $ and KaTeX parse error: Can't use function '$' in math mode at position 114: …入\`jQuery\`的情况下，\`$̲\` 和 \``可以在`Google Chrome`,`Firefox`和`Safari\`浏览器中使用。

1.  `$` 是`document.queryselect` 的简写。返回传入选择的第一个元素  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70 2]
2.  `$$`是`document.queryselectAll` 的简写。返回传入选择所有元素  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70 3]

我们再来执行一下这条代码：

$$('*').reduce((acc, {  tagName }) => `${ acc}${ tagName},`, '')

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70 4]  
正确地获取了页面所有元素的标签名

## 参考 ##

[What is the difference between $ and $$?][What is the difference between _ and]  
[小伙伴遇到这个问题说不想干前端了——一次Chrome翻译造成的玄学bug][Chrome_bug]

[Chrome_bug]: https://juejin.im/post/5ed9a65ce51d457858776331
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200606145611883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200606145634958.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200606145716666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200606145732954.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200606145751973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmdOZXh0,size_16,color_FFFFFF,t_70
[What is the difference between _ and]: https://stackoverflow.com/questions/13933157/what-is-the-difference-between-and