2012-05-11 7 views
71

私はWijmoツールキットを使用して起動すると、そのドキュメントページに次のようなかなりの数の例セレクタに出くわしました:私はこのような鉱山を書かれていると思いますjQueryセレクタの先頭のコロンの目的は何ですか?

$(":input[type='radio']").wijradio(); 

$('input[type=radio]').wijradio(); 

これらは同じことをするか、私は行方不明のものがありますか?

上記の2つの違いがあります。最初のセレクタにはコロンが付いており、入力タイプの引用符が付きます。

+4

一つが専門である、[** ':input' **](http://api.jquery.com/input-selector/)セレクタ、他方はですジェネリック[** 'Element' **](http://api.jquery.com/element-selector/)セレクタ。 – mellamokb

答えて

72

:inputjQuery extensionであり、inputはCSSセレクタである。

textarea,buttonおよびselectの要素は、前者と一致するが後者は一致しない。

後者は高速ですので、具体的なradioの例に使用してください。厳密に<input>タグでない場合でも、「すべてのフォーム要素」を使用する場合は:inputを使用してください。その場合でも、最初に標準のCSSセレクタを使用し、そのセットに.filter(':input')を使用することをお勧めします。

ので:入力がjQueryの拡張はなく、CSS 仕様の一部であり、使用するクエリ:入力はネイティブDOM querySelectorAll() 方法によって提供 パフォーマンス向上の利点を取ることができません。要素を選択して 要素を選択する場合は、まず純粋なCSSセレクタを使用して要素を選択し、 .filter( ":input")を使用して最高のパフォーマンスを達成します。 1.7.2ソースで

、:入力フィルタはnodeNameのに対して正規表現をテスト:

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

それは感謝します、ありがとう!そして型引用符は完全にオプションですか? –

+1

正直なところ、私は ':input 'と' [type =] 'を一度も使ったことがありません。純粋なCSSセレクタの場合、引用符は標準ですが、ブラウザは許しています。 http://reference.sitepoint.com/css/css3attributeselectors/demo –

+0

ので、$( ":checked")はチェックボックスを表示します。これもjquery拡張ですか? –

6

:inputセレクタは、すべてformコントロール(input、textarea、selectおよびbutton要素)を選択します。inputセレクタは、すべての要素をタグ名inputで選択します。

ラジオボタンはform要素で、inputタグを使用しているため、両方ともラジオボタンの選択に使用できます。しかし、両方のアプローチは要素を見つける方法が異なり、それぞれ異なるパフォーマンス上の利点があります。

14

$("input")セレクタ$(":input")ながら型入力

の要素のみを選択しますセレクタはすべての入力要素(テキストエリア、選択、入力など)をキャッチします。

詳細については、jQueryの公式ドキュメントを参照してください。で:inputセレクタ:

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

関連する問題