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.
Answer
: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 );
},