$ Chrome中的变量?

Den*_*nis 50 javascript google-chrome dollar-sign google-chrome-devtools

我在没有jQuery的页面上使用谷歌浏览器的开发人员工具(或使用该$符号作为快捷方式的任何其他库).当我$通过控制台检查时(只需输入并按下输入),我得到了这个:

$
function () { [native code] }
Run Code Online (Sandbox Code Playgroud)

因此,chrome有一些可以引用的本机函数$.只有chrome似乎有这个,我无法通过window['$']或通过document['$']或访问它this['$'].

我无法找出这个功能是什么.你知道它做了什么,也许有一些背景信息吗?提前致谢!

Que*_*tin 28

它是Chrome开发者工具功能之一(因此无法从页面上获得).您可以在Console页面上看到它的文档(虽然它只是说它实现了Firebug控制台命令)

它通过id得到一个元素.


T.J*_*der 25

即使从去年开始,这种情况再次发生了变化.

devtools控制台提供$了别名document.querySelector以及许多其他功能 ; 这是一个摘录列表:

  • $(selector)返回对具有指定CSS选择器的第一个DOM元素的引用.此函数是函数的别名document.querySelector().
  • $$(selector)返回与给定CSS选择器匹配的元素数组.此命令等同于调用document.querySelectorAll().
  • $_ 返回最近评估的表达式的值.
  • $0,$1,$2,$3$4命令的工作作为一个历史参考过去五年DOM元素面板内检查或在分析面板中选择的最后五个JavaScript的堆中的对象的元素.

......以及其他一些人.

注意它如何调用$别名document.querySelector,但是说它$$与调用"等效" document.querySelectorAll.两者似乎都不是真的; $ === document.querySelectorfalse,并$$返回一个数组,而不是一个数组NodeList.

  • 谢谢!及时更新这个问题对于未来的访问者很有用。:) (2认同)

Ale*_*ara 16

现有的答案已经过时,$不是document.getElementByIdor 的别名document.querySelector,而是for的包装querySelector.这个包装器实际上为元素提供了一个可选的第二个参数来查询子元素.

这一系列功能记录在控制台下:选择元素:

选择元素

选择元素有一些快捷方式.与键入标准对应物相比,这可以节省宝贵的时间.

$()返回与指定的CSS选择器匹配的第一个元素.这是一个捷径document.querySelector().

$$()返回与指定的CSS选择器匹配的所有元素的数组.这是别名document.querySelectorAll()

$x()返回与指定的XPath匹配的元素数组.


但是,这些值仅是控制台中的默认值.如果页面通过包含类似jQuery的内容覆盖变量,控制台将使用页面本身的值,类似的东西$('p')将返回jQuery对象而不仅仅是第一个p元素.

  • 链接已过时,现在已在[此处](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference)中记录了这些功能.还要注意`$$()`返回一个`Array`,不像`document.querySelectorAll()`返回一个`NodeList`. (2认同)

Alb*_*elB 7

开发工具链接来看,它现在使用document.querySelector()而不仅仅是getElementById().


zes*_*ssx 5

在Webkit检查器中有两个选择器,与Mootools一样:$$$

你可以在这里找到一些信息

他们在这里帮助你进行调试.