デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery(セレクタ)jQueryオブジェクトを作成

構文

引数にマッチしたjQueryオブジェクトを作成する返値:jQueryオブジェクト
jQuery( セレクタ [,コンテキスト] )ver1.0〜
jQuery( DOM )ver1.0〜
jQuery( jQuery )ver1.0〜
jQuery( Object/Array )ver1.0〜
jQuery( )ver1.4〜
※jQueryは$で置き換えることができます。 例:$(セレクタ)
※上にはありませんがXMLも限定的に利用でき「解説:XMLにも利用可能」で紹介しています。

機能

jQueryメソッドは引数にマッチした要素をjQueryオブジェクトとして返します。jQueryで一番利用されるメソッドのため、$で置き換えることが可能になっています。

第2引数のコンテキストにセレクタ等(xmlデータも可能なようです)を指定することで、検索対象を絞ることができます。省略した場合はdocumentが対象となります。他にも様々な構文があるので、以下の解説で説明していきます。

解説

セレクタで指定した内容にマッチしたjQueryオブジェクトを作成

セレクタで指定した内容にマッチした要素をjQueryオブジェクトに変換します。サンプル(jquery1/01.html)を開いてbody内に2つのdiv要素と1つのspan要素があることを確認してください。

jQueryは以下の様に記述され、1行目で「div」にマッチする要素をjQueryオブジェクトに変換し変数joに代入しています。jQueryオブジェクトはjQueryのメソッドに直接利用できるので3行目でcssメソッドを利用し背景色を緑に変更しています。

var jo = jQuery("div");
$("button").click(function(){
	jo.css("background-color","#cfc");
})

結果として、buttonをクリックすると2つのdiv要素の背景色が緑に変わります(span要素は変更されません)。このようにjQueryオブジェクトはセレクタにマッチした要素が複数あっても問題ありません

第2引数「コンテキスト」を利用

jQueryメソッドに第2引数「コンテキスト」を設定することで検索対象を絞ることができます。
サンプル(jquery1/02.html)を開いて2つのul要素に5つずつli要素があることを確認してください。また各ul要素にはid属性が設定されています。

jQueryは以下の様に記述され、第2引数「コンテキスト」にtest1のid属性のセレクタを指定しました。このため検索対象はtest1のid属性が付いたul要素内に限定されます。

$("button").click(function(){
	$("li","#test1").css("background-color","#f99");
})

結果として、buttonをクリックすると、test1のid属性が付いたul内のli要素しか選択されません。

DOM要素の利用

jQueryメソッドは引数にDOM要素を設定すると、DOM要素をjQueryオブジェクトに変換します。
サンプル(jquery1/03.html)を開いてhtmlの構成はサンプルjquery1/01.htmlと同じ事を確認してください。jQueryは以下の部分だけが異なり、jQUeryメソッドの引数に直接DOM要素を設定しています。

var jo = jQuery(document.getElementsByTagName("div")[0]);

上記ではDOMで最初のdiv要素を指定しているため、buttonをクリックすると一番上のdiv要素だけが変わります。DOM要素に対し、jQueryのメソッドを使いたい時に利用します

jQueryオブジェクトの複製

引数にjQueryオブジェクトを設定することで、jQueryオブジェクトを複製することができます。
サンプル(jquery1/04.html)を開いて以下の部分を確認して下さい。1行目で作成したjQueryオブジェクト「jo」を2行目でjQueryメソッドの引数に設定し、複製されたjQueryオブジェクトjo2を得ています。jo2は4行目でcssメソッドに利用しています。

var jo = jQuery("div");
var jo2 = jQuery(jo);			
$("button").click(function(){
	jo2.css("background-color","#cfc");
})

buttonをクリックするとdiv要素の背景色が変わることから、jo2がjoのコピーであることが確認できます。
→ページ最下段の「個人的なメモ」に追加記事あり。

objectオブジェクトもjQueryオブジェクトに変換

引数にobjectオブジェクトを設定することでjQueryオブジェクトに変換できます。変換後はjQueryデータなのでjQueryのメソッドが利用できます。とはいえ元がシンプルなオブジェクトなので、dataメソッドpropメソッドくらいしか利用しなさそうです。

サンプル(jquery1/05.html)を開いて以下の部分を確認してください。1行目でobjectオブジェクト「testObj」を作成しています。これを4行目でセレクタとして利用し、propメソッドを利用してクリックされたdivのidと同じ名前のプロパティの値を取り出し、アラートで表示するようにしています。

testObj = {aaa:"my id is aaa", bbb:"my id is bbb"};
$(function () {
	$("div").click(function(){
		var myName = $(testObj).prop(this.id);
		alert(myName)
	});
});

