jqueryセレクタ

jquery jquery-selectors
jqueryセレクタ

入力を個別に選択するか、1回のスワップで取得した場合、誰かが違いを教えてもらえますか。

like

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

一度のスワップで取得する場合と比較して

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

つまり、「?」を呼び出すたびにjqueryがドキュメントルートに戻る必要はないということです。

私の例からこれを行うと

つまり、最後の入力フォームを照会してから最初の入力フォームを照会し直すと、フローが遅くなりませんか?

  0  0


ベストアンサー

`jQuery( ‘#name’);`は、 `jQuery(”:input “)`よりも高速です。

`jQuery( ‘#name’)`はセレクターをIDとして照合し、IDごとにアイテムを返します。一方、 `:input`は入力タイプの要素のdom全体を走査します。

セレクターのパフォーマンスが本当に心配な場合は、http://www.paulirish.com/perfをご覧ください

1


これらの記事をご覧ください。 これらは、選択のパフォーマンスに関する優れた洞察を提供します。

1


Peeterが言ったように、IDセレクターの使用ははるかに高速です。

ただし、両方の利点を組み合わせることができます。 `$( ‘#id-of-your-form:input’)`を使用します。

0


上記の@ThiefMasterで述べたように、 `$( ‘#id-of-your-form:input’)`を使用して組み合わせることができますが、jQueryのシズルセレクターエンジンはセレクターを右から左に解析するため、パフォーマンスの問題もあります。

より多くのパフォーマンスを得るには、次の方法を使用できます

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

これにより、具体的なDOM要素のコンテキストでセレクター検索が行われます。 また、同じではないことに注意してください

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

これは内部的に「リファクタリング」されます

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

0


IDセレクター( #name`など)を使用する場合、 document.getElementById`メソッドを使用できます。これは非常に効率的です。 :input`のようなセレクターを使用するには、少なくとも getElementsByTagName`の呼び出しがいくつか必要であり、見つかったすべての要素をループして実際の内容を確認する必要があります。 クラスセレクターなどの一部のセレクターは、ページ内のすべての要素をループして一致する要素を探す必要があるため、さらに高価です。

idで要素を選択する場合、どの順序で実行してもかまいません。 jQueryは各セレクターを個別に評価します。特定の順序で要素を照会することは想定していません。

`#name、#subject、#message`のようなセレクターを使用して、同じjQueryコレクション内の3つの要素すべてを取得できます。これは、同じメソッドを使用する場合により効率的です。

0


次のようにjQueryよりもクエリを高速化したい場合:

jQuery:

  1. まず、親である要素を選択します。

    var inputsContainer = $("#inputs");
  2. 親から入力要素を選択します。 (コンテナからのクエリのみを行います
    DOMオブジェクト全体ではありません)+

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

0


タイトルとURLをコピーしました