Chrome / Firefox中双美元符号select器查询function的来源是什么?

检查这个jsfiddle ,并看看控制台。 $$没有定义。 现在打开一个全新的窗口,并在控制台中input$$ 。 它定义了一个函数,用于获取与select器匹配的所有dom元素的(jQuery样)数组:

> $$

 bound: function () { return document.querySelectorAll.apply(document, arguments) } 

这是由开发工具添加吗? 在Firefox中使用Firebug时也会出现。 它是由工具本身在内部使用吗?

那么, Firebug Lite将其定义为:

 this.$$=function(selector,doc){if(doc||!FBL.Firebug.chrome){return FBL.Firebug.Selector(selector,doc) 

( 查看来源 )

Firebug的完整版本将其定义为

 this.$$ = function(selector) { return FBL.getElementsBySelector(baseWindow.document, selector); }; 

这实际上是logging的 ,是的,它也在内部使用。

所以我认为谷歌浏览器正在做类似的事情。

首先,ziesemer的答案是正确的。

这是关于JavaScript的历史

在各种浏览器的devtools控制台中有许多function可用。 这些方法统称为Command Line API ,它们都来自Firebug。 现在我们在浏览器上只是平等的,因为Firebug做的事情(大部分)是正确的。

但是当Firebug被创build的时候(2006年),那些风靡一时的JavaScript库就是Prototype.js。 $被Prototype抓住了一些getElementById()语法糖,因为这当然是抓取元素和当时最常用的元素采集技术的最快方法。 这是一个定时器,人们使用整个图书馆只为了$糖 。

在2006年初,jQuery接着推出并使用$()来select基于CSSselect器的任何元素。 正如我以前的CSSselect器引擎时间表post所示,Prototype随后在4天之后跟上了自己的版本,但是由于$已经在他们的库中被采用,所以他们只是去了$$() ,现在被称为bling-bling函数

因此,Firebug正在利用Prototype的API,因为它仍然在2006年占据了主导地位。现在,在jQuery和后jQuery混淆时代像window.$ = document.querySelectorAll.bind(document) ,我们认为它是相当倒退的。 有趣的是,当Opera彻底改变了他们的浏览器开发工具Dragonfly时,他们select了$作为querySelectorAll别名,以更好地匹配现在的做法,而IMO更有意义。

哦,你的意思是代码的来源..

现在,您问到DevTools中$$的“来源”,我解释了历史。 哎呦! 至于为什么它可以在您的控制台中使用…所有的命令行API方法都只能在控制台的上下文中使用,就像方便的方法一样。

  • Chrome DevTools'/ WebKit Inspector的cmd行API来源
  • Firebug的cmd行API来源
  • Opera Dragonfly的cmd行API来源

copy()是我的最爱之一; 我在这个用于Power Usersvideo的JavaScript控制台中介绍了其他人。

看看这个链接https://developer.chrome.com/devtools/docs/commandline-api#selector_1

“命令行API是用于使用Chrome开发人员工具执行常见任务的function集合,包括便捷function,用于select和检查DOM中的元素,停止和启动分析器以及监视DOM事件。

它描述了$$select器如下:

$$(select器)

返回匹配给定CSSselect器的元素数组。 这个命令相当于调用document.querySelectorAll()。

以下示例使用$$()在当前文档中创build所有<img>元素的数组,并显示每个元素的src属性的值。

 var images = $$('img'); for (each in images) { images[each].src; }