webkit的`$$`返回和jQuery的`$`返回有什么区别？答案

【问题标题】：What is the difference between webkit's `$$` return and jQuery `$` return?webkit的`$$`返回和jQuery的`$`返回有什么区别？
【发布时间】：2011-09-29 20:28:00
【问题描述】：

如果我在 Chrome 之类的 webkit 浏览器中使用：

$$('span');

我得到的结果看起来和 jQuery 几乎一模一样：

$('span');

如果我在控制台中查找$$ 的定义，我会得到：

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

对于$，我得到：

function (a,b){return new c.fn.init(a,b)}

我可以对 $$ 对象执行哪些类型的函数，而我无法对 jQuery ($) 对象执行哪些类型的函数？

【问题讨论】：

如果您尝试在没有 jQuery 的网站上获取 $，它是 document.getElementById() 的包装器。
@bazmegakapa -- 很有趣，是的。嗯
+1：好问题。哇！我不知道。如果你在谷歌搜索结果上尝试 $ 你会得到 return document.getElementById.apply(document, arguments) 并且在没有 javascript 库的页面上你会得到 return document.getElementById(id);
developers.google.com/chrome-developer-tools/docs/…

标签： javascript dollar-sign

【解决方案1】：

$$，正如你所说，是特定于 webkit 的，应该只在控制台中使用。它有 very 与 jQuery 相似的选择器，不同之处在于它将返回一个 DOM 节点 数组，而 jQuery 将返回一个 jQuery数组

这两个是相同的：

$$('span');

$('span').get();

jQuery 选择器实际上更强大一些，因为它们添加了 dom 中不存在的选择器，例如 :checkbox、:contains 等。

参考：JQuery Selectors

【讨论】：

您在任何地方都有相关文档吗？听起来很有趣
文档将在 querySelectorAll: developer.mozilla.org/en/DOM/document.querySelectorAll
@cwolves - 我刚刚找到了这个链接：prototypejs.org/api/utility/dollar-dollar - 它有关联吗？
@Neal - 这是prototypejs特有的。使用原型，$ 函数直接映射到getElementByid，而$$ 允许您使用查询。
@cwolves：我只想指出，Webkit 只在控制台中定义$$，而不是在您加载的脚本中。

【解决方案2】：

查看chrome developer tools page，Chrome的开发者工具似乎支持Firebug's command-line API（也就是说Firebug也支持$$）。

$$ 的文档指出：

$$（选择器）

返回一个数组与给定 CSS 匹配的元素选择器。

大致相当于jQuery(selector)，其中selector是一个CSS选择器，返回类型显然会有所不同。简而言之，您可能无法专门使用 $$ 做更多的事情，但是查看 Firebug 的命令行 API，似乎有一些有用的功能（尤其是如果您的页面上没有可用的 jQuery）。

【讨论】：

【解决方案3】：

WebKit 默认将$$ 和$ 定义为document.querySelectorAll 的简写引用。当 jQuery 加载时，它会将 $ 的值替换为 jQuery 函数。如果需要，jQuery 还会保留原始的 $ 值。 WebKit 这样做是为了引入一致的 API 来查询 DOM，无论您是否使用 jQuery。

最大的区别在于querySelectorAll 的结果是一个 DOM 元素数组（一个 NodeList - 感谢@lonesomeday），而 jQuery 是 jQuery 对象。

【讨论】：

qSA not 返回一个数组：它返回一个 NodeList。
稍微澄清一下：一个非实时节点列表
@lonesomeday - 好点，但在 javascript API 中，它被视为一个数组。
@Matthew 嗯，它以什么方式被视为数组？例如，您可以使用length 和[0]，但不能使用slice。
@Matthew Abbott - 它实际上是一个“类似数组”的对象。您不能直接对其进行数组操作（尽管[].slice.call(nodeList) 之类的东西有效），也不能修改它。可能还有其他差异，但这是主要的两个。

【解决方案4】：

由于$$ 只是querySelectorAll 的包装器，因此您可以传递任何有效的选择器。

“我可以在 $$ 对象上执行哪些类型的函数，而我无法对 jQuery ($) 对象执行真正的操作？”

