jQuery 选择器中前导冒号的目的是什么?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10552838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:31:03  来源:igfitidea点击:

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

jqueryjquery-selectors

提问by Morten Mertner

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

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

$(":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.

请注意,上面有两个不同之处:第一个选择器以冒号为前缀,并且输入类型有引号。

回答by David Ruttka

:inputis a jQuery extensionwhile inputis a CSS selector.

:inputjQuery 扩展,input是 CSS 选择器。

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

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

The latter is faster, so use it for your specific radioexample. Use :inputwhen 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.

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

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

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

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

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

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

回答by Yaron U.

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

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

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

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

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

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

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

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

回答by ShankarSangoli

The :inputselector basically selects all formcontrols(input, textarea, select and button elements) where as inputselector selects all the elements by tag name input.

所述:input选择器选择基本上所有form的控制(输入,文本区域,选择和按钮元素),其中作为input选择器选择由标签名的所有元素input

Since radio button is a formelement and also it uses inputtag so they both can be used to select radio button. However both approaches differ the way they find the elements and thus each have different performance benefits.

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