2009-06-02 6 views
6

についてjQueryの質問最近、私はパフォーマンスをスピードアップするための努力でこれをやっている(そして時にはそれが保守に役立ちます)変数とセレクタ

var objectToReference = $('div .complicated #selector ul:last'); 

のでobjectToReferenceは本当に何を保持していますか?時々物事が私を噛んだので、私は完全なセレクターを使用することに戻り、それは働いています。

だから変数は、それが配列であるjQueryのコレクションを、保持している(私はこれらの用語の正確な定義はわからない)など、

おかげ

答えて

20

多くの人がこのような変数を作成するときに使用するベストプラクティスは、jqueryオブジェクトであることを示すために$で始まる名前を付けることです。したがって、変数$ oに名前を付けることができます。変数の前後に$()を置かなくても、後に他のjQueryチェーン関数を直接呼び出すことができます。

$o.hide(); 

ドキュメント全体を検索する必要がないように、操作する領域の周辺要素から開始することをお勧めします。例えば、(文書全体を検索しなくて)文書の単一セクション内のすべてのリンクを取得するには:

var $o = $('#mysection'); 
var $links = $('a', $o); // equiv to $o.find('a') 

最後に、それはjQueryのjQueryの経由バックオブジェクトを渡すように痛いことはありません:

$o === $($o) 

これは素敵な副作用を持っている - あなたは、引数として、次のいずれかを受け付ける関数書き込むことができます。interesだ人にとって

function myFunc(e) { 
    var $e = $(e); 
} 
// All of the following will work: 
myFunc('#mysection'); 
myFunc(document.getElementById('mysection')); 
myFunc($('#mysection a')); 
+2

OH NOES!今私のJSはperlやPHPのように見えます。 Good tip tho:P –

+0

ええ、私も$のファンではありませんが、ローマでは... – BarelyFitz

1

をポインタ参照を保持しません。 DOMが変更された場合、あなたは困っているかもしれません。


さらに詳しく調べると、コレクション(配列のように扱うことができる)が配列のようなプロパティを持つオブジェクトであることがわかります。

http://www.learningjquery.com/2008/12/peeling-away-the-jquery-wrapper-and-finding-an-array

配列やオブジェクトは非常によく似たJavaScriptであることに注意してください。詳細は、Kirk & Cheesecake postをご覧ください。

3

jQuery selectorの戻り値は、jQuery要素の配列です。セレクタで一致するものが見つからない場合は、0要素の配列が格納されます。

配列内の各要素は、基本的に、HTMLドキュメントの一致するDOM要素への参照です。これは、必要に応じてトラバースして操作するためのものです。

+2

技術的には配列ではなく、配列のような性質を持つオブジェクトです。 – Nosredna

1

返されたjQueryオブジェクトへの参照を保持します。オブジェクトを変更すると、基になるDOM要素と、同じ要素に対する他のすべての参照が変更されます。

$('div .complicated #selector ul:last') 

あなたの変数objectToReferenceを使用すると、上のjQueryの操作を行うことができますjQueryオブジェクトになります。また、必ずしもそうでなくても、objectToReferenceを使用して新しいjQueryオブジェクトを作成することもできます。これは、自分自身への参照を返し、その要素を再検索しないため、パフォーマンス上の制限はありません。

var objectToReference = $('div .complicated #selector ul:last'); 
var copyOfObject = $(objectToReference); 

あなたはobjectToReferenceのDOMプロパティを参照しようとすることで問題に実行した可能性があります。あなたはjQueryのセレクタによって返さごobjectToReferenceの基礎となるDOM要素で取得したい場合は、あなたがこれを行うことができます:

var objectToReference = $('div .complicated #selector ul:last'); 
var domOfObject = objectToReference.get(0); 

または随意に、あなたは1行に同じことをされ、これを行うことができます:

var objectToReference2 = $(domObjectToReference); 

これらの例ストアrefのすべて:

var domObjectToReference= $('div .complicated #selector ul:last').get(0); 

ここでも、あなたはそのオブジェクトへの別の参照を作成するために、jQueryのコンストラクタでdomObjectToReferenceを使用することができますDOM要素に関連付けられます。参照の1つの値を変更すると、それらはすべて変更/更新されます。

関連する問題