webkit 的 `$$` 返回值和 jQuery `$` 返回值有什么区别?

发布于 2024-11-19 06:46:03 字数 500 浏览 7 评论 0原文

如果在像 Chrome 这样的 webkit 浏览器中我这样做:

$$('span');

我得到的结果看起来几乎与 jQuery 完全相同:

$('span');

如果在控制台中我查找 $$ 的定义,我得到:

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

对于 $ 我得到:

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

我可以在 $$ 对象上执行哪些类型的函数,而我无法使用 jQuery ($) 对象执行这些函数?

If in a webkit browser like Chrome i do:

$('span');

I get a result that looks almost exactly the same as jQuery's:

$('span');

If in the console I look for definition of $$ I get:

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

And for $ I get:

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

What type of functions can I do on a $$ object that I cannot really do with a jQuery ($) object?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

卷耳 2024-11-26 06:46:03

正如您所说, $$ 是特定于 webkit 的,并且只应该在控制台中使用。它具有与 jQuery 非常相似的选择器,区别在于它将返回一个 DOM 节点数组,而 jQuery 将返回一个 jQuery

这两个是相同的:

$('span');

$('span').get();

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

参考:JQuery 选择器

$$ is, as you said, webkit-specific and should only really be used in console. It has very similar selectors to jQuery, the difference being that it will return an array of DOM Nodes whereas jQuery will return a jQuery array

These two are identical:

$('span');

$('span').get();

jQuery selectors are actually a bit more powerful since they add selectors that don't exist in the dom like :checkbox, :contains, etc.

Reference: JQuery Selectors

猫性小仙女 2024-11-26 06:46:03

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

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

WebKit defines $$ and $ by default as shorthand references to the document.querySelectorAll. When jQuery loads, it replaces the value of $ with the jQuery function. jQuery also preserves the original $ value if you need it. WebKit does this to introduce a consistent API for querying the DOM, regardless of whether you are using jQuery or not.

The big difference is that the result of querySelectorAll is an array of DOM elements (a NodeList - thanks @lonesomeday), whereas jQuery's is the jQuery object.

眼藏柔 2024-11-26 06:46:03

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

“我可以对 $$ 对象执行哪些类型的函数,而我无法使用 jQuery ($) 对象执行这些函数?”

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

据我所知,它唯一支持但 Sizzle 不特别支持的是 :nth-of-type

(当然,当您提供有效的选择器时,Sizzle 默认为 qsa,因此您可以在也支持 nth-of-type 的浏览器中将 nth-of-type 传递给 jQuery 函数code>qsa.)

使用 Sizzle,有几个 querySelectorAll 不支持的选择器,因此从技术上讲,您可以使用 jQuery 做更多事情/嘶嘶声。

其中包括:

  • :eq()
  • :gt()
  • :lt()
  • :first
  • :last
  • :not() (当您给它多个选择器时。qsa 支持简单的 :not() 值.)
  • :动画
  • :输入
  • :button
  • :checkbox
  • :even
  • :odd
  • :has()
  • :image
  • :password
  • :radio
  • :reset
  • :selected
  • :submit >
  • :text
  • :visible

...命名几个几个。


请记住,Sizzle 首先尝试使用 querySelectorAll。如果您传递了专有选择器,则它默认为 Sizzle 自己的引擎。

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


另请注意,Webkit 不会在控制台中的任何地方定义$$。除非您使其可用,否则 $$ 快捷方式在您的脚本中不可用。

Since $$ is just a wrapper for querySelectorAll, you can pass any valid selectors.

"What type of functions can I do on a $$ object that I cannot really do with a jQuery ($) object?"

First, $$ isn't an object like jQuery. It is an object, but it's just a simple function object that is a wrapper (shortcut) for document.querySelectorAll. It returns a NodeList of the elements it found.

The only thing it supports that Sizzle doesn't specifically support, to my knowledge, is :nth-of-type.

(Of course Sizzle defaults to qsa when you give a valid selector, so you can pass nth-of-type to the jQuery function in browsers that also support qsa.)

