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/