jQueryオブジェクトについて

jQueryオブジェクトとは

jQueryオブジェクトは$()で作成します。
jQueryオブジェクトを作成することでjQueryのメソッドを使用してDOM操作を簡単に行うことができます。

$()の引数として使用できるものは、単独のDOMオブジェクト、DOMオブジェクトの集合、DOMオブジェクトの配列などです。

jQueryオブジェクトを作成するjQuery()関数のことを簡略化して$()で表すことができます。この関数は負荷が高いため一度呼び出したものは有効に活用するようにしましょう。一度呼び出せばすむことを何度も同じように呼び出すと負荷がかかってしまいます。

今回は具体的な例を使ってjQueryオブジェクトを見ていきます。

サンプル４　jQueryオブジェクトについて

HTMLのコード

<ul>
  <li>1番目のリスト</li>
  <li>2番目のリスト</li>
  <li>3番目のリスト</li>
  <li>4番目のリスト</li>
</ul>

jQueryのコード

$(function(){
	var myobjct = $("li");
	var elems = myobjct.get();
        //[]でDOMオブジェクトを取得
        alert(elems[1].innerHTML);
        //get()にインデックスを渡してDOM オブジェクト を取得
        alert(myobjct.get(0).innerHTML);  
	//[]でjQueryオブジェクトを取得
        alert(myobjct[1].innerHTML);
});

$(“li”)とすることで配列状態になった４つのliを返します。
myobjctにはjQueryオブジェクトとしてのDOM要素の集合体が代入されます。
まずjQueryメソッドのget(n)を使用してjQueryオブジェクトをDOMの配列に変換してelemsに代入します。
elemsはDOMオブジェクトの配列です。
配列elems[1]にDOMプロパティのinnerHTMLで対象のli要素内のテキストを表示させます。

次は上記と同様のことを一度に行っています。

alert(myobjct.get(0).innerHTML);

興味深いのは次の内容です。

 alert(myobjct[1].innerHTML);

jQueryオブジェクトから直接に配列のように[]を使用してDOM要素を取り出すことができることです！

参考
get()：DOM要素を配列で取得します．
get(N)：N番目のDOM要素を取得します．
[N]：N番目のDOM要素を取得します． get(N) と同じです．

jQueryオブジェクト作成のポイント

$()には第２引数が存在します！
第２引数「context」を設定することで検索対象を絞ることができます。

第２引数はクエリの開始点を定義しています。そのためにcontextを呼ばれます。

$(“li”,”#first”)とするとid=”first”の中のliとなります。この場合は$(‘#first’).find(‘li’);と同等のことが実施されます。

参考：高速で安全なjQturyを書く