・jQueryセレクタ結果は、jQueryオブジェクトでしょうか?
・それとも配列?
・あるいは、DOMのような、配列っぽいけど厳密には配列ではないオブジェクト?
3 件の回答
jQueryオブジェクトです。
jQueryのメソッドを指定できる(例:$(".classname").css("display","none")のようにできる、もし$(".classname")の結果が配列とかDOMエレメントリストのようなものなら実行できない)ことからも明らかですね。
微妙に認識が異なる気がしたので補足しますが、
結論だけでよければ読まなくても大丈夫です。
返却値の話ですが、jQueryオブジェクトだとは思います。
ですが、これは自身(コンストラクタでセレクタを元に継承された$
)を返却しています。
なので$(".classname").css("display","none")
のcss
の実際の関数は
$.css
にあり、これを継承した自身を返しているので実行できるのです。
ですので、返却値を変数に入れる事で継承することが可能で、
継承した後の変数では、jQueryオブジェクトで呼び出せる関数を実行する事が出来ます。
//ただ単に代入してみよう
var work = $("#sample_data");
//返却値がjqueryオブジェクトならHTMLとれるよね?
$("#res").append("["+work.html()+"]");
$("#res").append("<br />");
//DOMなら出せるよね
$("#res").append("["+work.innerHTML+"]");
$("#res").append("<br />");
//ところで貴方の型は?
$("#res").append("["+(typeof work)+"]<br />");
$("#res").append("<hr />");
//存在しないElement呼んだらどうするのよ
$("#res").append("["+(typeof $("#not_found"))+"]<br />");
//継承してみる
work = new $("#sample_data");
$("#res").append("<hr />");
//代入と同じことしてみよう
$("#res").append("["+work.html()+"]");
$("#res").append("<br />");
$("#res").append("["+work.innerHTML+"]");
$("#res").append("<br />");
$("#res").append("["+(typeof work)+"]<br />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="sample_data"><span>span_node</span></div>
<hr />
<pre>
<code id="res">
</code>
</pre>
-
jQueryオブジェクト自体よく分かっていないのですが、「継承した自身を返している」とは、dqn.sakusakutto.jp/2012/05/…「jQuery.fn.initクラスのインスタンス」に該当するのでしょうか?– re9Commented 2015年9月11日 11:24
そういったことを調べるには、APIドキュメントを参照します。
戻り値
jQuery
抽出されたjQueryオブジェクト
jQuery(expression, context) - jQuery日本語リファレンス
jQuery( selector [, context ] ) Returns: jQuery
したがってjQueryオブジェクトです。
こういった疑問は、自分で調べられるようになれば30秒もかからずにわかることです。
結論を知るより、調べ方を知ったほうが有用です。
なお、「$(".classname").css("display","none")
というコードを書いた覚えがあるからJQueryオブジェクトであるような気がする」というような曖昧な根拠でコードを書くのはやめたほうがいいです。APIは変わることがあるし、入力次第で別種のオブジェクトが返ってくることもあるし、似たようなAPIを備えた異なるオブジェクトも存在することがあります。唯一信用できるのは公式のAPIドキュメントだけです。
また、実験で確認するのは最後の手段です。APIドキュメントに記載されておらず、ソースコードを読んでも複雑すぎてわからないなら、仕方ないので実験して振る舞いを推測します。運が良ければ動きます。運が良ければ。
-
補足: semooh.jp/jquery は有名なサイトですが、2010年以来更新されていません。追加・廃止されたAPIも多数あります。今回話題になった
$()
は特に変わっていないと思いますが、非公式の翻訳やドキュメントを参照する際には対象バージョンや更新日時に注意が必要です。– unaristCommented 2015年9月9日 13:47 -
そのとおりですね。日本語のほうが良かろうと思ってなんとなく日本語のサイトを挙げてしまいましたが、自分で「唯一信用できるのは公式のAPIドキュメントだけ」と言ってるのとも矛盾してますし、訂正します。ありがとうございます。 Commented 2015年9月9日 14:24