$ Chrome 中的变量?

IT技术 javascript google-chrome google-chrome-devtools dollar-sign
2021-01-28 10:44:48

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

$
function () { [native code] }

所以,chrome 有一些可以被$. 似乎只有 chrome 有这个,我无法通过window['$']或通过document['$']访问它this['$']

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

6个回答

甚至从去年开始,这种情况又发生了变化。

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

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

……还有一堆人。

请注意它如何调用$的别名document.querySelector,但表示$$“等效”于调用document.querySelectorAll. 两者似乎都不是真的。$ === document.querySelectoris false,并$$返回一个数组,而不是一个NodeList

谢谢!保持这个问题的最新状态对未来的访问者很有用。:)
2021-03-21 10:44:48

它是 Chrome 开发人员工具的功能之一(因此在页面上不可用)。您可以在控制台页面上查看它的文档

它通过选择器获取元素。

Firefox 实现了类似的东西

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

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

选择元素

有一些选择元素的快捷方式。与输入标准对应项相比,这些可以为您节省宝贵的时间。

$()返回与指定 CSS 选择器匹配的第一个元素。它是 的快捷方式document.querySelector()

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

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


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

链接已过时,这些功能现已记录在此处另请注意,$$()返回 a Array,与document.querySelectorAll()返回 a不同NodeList
2021-03-27 10:44:48
并且当前的文档调用$了一个“别名” document.querySelector(尽管这似乎不是真的;至少,$ === document.querySelectorfalse)。
2021-04-06 10:44:48

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

https://developers.google.com/chrome-developer-tools/docs/console

它只是快速访问 document.getElementById。

啊真的。也许它引用了 document.querySelector,然后呢?
2021-03-30 10:44:48
@aaaidan,这是因为它不通过 id 获取元素,它也支持 sizzle 样式选择器!(虽然不测试复杂的)
2021-04-03 10:44:48
我同意,但也注意到$ == document.getElementById返回false......奇怪!
2021-04-10 10:44:48