▲jQuery開発者向けメモ

jQuery 開発者向けメモ - 基本・サンプル

目次

目次を生成中です・・・

基本

jQueryとは

jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです. 独自のXPATH/CSSセレクタを利用することで,多くのDOM操作を非常に簡単に書くことが出来ます.
JavaScriptのDOM操作や,XMLHTTPRequest,XMLの操作などを覚えなくとも, Ajaxを利用したインタラクティブなページを作ることが出来ます.
以下のサンプルを見れば,JavaScriptらしい表記をほとんどする必要がないことがわかると思います.

toggleサンプル

特定のブロックの表示・非表示を切り替えるのは以下のようなコードになります.

$("#target_toggle").toggle("slow");

このブロックは,<p id="target_toggle"> です.

Ajaxサンプル

Ajaxでhello.htmlをロードするのは以下のようなコードで出来ます.

$("#target_load").load("hello.html");

目次の自動生成

このドキュメントの目次も,jQueryを使ってH1~H6タグから自動生成しています. このページで読み込んでいる,jquery_site.js ファイルを確認してみてください.

基本的な使い方

上記のサンプルのように,jQuery では対象のDOM要素を $() で選択してから, .toggle() 等のメソッドを使い操作を加えます.
$() 関数を呼ぶと,選択されたDOM要素を持つ jQuery オブジェクトが返されます. jQuery オブジェクトには,エフェクトを加えたり,Ajaxロードを実行するためのメソッドがあります. jQuery オブジェクトのメソッドは,プラグインで拡張することができます.
また,jQuery オブジェクトに対する操作ではないメソッドも $.get() 等,$. から 始まる名称で用意されており,JavaScript 内で処理を進めたいときに利用できます.
上記のサンプルでは,$("#ID") で特定のIDを持つものを選択し,.toggle() や .load() メソッドで操作を加えています.

ダウンロード

本家サイトからダウンロードしてください.
Downloading jQuery

圧縮をしておらず,開発時の状態のままの Uncompressed 版と, 圧縮を行った Packed 版と Minified 版があります.
通常は Minified版かPacked版を使うと良いと思いますが, 開発中はデバッグがやりにくくなるため,Uncompressed版を利用することをおすすめします.
Minified版とPacked版の違いは,MinifiedはJavaScriptの文自体はそのままに,空白を詰めたものです. Packed版は,ソースコードを圧縮し,ロード後にJavaScriptで圧縮されたjQueryコードを解凍し,実行することで更に小さくしたものです. ファイルサイズはPacked版の方が小さいですが,クライアント側でJavaScriptの解凍処理が走るので,クライアントPCへの負担は大きくなります.

$()関数(基本)

jQuery の一番基本となる操作は,$() です. この関数でHTML内から操作したい対象を選択し,様々な操作を行います.
$() 関数は,CSS と同様の指定と, XPath による指定の両方が利用できます.
$() 関数を使うと,複数のDOM要素を持った jQuery オブジェクトが返されます.
ここでは,基本の使い方だけを紹介します.

IDによる指定

#を先頭に付けることでID指定で選択できます.この方法は処理速度も高速です.
この説明文は <p id="target_id"> ブロックの中に書かれています.

alert(  $("#target_id").html()  );

タグの種類による指定

タグの種類を書けば,そのタグが抽出できます.
該当するタグが複数ある場合,複数のオブジェクトが選択されます.
.html() メソッドは,最初のオブジェクトのHTMLコードを表示するメソッドですが, 複数のオブジェクトに同時に効果を加えるメソッドもあります.

alert(  $("pre").html()  );
$("pre").addClass("background_red");
$("pre").removeClass("background_red");

classによる指定

クラス名の前に . を付ければ,指定したクラスを選択できます.
タグの種類による指定と兼用することももちろん可能です.

alert(  $(".run").html()  );
alert(  $("pre.run").html()  );

チェイン

多くのメソッドは,jQueryオブジェクトを返します. このため,複数の操作を続けて指定することが出来ます.

$("#target_chain").css("background-color", "#fff0ff")
	.fadeOut("slow");
$("#target_chain").css("background-color", "#efffff")
	.fadeIn("slow");