首先，$$ 不是像 jQuery 那样的对象。它是一个对象，但它只是一个简单的函数对象，它是document.querySelectorAll 的包装器（快捷方式）。它返回它找到的元素的NodeList。

据我所知，它唯一支持但 Sizzle 没有特别支持的是 :nth-of-type。

（当然，当您提供有效的选择器时，Sizzle 默认为 qsa，因此您可以在也支持 qsa 的浏览器中将 nth-of-type 传递给 jQuery 函数。）

使用 Sizzle，querySelectorAll 不支持一些选择器，因此从技术上讲，您可以使用 jQuery/Sizzle 做更多事情。

其中包括：

:eq()
:gt()
:lt()
:first
:last
:not() （当你给它多个选择器时。qsa 支持简单的:not() 值。）
:animated
:input
:button
:checkbox
:even
:odd
:has()
:image
:password
:radio
:reset
:selected
:submit
:text
:visible

...说出几个几个。

请记住，Sizzle 首先尝试使用querySelectorAll。如果你传递了一个专有的选择器，它就会默认使用 Sizzle 自己的引擎。

由于qsa 通常比 Sizzle 快，因此建议考虑使用上面列出的专有选择器的替代品以提高性能。

另请注意，Webkit 确实不在控制台中的任何位置除了定义$$。 $$ 快捷方式在您的脚本中不可用，除非您将其设置为可用。

【讨论】：

如果 Sizzle 无论如何都在使用 qSA，那么回报有什么不同？这是否意味着我可以在 qSA NodeList 上执行 jQuery 函数（如 .css、.html 等...）？
@Neal：Sizzle 仅将其用于 DOM 选择。这就是它的全部目的。它就像getElementsByTagName()，但它接受 CSS 样式选择器而不仅仅是标签。 jQuery 所做的是将选择的结果放入您的 jQuery 对象中，该对象包含 .css、.html 等所有方法。
...在此页面上打开您的控制台并输入document.querySelectorAll( 'div > span:first-child' );，然后输入$$( 'div > span:first-child' );。你会得到同样的结果，因为它调用的是同一个函数。
是的，我意识到了这一点，但它看起来也与$( 'div > span:first-child' );的结果相同
@Neal：它在控制台中看起来是这样，因为控制台将 jQuery 对象解释为一个数组，即使它不是。自然选择的结果是相同的，因为 Sizzle 要么使用 qsa，要么如果它不可用，它自己的 JavaScript 引擎模拟 qsa。

【解决方案5】：

正如您的问题所示，$$ 是document.querySelectorAll 的包装。这意味着当你调用它时它具有相同的选项并且它返回相同的东西。

与$ (jQuery) 的区别：

$$ 支持浏览器支持的 CSS 选择器。 $ 尽可能使用querySelectorAll，但它也支持一些自定义扩展（例如:has）。这些将不适用于$$。
$$ 返回静态 NodeList。这不是一个特别有用的生物。它的行为有点像一个数组（它有一个length 属性，您可以使用[0] 等访问它的成员），但是没有一个普通的数组方法可用。编写 jQuery 是为了提供一个对象来包装找到的元素，并且有很多方便的方法。这些都不存在于$$ 的结果中。
$$ 将是最快的选择，几乎总是如此。 $ 几乎总是会变慢，而且通常会慢很多。

请注意，Chrome 控制台将显示$ 的结果和$$ 的结果，就好像它们是数组一样。既不是;它们只是像数组一样显示，因为这是将它们概念化的简单方法。 $$ 返回一个 NodeList，$ 一个自定义对象。

【讨论】：

【解决方案6】：

这是我的一点。在研究时，我从 Safari 文档Debugging your WebSite

中得到了这个

命令行 API 部分这么说。

除了通常的 JavaScript 方法、功能和在你的脚本中定义的变量，你可以输入一些 Firebug 命令行 API 在控制台上交互。支持以下命令互动：

$0-$4
包含的变量当前和前三个已选择 Web Inspector 中的节点。

$(id)
返回带有指定的标识。相似 getElementById()。

$$(选择器)
返回数组与给定 CSS 匹配的元素选择器。类似于 querySelectorAll。

$x(xpath)
返回数组与给定 XPath 匹配的元素表达。

【讨论】：