KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > jQueryオブジェクト

jQueryオブジェクト

jQuery1.3もリリースされたしってことで 今さらながらjQueryの勉強してるわけですが $()で取得できるjQueryオブジェクトが気になりました。

なんでかってーと「 jQuery.eq(n) 」の機能をうまく文章にできなかったからです。 どーでもいい理由ですが調べてみたらいい勉強になりました。

jQueryオブジェクトの気になるところ

気になっていたことと答えは下記ページにありました。

DOM では document.getElementById("id") と document.getElementsByTagName("element-name") で返ってくるオブジェクトはそれぞれノードとノードリストであり、まったく性質の異なるものです。それに対して、jQuery では jQuery("#id") と jQuery("element-name") で返ってくるのはいずれも同じ性質の jQuery オブジェクトであり、違いといえば前者の (配列としての) 要素数が最大で 1 であるのに対し、後者の要素数、すなわち length プロパティの値は 2 以上になりうることぐらいです。

Roppongi.JS #1

$()で取得したjQueryオブジェクトは1個でも複数でも配列みたいな感じってことらしい。 getElementById()とgetElementsByTagName()のように返ってくるオブジェクトが異なると 当然メソッドも違うので何が返ってくるかを意識しないとダメですが$()ではそれがないと。

なるほどこりゃ便利だw

jQueryオブジェクトの次に気になるところ

次に疑問に思ったのがjQuery("element-name")で取得したものはjQueryオブジェクトなのかそれともDOMなのか?

サンプルコード

Javascript
  1.  $("#execute").click(function(){
  2.   alert($("li")[0]);
  3.  });
HTML
  1.  <input type="button" value="jQueryオブジェクトの中身" id="execute" />

実行結果

なるほど。DOMですね。 全てjQueryオブジェクトに変換してたら重くなりそうですもんね。 当然っちゃ当然なのかも。

jQuery.eq(n)とかは使ったときにjQueryが持ってる n番目のDOMをjQueryオブジェクトとして返すってことか。

これでjQuery.eq(n)の説明ができそう。

jQuery.eq(n)

jQueryオブジェクトが持つn番目のDOMをjQueryオブジェクトとして返す。

だいたいあってるとおもう・・・w

jQueryオブジェクトの中身

ついでなんでjQueryオブジェクトの中身を見ておこうかと思います。

サンプルコード

Javascript
  1.  var a = $("li");
  2.  var t;
  3.  
  4.  for (var b in a) {
  5.   t += '<span class="bold">' + b + "</span> =" + a[b] + "<br /><br />";
  6.  }
  7.  
  8.  $("#jQueryObject").html(t);
HTML
  1.  <div id="jQueryObject">
  2.  </div>

実行結果

jQueryクックブック
作者:jQuery Community Experts | 価格:¥ 3,780

トラックバック(2)

2010年1月19日 12:18

[jQuery]こんな機能があったんだ。jQuery stop()WEBプログラム覚書

jQuery stop()のいろいろな機能を試してみたよ続きを読む

2011年12月 9日 01:55

[jQuery] jQuery入門前の話。WEBプログラム覚書

jQuery APIリファレンスをみて、jQuery.each()とjQuery(selector).each()のような同じ名前のメソッドで何が違うんだ...続きを読む

コメント

コメントする
Name
Email Address
URL
TIME LINE
2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24
2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

2012
01.21

[PHP]共有サーバーユーザーのためのPEARインストール方法

共有サーバーでは自由にPEARのパッケージがインストールできないので、 プロジェクトローカルに設置することになりますが、以前httpベースのものを使ってみたんですけど、 やたら重くて使い物にならなかったので、僕は普通にFTPでアップするようにしてます。

ってことでプロジェクトローカルへのPEARのインストール方法。