With Sizzle, there are several selectors that are not supported by querySelectorAll, so you can technically do more with jQuery/Sizzle.

Those include:

  • :eq()
  • :gt()
  • :lt()
  • :first
  • :last
  • :not() (When you give it multiple selectors. Simple :not() values are supported in qsa.)
  • :animated
  • :input
  • :button
  • :checkbox
  • :even
  • :odd
  • :has()
  • :image
  • :password
  • :radio
  • :reset
  • :selected
  • :submit
  • :text
  • :visible

...to name a few several.


Keep in mind that Sizzle first tries to use querySelectorAll. If you passed a proprietary selector, it then defaults to Sizzle's own engine.

Since qsa is typically faster than Sizzle, it may be advisable to consider alternatives to the proprietary selectors listed above in order to improve performance.


Also note that Webkit does not define $$ anywhere except for in the console. the $$ shortcut is not available in your scripts unless you make it available.

在梵高的星空下 2024-11-26 06:46:03

查看 chrome 开发者工具页面,看起来 Chrome 的开发者工具支持Firebug 的命令行 API(意味着 Firebug 支持 $$以及)。

$$ 的文档指出:

$$(选择器)

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

这大致相当于jQuery(selector),其中selector是一个CSS选择器,返回类型显然会有所不同。简而言之,您可能无法专门使用 $$ 做任何事情,但是查看 Firebug 的命令行 API,看起来有一些有用的功能(特别是如果您没有可用的 jQuery在页面上)。

Looking over the chrome developer tools page, it looks like Chrome's developer tools support Firebug's command-line API (meaning that Firebug supports $$ as well).

The documentation for $$ states:

$$(selector)

Returns an array of
elements that match the given CSS
selector.

Which is roughly equivalent to jQuery(selector), where selector is a CSS selector and the return types will obviously be different. In short, there's probably not anything more you can do specifically with $$, but looking over Firebug's command-line API, it looks like there are some useful functions (especially if you don't have jQuery available on the page).

┼── 2024-11-26 06:46:03

这是我的一点。在研究中,我从 Safari 文档 调试你的网站

命令行 API 部分是这样说的。

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

$0-$4
包含以下内容的变量
当前和之前选择的三个
Web 检查器中的节点。

$(id)
返回带有
指定ID。类似于
getElementById()。

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

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

Here is my bit. On researching I got this from Safari docs Debugging your WebSite

The section The Command Line API says so.

In addition to the usual JavaScript
methods, and the functions and
variables defined in your script, you
can enter some Firebug command line
API’s interactively at the console.
The following commands are supported
interactively:

$0-$4
Variables that contain the
current and previous three selected
nodes in the Web Inspector.

$(id)
Returns the element with the
specified ID. Similar to
getElementById().

$$(selector)
Returns the array of
elements that match the given CSS
selector. Similar to querySelectorAll.

$x(xpath)
Returns the array of
elements that match the given XPath
expression.

已下线请稍等 2024-11-26 06:46:03

正如您的问题所示, $$document.querySelectorAll 的包装器。这意味着当您调用它时它具有相同的选项并且返回相同的内容。

$ (jQuery) 的区别:

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

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

As your question shows, $$ is a wrapper around document.querySelectorAll. This means that it has the same options when you call it and that it returns the same thing.

The differences to $ (jQuery):

  • $$ supports CSS selectors as supported by the browser. $ uses querySelectorAll when it can, but it also supports some custom extensions (e.g. :has). These will not be available with $$.
  • $$ returns a static NodeList. This isn't a particularly useful creature. It behaves a bit like an array (it has a length property and you can access its members with [0] etc), but none of the normal array methods will be available. jQuery is written to provide an object to wrap the elements found, and there are lots of convenience methods. None of these will exist on the result of $$.
  • $$ will be the fastest option, pretty much always. $ will almost always be slower, and will often be much slower.

Note that the Chrome console will show the result of $ and the result of $$ as if they were arrays. Neither is; they are merely displayed like arrays because that is an easy way to conceptualise them. $$ returns a NodeList, $ a custom object.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文