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(){....};) 

我的意思是不会有jQuery的回去文档根目录，每次我打电话<input type="text" name="name" value="" id="name"/>？

，如果从我的例子，我做这个

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

这意味着我问最后一个输入表单，然后询问后面的第1输入表格，它wouldnt使流动慢？

Answer 1

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

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

如果你真的担心选择的表现，看看http://www.paulirish.com/perf

Answer 2

正如Peeter说，使用ID选择会快很多。

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

Answer 3

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

为了获得更多的perfomace你可以用下面的方式

$(':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. 首先选择是 父元素..

   var inputsContainer = $("#inputs"); 
   

2. 选择输入元素FROM父.. （wi会仅仅从容器并不是全部做查询DOM对象）

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

Answer 6

看一看这些文章。他们为您提供关于选择绩效的一些好的见解。

http://www.componenthouse.com/article-19

http://benjaminsterling.com/jquery-what-are-the-fastest-selector/