エフェクト

show() / hide()

show() / hide() メソッドで,指定した要素の表示・非表示を切り替えることが出来ます.
引数として "slow", "normal", "fast" を付けるとアニメーションします. ただし,アニメーションは要素のサイズが決まらないケースなどでうまく動かないことがあるようです. その場合は,アニメーション無しにすると動作するようです.
この説明文は <p id="target_effect"> ブロックの中に書かれています.

$("#target_effect").hide();
$("#target_effect").show();
$("#target_effect").hide("fast");
$("#target_effect").show("slow");

slideDown() / slideUp()

slideDown() / slideUp() メソッドで,スライドさせるアニメーションをすることが出来ます.
引数として "slow", "normal", "fast" でアニメーション速度を指定します.
この説明文は <p id="target_effect_slide"> ブロックの中に書かれています.

$("#target_effect_slide").slideUp("slow");
$("#target_effect_slide").slideDown("slow");

fadeIn() / fadeOut()

fadeIn() / fadeOut() メソッドで,フェードイン・フェードアウトが出来ます.
引数として "slow", "normal", "fast" でアニメーション速度を指定します.
この説明文は <p id="target_effect_fade"> ブロックの中に書かれています.

$("#target_effect_fade").fadeOut("slow");
$("#target_effect_fade").fadeIn("slow");

Ajax

load()

load() メソッドで,対象オブジェクトの中身を Ajax ロードしたコンテンツと差し替えることが出来ます.
hello.htmlをこの下の段落にロードします.

この段落は <p id="target_ajax_load"> です.

$("#target_ajax_load").load("hello.html");

パラメータを与えたい場合は,2番目の引数に指定することが出来ます. パラメータを指定した場合,POSTメソッドになります.
パラメータを指定しない場合,GETメソッドになるため,ブラウザによりリクエスト結果が強力にキャッシュされます. キャッシュをされたくない場合,$.ajaxSetup() メソッドでキャッシュしないように指定します. (URLの末尾に「?_=ユニークな数字」が自動的に付与されます.)

$("#target_ajax_load").load("hello.cgi", {
	name: "mikage",
	pageid: 3
});
$.ajaxSetup({
	cache: false
});
$("#target_ajax_load").load("hello.html");

3番目の引数(パラメータを与えない場合2番目)には,コールバック関数を指定することが出来ます.
ロードが完了すると,コールバック関数が呼び出されます. コールバック関数の中では,this が置き換え対象のDOM要素そのものになります. $(this) とすることで jQuery オブジェクトとして扱えるようになります.
また,コールバック関数の1番目にはテキスト内容,2番目にはステータスが返されます. 成功時は "success",失敗時は "error" が帰ります.

$("#target_ajax_load").load("hello.html", function(text, status) {
	$(this).css("background-color", "#ffe0ff");
	alert(  "text: " + text + "\nstatus: " + status  );
});

$.ajaxSetup()

$.ajaxSetup() で Ajax の様々なオプションを指定できます. キャッシュの有無,ifModified によるキャッシュの利用,リクエストのタイムアウト時間などを指定できます. タイムアウトは動的なコンテンツを返す際,システムがなかなか応答を返さないときにエラー表示をしたい場合に利用できます.
hello_timeout.cgi は5秒間応答を返さないCGIです. ブラウザのキャッシュを防ぐために,パラメータを追加しています.

この段落は <p id="target_ajax_load_timeout"> です.

$.ajaxSetup({
	timeout: 2000   // 単位はms
});
$("#target_ajax_load_timeout").load("hello_timeout.cgi", {
	timekey: 1
	}, function(text, status) {
	alert(  "text: " + text + "\nstatus: " + status  );
});
$.ajaxSetup({
	timeout: 0   // 0指定でタイムアウト無しになります
});
$("#target_ajax_load_timeout").load("hello_timeout.cgi", {
	timekey: 1
	}, function(text, status) {
	alert(  "text: " + text + "\nstatus: " + status  );
});

HTMLとコードの分離

jQuery では,HTMLとJavaScriptコードを容易に分離することが出来ます. ここではその方法について説明します.

$(function(){})

