$$的使用，与由来

今天同事给了一段神奇的代码，如下

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

大家可以猜猜是干啥的。

3

2

1

答案揭晓：

页面中所有的元素都被加上了外框，颜色是随机的，可以清晰的看到所有的布局情况～
这个代码等同于

$$("*").forEach(function(a){
	a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

解释一下：

1. $$("*")，获取页面上所有的元素
2. 1<<24，rgb单个颜色通道取值范围为0-255，也就是256个，2的8次方，3个通道组合起来就是2的24次方
3. ~~，表示向下取整
4. toString(16)，是将数字转化为16进制

比较高级的在于$$("*")选择器，之前没有遇到过。下面是我查阅到的资料，对于$$有个简单的介绍。

在很多浏览器的设计工具中有大量的预定义API ，大部分是从Firebug中借鉴的，因为Firebug的设计（大部分）是正确的。

当Firebug在2006年被创立的时侯。当时的JavaScript库Prototype.js使用$来表示getElementById()。这个语法糖很方便地抓取到了用户想要的元素。它节省了大量的时间，之后整个框架都使用采用了$语法糖。

在2006年初，jQuery发布了，然后使用基于CSS选择器的$()语法来选择任意元素。在之后的几天，Prototype也发布了自己的CSS选择器引擎，但是$已经在他们的库中被占用了。所以它们换成了$$()。称之为bling-bling 函数。

所以Firebug采用了Prototype的API，因为它在2006年仍然非常流行。在后jQuery的日子里， 它等价于window.$$ = document.querySelectorAll.bind(document) 。有趣的是在Opera的开发工具中，它们也采用$$作为querySelectorAll的别名。

目前主流浏览器都可以支持该写法，另外通过$$("")获取到的直接就是个数组，可以正常使用数组的所有方法；而通过document.querySelectAll("*")获取到的是个NodeList，伪数组，只能通过for循环的下标值取出对应的node。

参考文档为：http://ourjs.com/detail/54ab768a5695544119000007