jquery 选择器

Question

<input type="text" name="name" value="" id="name"/>
<input type="text" name="subject" value="" id="subject" />
<input type="text" name="message" value="" id="message" />

有人可以告诉我，如果我单独选择输入或将它们放在一个交换中，有什么区别吗？

就像

var name = jQuery('#name');
var subject= jQuery('#subject');
var message = jQuery('#message');

与将它们放在一次交换中相比，

jQuery(":input").each(function(){....};)

我的意思是，每次我调用

如果从我的示例中我这样做，

<input type="text" name="message" value="" id="message" />
<input type="text" name="name" value="" id="name"/>

这意味着我查询了最后一个输入表单，然后查询了第一个输入表单，这不会使流程变慢吗？

Answer 1

jQuery('#name'); 会比 jQuery(":input") 快很多。

jQuery('#name') 会将选择器作为 ID 进行匹配，并通过 ID 返回项目，而 :input 将遍历整个 dom 来查找 input 类型的元素。

如果您确实担心选择器性能，请查看 http://www.paulirish.com/perf

Answer 2

正如 Peeter 所说，使用 ID 选择器会快得多。

但是，您可以结合两者的优点 - 例如使用 $('#id-of-your-form :input')。

Answer 3

正如 @ThiefMaster 上面提到的，您可以使用 $('#id-of-your-form :input') 进行组合，但它也存在性能问题，因为 jQuery 的 Sizzle 选择器引擎从右侧解析选择器向左。

为了获得更多性能，您可以使用以下方式

$(':input', $('#id-of-your-form').get(0))

这将导致在具体 DOM 元素的上下文中进行选择器搜索。
另请注意，它与以下内容不一样：

$(':input', $('#id-of-your-form')) 

这将在内部“重构”，例如

$('#id-of-your-form :input')

Answer 4

如果您使用 id 选择器（例如 #name），那么它可以使用 document.getElementById 方法，这是非常高效的。使用像 :input 这样的选择器至少需要多次调用 getElementsByTagName，并循环遍历所有找到的元素以检查它们到底是什么。有些选择器（例如类选择器）甚至更昂贵，因为它需要循环遍历页面中的所有元素以查找匹配的元素。

如果您通过 id 选择元素，那么您执行的顺序并不重要。 jQuery 单独评估每个选择器，它不希望您以任何特定顺序查询元素。

您可以使用像 #name,#subject,#message 这样的选择器来获取同一个 jQuery 集合中的所有三个元素，如果您想对它们使用相同的方法，这会更有效。

Answer 5

如果你真的想比 jQuery 更快地进行查询，如下所示：

<div id="inputs">
<input type="text" id="message" />
<input type="text" id="name" />
</div>

jQuery:

1. First select the element that is
   家长..

   var inputContainer = $("#inputs");
   

2. 从父级中选择输入元素..
   （只会从容器中查询，而不是整个 DOM 对象）

   var message = $("#message", inputContainer);
   var name = $("#name", inputContainer);