jQuery: jQueryオブジェクトの変数名には$を付けるという慣習

learn.jquery.com

jQueryオブジェクトはラッパーです。セレクタで要素を選択するごとに、毎回新規作成されます。商品がレジ袋で包まれるようなものです。

var logo1 = $( "#logo" );
var logo2 = $( "#logo" );

alert( $( "#logo" ) === $( "#logo" ) ); // alerts "false"

全く同じ要素をselectしているのに、別々の袋に入れられているため === では別物として扱われるわけです。(C言語だったらポインタの比較で説明できそう)

しかし .get(0) で中身を取り出して比較すれば、これは同じものを参照しているので同一となります。

var logo1 = $( "#logo" );
var logo1Elem = logo1.get( 0 );
 
var logo2 = $( "#logo" );
var logo2Elem = logo2.get( 0 );
 
alert( logo1Elem === logo2Elem ); // alerts "true"

公式サイトでは、紛らわしいのでjQueryオブジェクトの変数名には$を付けようぜ！と言っています。

var $logo1 = $( "#logo" );
var logo1 = $logo1.get( 0 );
 
var $logo2 = $( "#logo" );
var logo2 = $logo2.get( 0 );
 
alert( logo1 === logo2 ); // alerts "true"

jQueryオブジェクトは $logo1、生のDOM要素は logo1 と書き分けることで、コードの見栄えが良くなりました。私も今後これに従おうと思います。