What's the purpose of a leading colon in a jQuery selector?

I've starting using the Wijmo toolkit, and came across quite a few example selectors similar to this in their documentation pages:

$(":input[type='radio']").wijradio();

I'd have written mine like this:

$('input[type=radio]').wijradio();

Do these do the same or is there something I'm missing?

Note that there are two differences above: the first selector is prefixed with a colon and has quotes for the input type.

Solution 1:

:input is a jQuery extension while input is a CSS selector.

textarea, button, and select elements would be matched by the former, but not the latter.

The latter is faster, so use it for your specific radio example. Use :input when you want "all form elements" even if they aren't strictly <input> tags. Even in that case, the recommendation is to use a standard CSS selector first, then use .filter(':input') on that set.

Because :input is a jQuery extension and not part of the CSS specification, queries using :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :input to select elements, first select the elements using a pure CSS selector, then use .filter(":input").

In the 1.7.2 source, the :input filter tests a regular expression against the nodeName:

input: function( elem ) {
            return (/input|select|textarea|button/i).test( elem.nodeName );
},

Solution 2:

the $("input") selector will choose only elements of the type input

while the $(":input") selector will catch all the inputs elements (such as textarea, select, input etc...)

for further information, go the jQuery official documentation about the :input selector at:

http://api.jquery.com/input-selector/