HTMLとJavaScriptコードを分離する場合,HTMLが読み込み終わった後で, 必要なイベントを設定します.
jQueryでは,HTMLが読み込み終わった後に実行するコードを,onload ではなく, $(function(){}) を利用して実行します.
onload の場合は,ページの全ての画像が読み込まれるまで実行されませんが, $(function(){}) を利用すると,HTMLドキュメントの準備が出来た段階で 実行させることが出来ます.
$(function(){}) は複数回指定することができるので, 別ファイルに分離したJavaScriptコードの中でも利用できます.

$(function(){
    // HTMLロード後に実行したい初期化コード
});

この記述は,$(document) に対する .ready() メソッドと同じです.
以前のバージョンでは,$(function(){}) は無く,ready() メソッドを 使用していたため,プラグイン等,他のソースを見ると以下の 記述を目にすることがあるかもしれません.

$(document).ready(function(){
    // HTMLロード後に実行したい初期化コード
});

click()

click() で,onclick イベントを設定できます. ready() の中で,clickメソッドを使ってイベントを設定することで, HTMLコードの中からJavaScriptコードを分離できます.
同様に,sumbit,focus 等のメソッドもあります.

// JavaScriptコード部分
<script type="text/javascript">
$(function(){
    $("#popup_alert").click(function(){
        alert(  "popup"  );
        return false;
    });
});
</script>
</head>
<body>
// HTML部分
<a href="" id="popup_alert">alertポップアップ</a>

DOM要素の操作

$()によるセレクタは便利で,ほとんどの場合は $() を一度実行するだけで 目的のDOM要素を得ることが出来ると思います. しかし,filter() メソッドなどを使うことで,jQuery オブジェクトのDOM要素から 更に一部を絞り込んで,処理を加えることも可能です.
$() によるセレクト処理は,場合によっては時間がかかります. そのような場合に,無駄な処理を省くために,filter() メソッドなどが 活用できることがあります.
filter() メソッド等は,呼び出し前の状態に新しく絞り込みを実行し,その結果を返します. また,end() メソッドを実行すると,filter() を行う以前の状態に戻します.
ただし,実行した元のオブジェクトが変更されるわけではないので,チェインしない場合は end() メソッドを呼び出さなくてもかまいません.
注:jQuery 1.0 では,元のオブジェクトが変更されていたため,必ず end() を呼ぶ必要がありました.

段落1

段落2

段落3

var $target = $("#target_jquery_object");
var $p = $("p", $target);
jquery_dump($p); // 全ての p タグが返されます.
jquery_dump($p.filter(".header"));         // class="header" 以外のオブジェクトを削除します.
jquery_dump($p); // 元のオブジェクトは変更されません.
jquery_dump($p.filter(".header").end());   // filter後に元の状態に戻します.

プラグインを使う

jQuery は,色々な機能をプラグインで拡張することが出来ます.
プラグインを使うには,ファイルを入手し,jquery.js の後にプラグインのJavaScriptをロードします. そうすると,プラグインの関数・メソッドが利用可能になります.
プラグインの関数は,通常の jQuery の関数・メソッドと同様に,$("#id").method() や $.method() で使用することが出来ます.

  <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  <script type="text/javascript" src="jquery.scrollTo-min.js"></script>

scrollToサンプル

このページでは,「目次」と各説明のスクロールに scrollTo プラグインを使用しています. $.scrollTo() メソッドにスクロール先オブジェクトを渡すと, かっこよくスムーズにスクロールします.

$.scrollTo("#toc", 300);  // 目次へスクロール

サンプル

チェックボックスの操作

チェックボックスの操作サンプル
チェックボックスの操作を行うサンプルです. 「全てチェック」や「全てチェック解除」を行います.

なお,この例ではcheckboxのattrを直接変更していますが, jQuery 1.2 では,

	$("input[@type='checkbox']").val(["音楽", "アウトドア"]);
のように記載することも可能です. val() メソッドでは,checkbox/radioだけでなく,selectに関しても内側のoptionタグを含めて面倒をみてくれるので, 状況に応じて使い分けると便利です.



jQuery開発者向けメモ
mikage's page.