jQuery选择器中的冒号的目的是什么？ [英] What's the purpose of a leading colon in a jQuery selector?

问题描述

我开始使用Wijmo工具包，并在其文档页面中遇到了与此相似的几个示例选择器：

  $（：input [type ='radio']）。wijradio（）; 
  

我会这样写的：

  $（'input [type = radio]'）。wijradio（）; 
  

这些做同样的事情还是有什么缺失？

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

解决方案

：input 是 jQuery扩展，而输入是一个CSS选择器。

textarea ，按钮和 select 元素将与前者匹配，但不匹配后者。

后者速度更快，因此请将其用于您的特定收音机示例。如果您需要所有表单元素，即使它们不严格地< input> 标签，请使用：input 。即使在这种情况下，建议先使用标准的CSS选择器，然后在该集合上使用 .filter（'：input'）。

$ b $因为：input是一个jQuery扩展而不是CSS
规范的一部分，查询使用：input不能利用
性能提升提供的由本地DOM的querySelectorAll（）
方法。为了达到最佳性能，当使用：input选择
元素，首先使用纯CSS选择器选择元素，然后
使用.filter（：input）。

在1.7.2源代码中，：输入过滤器根据nodeName测试正则表达式：

  input：function（elem）{
 return（/ input | select | textarea | button / i）.test（elem.nodeName）; 
}，
  

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.

解决方案

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

这篇关于jQuery选择器中的冒号的目的是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！