jquery - jQuery 选择器中前导冒号的目的是什么？

Question

我已经开始使用 Wijmo 工具包，并且在他们的文档页面中遇到了很多与此类似的示例选择器：

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

我会这样写我的：

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

这些做同样的事情还是我错过了什么？

请注意，上面有两个区别：第一个选择器以冒号为前缀，并为输入类型加上引号。

Answer 1

:input是一个jQuery 扩展，同时input是一个 CSS 选择器。

textarea, button, 和select元素将被前者匹配，但不匹配后者。

后者更快，因此将其用于您的具体radio示例。当您想要“所有表单元素”时使用:input，即使它们不是严格的<input>标签。即使在这种情况下，建议首先使用标准 CSS 选择器，然后.filter(':input')在该集合上使用。

因为 :input 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :input 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :input 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":input")。

在 1.7.2 源代码中，:input 过滤器针对 nodeName 测试正则表达式：

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

Answer 2

选择$("input")器将只选择输入类型的元素

而$(":input")选择器将捕获所有输入元素（例如 textarea、select、input 等...）

有关更多信息，请访问有关:input选择器的 jQuery 官方文档：

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

Answer 3

选择:input器基本上选择所有form控件（输入、文本区域、选择和按钮元素），其中input选择器通过标签名称选择所有元素input。

由于单选按钮是一个form元素并且它也使用input标签，所以它们都可以用来选择单选按钮。然而，这两种方法在查找元素的方式上有所不同，因此每种方法都有不同的性能优势。