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

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

.contextコンテキストを返す

構文

コンテキストを返す返値:DOM要素
jQo.contextver1.3〜

機能

contextプロパティはjQueryメソッドで設定された「DOM要素のコンテキスト」を返します。コンテキストが設定されていない場合はdocumentを返します。

解説

コンテキストを返す

サンプル(context/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryは以下の様に記述され、2行目でコンテキストにdocument.bodyを設定したjQueryオブジェクトを作成しています。3行目では2行目で作成したjQueryオブジェクトに対しcontextプロパティを利用してコンテキストを取得し、textメソッドでdiv要素内に表示します。

$("button").click(function(){
	var test = $("div", document.body);
	$("div").text(test.context);
});

結果として、buttonをクリックするとdiv要素に「object HTMLBodyElement」と表示され、コンテキストで設定したbody要素(DOM要素)が取得できていることを確認できます。

コンテキストを設定していない場合

コンテキストを設定していない場合はdocumentを返します。サンプル(context/01b.html)を開いて、ほとんどcontext/01.htmlと同じ事を確認してください。異なるのはコンテキストを設定していない点だけです。

$("button").click(function(){
	var test = $("div");
	$("div").text(test.context);
});

結果として、buttonをクリックするとdiv要素に「object HTMLDocument」と表示され、コンテキストで設定したdocument(DOM要素)が取得できていることを確認できます。

メモ

DOM要素で指定しないと

コンテキストはDOM要素以外も設定できますが、その場合はcontextプロパティで値を取得できずdocumentを返します。サンプル(context/test01.html)を開いて、ほとんどほとんどcontext/01.htmlと同じ事を確認してください。異なるのは以下の様にコンテキストをDOM要素ではなく「body」と設定している点だけです。

$("button").click(function(){
	var test = $("div", "body");
	$("div").text(test.context);
});

結果としてコンテキストを設定していないサンプルcontext/01b.htmlと同じように、buttonをクリックするとdiv要素に「object HTMLDocument」と表示されます。