What is the difference between webkit's `$$` return and jQuery `$` return?

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 do开发者_如何学JAVAcument.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?

$$ 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

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.

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.

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).

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.

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.