html上の複数の要素とデータを紐つけることができるので、何かの役に立ちそうな気がしつつも実用的な例が思い浮かびません。というかサンプルjquery/03.htmlのレベルならjQueryオブジェクトにしなくても同じ事ができますし...。→参考:サンプル(jquery1/05b.html

testObj = {aaa:"my id is aaa", bbb:"my id is bbb"};
$(function () {
	$("div").click(function(){
		alert(testObj[this.id]);
	});
});

空のjQueryオブジェクトを作成

引数に何も設定しないと、空のjQueryオブジェクトを返します。ver1.4未満では引数を設定しないとdocumentが返ってきていました。保存したjQueryオブジェクトをリセット(何も選択されていない状態)する時や、変数の初期値として利用するのだと思います。

XMLにも利用可能

本家サイトの「Using DOM elements」の後半部分にXML要素を操作するサンプルがあったのでサンプルを作成しました。サンプル(jquery1/06.html)を開いてbody内にbutton要素とdiv要素があることを確認して下さい。

<button>get</button>
<div></div>

jQueryは、まず以下の部分を確認して下さい。buttonをクリックすると$.getメソッドを利用して外部にあるxmlデータ「sample.xml」を読込、読込が完了したらgetFuncを実行するようにしています。

$("button").click(function(){
	$.get("../../ajax/data/simple.xml", getFunc);
});

getFuncは以下の様に記述され読み込まれたxmlデータ「myXML」にjQueryメソッドを利用しjQueryオブジェクトに変換しています。ですのでトラバースのfindメソッドを利用してnameタグを見つけ、textメソッドを利用してテキスト内容を取得しています。取得した結果はtextメソッドを利用してdiv要素に表示しています。

function getFunc(myXML, myStatus){
	var myName = $(myXML).find("name").text();
	$("div").text(myName);
};

結果として、buttonをクリックするとXMLデータ内にあるnameタグのテキスト情報である「bob」がdiv要素内に表示されます。本家サイトでは以下の様な記述がありトラバースのみ言及されています。しかし、紹介したサンプルのようにtextメソッドなども利用できることから部分的には他のメソッドも利用できそうです。

XML data returned from an Ajax call can be passed to the $() function so individual elements of the XML structure can be retrieved using .find() and other DOM traversal methods.

メモ

jQueryの複製って...

jQueryメソッドを利用してjQueryオブジェクトを複製する必要があるということは、jQueryは「値渡し」ではないと思うのです。「値渡し」がよく分からない方はrubyですが、以下の記事が詳しいです
→参考:値渡しと参照渡しの違いを理解する

例えばjavaScriptのObjectオブジェクトは参照の値渡しのため、不慣れな方には不思議な振る舞いをします。サンプル(jquery1/test01.html)を開いてjavaScriptを確認してください。ポイントは以下の4行です。

var myObj = {a:10, b:20, c:30};
var myObj2 = myObj;
myObj2.d = 40;
alert(myObj.d)

1行目でObjectオブジェクトの「myObj」を作成し、2行目でmyObj2に代入して複製しています。3行目で複製したmyObj2に新たなプロパティd(値は40)を追加しました。最後にアラートでmyObjのプロパティdを表示します。

buttonをクリックすると上記の処理が開始されるので、buttonをクリックするとmyObjのプロパティdを表示されます。ここでよく考えてください。プロパティdを追加したのはmyObj2でありmyObjではありません。にも関わらずmyObj2にもプロパティdが追加されてしまっています。

jQueryオブジェクトもこれと同じ仕様だから、コピーするのにjQueryメソッドを使うのだと思ったのですが、そうではありませんでした。サンプル(jquery1/test02.html)では、以下の様に普通にコピーしたjo2に空のjQueryを代入して要素を消しています。しかしコピー元であるjoの状態は変化しないため、buttonをクリックしても相変わらずdiv要素が着色されます。

var jo = jQuery("div");
var jo2 = jo;
jo2 = $();
jo.css("background-color","#cfc");

上記のように、objectオブジェクトと異なりjQueryオブジェクトは代入演算子「=」で複製が作成できるのであれば、jQueryメソッドを利用して複製を必要はないと思うのですが...。他に何か理由があるのでしょうか?

コンテキストを利用することによる高速化

第2引数のコンテキストを「正しく」利用することで、速度を向上できるそうです。
→参考:[斜め読み]Brandon Aaron「誤解されてるjQueryの"Context"」

要はコンテキストはDOM要素で選択すべし!ということでしょうか?。しかし以前に使い方の高速化でサンプルを作成したものの、高速化されないのでボツにしたサンプルがあります。以下がその結果です。複雑な構造の方が差が出ると思ったので、div要素の入れ子をたくさん設定しています。

サンプル「jQuery1/test03.html」→選択対象がid属性:コンテキスト利用せず→結果「20ミリ秒」
サンプル「jQuery1/test03b.html」→選択対象がid属性:コンテキスト利用→結果「36ミリ秒」
コンテキストを利用した方が時間が掛かる結果に...。

サンプル「jQuery1/test04.html」→選択対象がclass属性:コンテキスト利用せず→結果「44ミリ秒」
サンプル「jQuery1/test04b.html」→選択対象がclass属性:コンテキスト利用→結果「44ミリ秒」
変化なしという結果に...。