初版2011/09/10：最終更新日2011/09/10
jQueryとは
jQueryとは、軽量なオープンソースJavascriptライブラリです。
以下のような特徴があります。
  • CSSセレクタを使ったDOMエレメントの選択
  • DOM操作及び変更
  • CSS操作
  • イベント操作
  • アニメーションを含むエフェクト
  • Ajax
  • ユーティリティ
また、「JQuery UI」を初めとする「jQuery プラグイン」(「jQuery UIとプラグインライブラリ」参照)を用いることで、よりインタラクティブなWEBアプリケーションを構築することが可能です。
jQueryの入手
jQueryは、jQueryの本家サイトのダウンロードページより入手します。
「Current Release」が最新版です
ソースコードを最適化しファイルサイズをコンパクトにした「Minified」と解読のできる素のままのソースコードである「Uncompressed」の2種類があります。
一般的に利用するには「Minified」を、ソースコードを理解したい場合は「Uncompressed」を利用します。
jQueryの準備
ダウンロードしたjQueryライブラリは、WEBページ/WEBアプリケーションのドキュメントルート内にアップロードし、利用するページ内から参照します。

リスト1. jQueryの準備

<script src="./js/jquery.js" type="text/javascript"></script>
※上記src属性内は、ダウンロードしたjsファイルのパスに変更してください。
$関数
jQueryの「基本構文」は、「jQuery関数」または「$関数」です。
特に「$関数」は「jQuery関数」の別名(エイリアス)で、ソースコードを簡略化します。
但し、他のJavascriptライブラリ、特に「Prototype JavaScript Framework」(prototype.js)と混同する場合があります。
本リファレンスでは、「$関数」ではなく「jQuery関数」を用います。
基本関数
jQueryの基本構文は、「jQuery関数」とその返値である「jQueryオブジェクト」です。
また挙動はコールバック関数によって定義するのが一般的です。

リスト2. 基本構文

<script>
jQuery(document).ready(function(){
	var jq = jQuery(this);
});
</script>
jQueryはJavascriptライブラリですので、<script>要素内にコードとして記述します。
リスト2.では、二つのjQueryの使用方法を記述しています。
イベントの定義
最初の「jQuery(document).ready();」では、イベントとしてページドキュメントの準備ができた場合に実行されます。
この書き方は、<body>要素の「load」イベントと同様です。
このように、DOMオブジェクトを第1引数として jQuery関数のメソッド「ready関数」を呼び出すことでイベント時の挙動を定義することができます。
jQueryオブジェクトの生成
jQuery関数の返り値は、jQueryオブジェクトです。
jQueryオブジェクトは、様々なプロパティやメソッドを持ちます。
jQueryはそれらのプロパティやメソッドを用いてさまざまな操作やエフェクトを実行します。
jQuery関数の引数
jQuery関数は、引数により以下のように挙動が変わります。
jQuery( CSSセレクタ [,検索対象])
検索対象内から、CSSセレクタに添った要素をjQueryオブジェクトとして抽出します。
検索対象を省略すると、document全体から検索します。
CSSセレクタについては、「CSSセレクタ」を参照ください。

リスト3. 引数にCSSセレクタと適用

function sample0603(){

	// CSSセレクタでid=sample0603を選択。
	var p = jQuery('#sample0603');

	if( p.hasClass('black')){
		p.addClass('red');
		p.removeClass('black');
		p.css('color','red');
	}
	else
	{
		p.addClass('black');
		p.removeClass('red');
		p.css('color','black');
	}
}

実装例

jQuery( HTMLコード [,オーナー要素])
オーナー要素内にHTMLコードで指定した要素を追加します。
オーナー要素を省略時は、documentがオーナーになります。
なお、<input>要素の「type="inputタイプ"」など読み取り専用属性に関しては、HTMLコード内で指定してください。

リスト4. 引数にHTMLコードを適用

var num0604 = 0;
function sample0604(){

	// ボタンを追加
	var btn = jQuery('<input type="button" />').appendTo('#area0604');

	num0604++;
	btn.val('No. ' + num0604);
}

実装例

jQuery( DOM要素 )
DOM要素を用いて、jQueryオブジェクトを抽出します。
ドキュメントの準備が完了時やコールバック内での自分を示すDOM要素などがそれに当たります。

リスト5. 引数にDOM要素を適用


//ドキュメントの読み込み時の初期化
jQuery(document).ready(function(){
	//id="sample0605"をクリック時を定義
	jQuery("#sample0605").click(function(){

		// 押されたボタンのオブジェクトを抽出
		var obj = jQuery(this);

		alert(obj.val());
	});
});

jQuery( コールバック関数 )
「jQuery(document).readey(コールバック関数)」の省略形

Back to top

Information