jQueryオブジェクトの比較 - コンピュータクワガタ

ふと、jQueryオブジェクトの比較はそのまま行えるのかどうか疑問だったので確認しました。
Googleに聞くとすでに検証されているようで、以下の2つのサイトを参考に検証してみました。

jQueryオブジェクトの比較
http://diary.flowind.jp/program/ajax/jquery/flowind61.html

$("body")==$("body") がfalseになるのはなぜなんだー
http://gyauza.egoism.jp/clip/archives/2009/05/090526-bodybody-false/

基本的にはjQueryオブジェクトを単純に比較、例えば$('#id') == $('#id')はfalseになるということです。通常のオブジェクト生成と同様で、内部的に作成されるオブジェクトはキャッシュされないので別のインスタンスが生成されるためfalseになります。
そのため、jQueryオブジェクトのget(0)メソッドでDOM要素を取得しそれを比較することで同一のノードを指し示しているかを確認することができます。

サンプルとして以下のようなソースで確認しました。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>jQueryオブジェクトの比較</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
$(function() {
    var result = $('#result');
    var span1 = $('#compare > span:eq(0)');
    var span2 = $('#compare > span:eq(1)');

    result.html('(span1 == span2)=' + (span1 == span2) + '<br>');
    result.append('(span1.get(0) == span2.get(0))=' + (span1.get(0) == span2.get(0)) + '<br>');
    result.append('(span1 == span1)=' + (span1 == span1) + '<br>');
    result.append('(span1 == $(\'#compare > span:eq(0)\'))=' + (span1 == $('#compare > span:eq(0)')) + '<br>');
    result.append('(span1.get(0) == $(\'#compare > span:eq(0)\').get(0))=' + (span1.get(0) == $('#compare > span:eq(0)').get(0)) + '<br>');
});
  </script>
 </head>
 <body>
  <div id="compare">
   <span></span>
   <span></span>
  </div>
  <div id="result"></div>
 </body>
</html>

実行結果は以下のようになる。わざとjQueryオブジェクトの生成時に変数に代入してます。同じ変数同士の比較だとtrueになり（当たり前だ！！）、同じ条件で生成したjQueryオブジェクトと比較するとfalseになっているのがわかります。また、get(0)で取得したDOM要素が同じであればtrueになることも確認できます。

(span1 == span2)=false
(span1.get(0) == span2.get(0))=false
(span1 == span1)=true
(span1 == $('#compare > span:eq(0)'))=false
(span1.get(0) == $('#compare > span:eq(0)').get(0))=true