▲jQuery開発者向けメモ

jQuery 開発者向けメモ - リファレンス

目次

目次を生成中です・・・

リファレンス

$()

jQueryオブジェクトを作り出す関数です．

$("CSS文字列")

CSSで要素を指定し，マッチした要素を持つjQueryオブジェクトを返します． 詳しい指定方法は Selectors を参照してください．

jquery 1.1 までは XPath による指定もできましたが，最新版では削除されています． XPath Compatibility Plugin を利用することで，1.2 でも XPath を利用可能です． 

var $toc_1 = $("#toc_1");
jquery_dump($toc_1);

var $h1 = $("h1");
jquery_dump($h1);

var $h1head = $("h1.head");
jquery_dump($h1head);

var $ahref = $("a[@href^='http://jquery.com/']");
jquery_dump($ahref);

$(DOM要素) / $([DOM要素の]配列)

指定したDOM要素を持つjQueryオブジェクトを返します．
eachやコールバック関数で this をラッパする場合に利用する 使い方が多いと思います． 

$(function(){
    // 初期化コード
    $("#link").click(function(){
        alert(  $(this).html()  );
        return false;
    });
});

$(jQueryオブジェクト)

jQueryオブジェクトの現在の状態と同じDOM要素集合を持ったjQueryオブジェクトを作成します．
jQueryのスタックの最新のDOM要素集合がコピーされ，スタックの全ての状態まではコピーされません． また，DOM要素自体のコピーもされません．

$("CSS文字列", コンテキスト)

指定されたコンテキストの中で，マッチする要素を持つjQueryオブジェクトを抽出し，返します．
一部の範囲に限って検索を行いたい場合に利用できます．
この段落には class="context_header" が指定されています． 

$("title",xml.reponseXML);

alert(  $("br", $(".context_header")).size()  );

jQueryオブジェクト操作

jQueryオブジェクトは，複数のDOM要素を持つことが出来ます．0個の場合もあります． それらのDOM要素に関する操作を行うメソッド群です．

size() / length

DOM要素の数を表示します．

段落

段落

段落

var $target = $("#target_jquery_size");
alert(  $("p", $target).size()  );

var $target = $("#target_jquery_size");
alert(  $("p.header", $target).size()  );

var $target = $("#target_jquery_size");
alert(  $("p", $target).length  );

get()

DOM要素を配列で取得します．

段落

段落

var $target = $("#target_jquery_get");
alert(  $("p", $target).get()  );
alert(  $("p", $target).get()[0]  );

get(N)

N番目のDOM要素を取得します．

段落

段落

var $target = $("#target_jquery_get_N");
alert(  $("p", $target).get(0)  );
alert(  $("p", $target).get(1)  );
alert(  $("p", $target).get(2)  ); // 存在しない場合は undefined が返る

[N]

N番目のDOM要素を取得します． get(N) と同じです．

段落

段落

var $target = $("#target_jquery_get_N2");
alert(  $("p", $target)[0]  );
alert(  $("p", $target)[1]  );
alert(  $("p", $target)[2]  ); // 存在しない場合は undefined が返る

each(関数)

それぞれのDOM要素に対して，指定した関数を実行します．
DOM要素がthisになって関数が実行されます． jQueryオブジェクトとして扱いたい場合は，$(this)とラッパする必要があります．

段落1

段落2

var $target = $("#target_jquery_each");
$("p", $target).each(function(){
    alert(  this  );
});

var $target = $("#target_jquery_each");
$("p", $target).each(function(){
    alert(  $(this).html()  );
});

イベント

イベントの設定を行います． HTMLでの onclick / onfocus 等と同様のことを，JavaScript側から設定することが出来ます．
ここではコアのイベント機能について説明しますが，拡張イベントというものがあり， イベントをより簡単に設定したり，マウスオーバー等の支援機能があります．
bind/unbindの代わりに，拡張イベントを使用することをお勧めします．

bind("イベント名",関数)

対象オブジェクトに関して，指定したイベントが発生した際に， 関数を呼び出すように設定します．

unbind("イベント名",関数) / unbind("イベント名")

対象オブジェクトに関して，イベントとの結びつけを解除します．
関数を指定しなかった場合は，全ての関数との結びつけが解除されます．

trigger("イベント名")

対象オブジェクトに，指定したイベントを発生させます．

DOM(基本)

attr(キー) / attr(キー,値) / attr(ハッシュ) / removeAttr(キー)

DOM要素の属性を操作します．
キーのみを指定した場合は取得，キー,値での指定や，ハッシュで指定した場合は， それらの設定値で上書きします． removeAttr() の場合は，指定した属性を削除します．
取得の場合は，最初のDOM要素が対象となります． 値を設定する場合は，全てのDOM要素が対象となります．

段落

段落

var $target = $("#target_dom_attr");
var $p = $("p", $target);
alert(  $p.attr("class")  ); // 最初の要素が対象
alert(  $target.html()  );
$p.attr("class", "danraku3"); // 全ての要素が対象
alert(  $target.html()  );
$p.removeAttr("class");
alert(  $target.html()  );

addClass(クラス名) / removeClass(クラス名) / toggleClass(クラス名)

対象のDOM要素に，指定したクラスを追加・削除，もしくはトグルします．

段落

段落

var $target = $("#target_dom_class");
var $p = $("p", $target);
$p.addClass("addclass");
alert(  $target.html()  );
$p.toggleClass("danraku1");
alert(  $target.html()  );

text()

全てのDOM要素のテキストコンテンツをつなぎ合わせた文字列を返します．

段落前テキスト

段落内テキスト

段落後テキスト 
var $target = $("#target_dom_text");
alert(  $target.text()  );
alert(  $target.html()  );

DOM(属性)

jQueryオブジェクトは複数のDOM要素を持ちますが，DOM操作を行う場合， 操作対象が場合によって異なることに注意してください．
参照の場合は最初のDOM要素，設定・書き換えの場合は全てのDOM要素が対象になります．

html() / html("HTML文字列")

DOM要素をHTMLで取得，もしくは指定したHTMLに差し替えます．

この段落は <p id="target_ref_dom_html"> です． 

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

$("#target_ref_dom_html").html("段落の内容を書き換えます．");

val() / val(値)

DOM要素の value 属性の内容を取得・設定します．

attr(キー) / attr(キー,値)

属性の取得・設定を行います．

DOM(DOM操作)

remove()

対象のDOM要素を削除します．

この段落は，<p id="target_ref_dom_remove">です． 

	$("#target_ref_dom_remove").remove();

empty()

対象のDOM要素の子要素を全て削除します．
DOM要素自体は残ります．
html() で中身を代入する際などに，いったんクリアしたい場合に利用できます．

この段落は，<p id="target_ref_dom_empty">です． 

$("#target_ref_dom_empty").empty();

append("HTML文字列") / append(DOM要素) / append([DOM要素の]配列)

対象のDOM要素の子要素の末尾に，指定されたものを追加します．

この段落は，<p id="target_ref_dom_append">です． 

$("#target_ref_dom_append").append("[[append]]");

prepend("HTML文字列") / prepend(DOM要素) / prepend([DOM要素の]配列)

対象のDOM要素の子要素の先頭に，指定されたものを追加します．

この段落は，<p id="target_ref_dom_prepend">です． 

$("#target_ref_dom_prepend").prepend("[[prepend]]");

appendTo("CSS文字列")

対象のDOM要素を，CSS指定で指定された要素の子要素の末尾に移動します．

この段落は，<p id="target_ref_dom_appendto">です．

この段落は，<p id="target_ref_dom_appendto2">です． 

$("#target_ref_dom_appendto").appendTo("#target_ref_dom_appendto2");

clone()を利用することでコピーすることも出来ます．

この段落は，<p id="target_ref_dom_appendto_copy">です．

この段落は，<p id="target_ref_dom_appendto_copy2">です． 

$("#target_ref_dom_appendto_copy").clone()
    .appendTo("#target_ref_dom_appendto_copy2");

prependTo("CSS文字列")

対象のDOM要素を，CSS指定で指定された要素の子要素の先頭に移動します．

この段落は，<p id="target_ref_dom_prependto">です．

この段落は，<p id="target_ref_dom_prependto2">です． 

$("#target_ref_dom_prependto").prependTo("#target_ref_dom_prependto2");

clone()を利用することでコピーすることも出来ます．

この段落は，<p id="target_ref_dom_prependto_copy">です．

この段落は，<p id="target_ref_dom_prependto_copy2">です． 

$("#target_ref_dom_prependto_copy").clone()
    .prependTo("#target_ref_dom_prependto_copy2");

before("HTML文字列") / before(DOM要素) / before([DOM要素の]配列)

対象のDOM要素の手前に，指定されたものを追加します．

この段落は，<p id="target_ref_dom_before">です． 

$("#target_ref_dom_before").before("[[before]]");

after("HTML文字列") / after(DOM要素) / after([DOM要素の]配列)

対象のDOM要素の後に，指定されたものを追加します．

この段落は，<p id="target_ref_dom_after">です． 

$("#target_ref_dom_after").after("[[after]]");

insertBefore("CSS文字列")

対象のDOM要素を，CSS指定で指定された要素の手前に移動します．

この段落は，<p id="target_ref_dom_insertBefore1">です．

この段落は，<p id="target_ref_dom_insertBefore2">です． 

$("#target_ref_dom_insertBefore2").insertBefore("#target_ref_dom_insertBefore1");

clone()を利用することでコピーすることも出来ます．

この段落は，<p id="target_ref_dom_insertBefore_copy">です．

この段落は，<p id="target_ref_dom_insertBefore_copy2">です． 

$("#target_ref_dom_insertBefore_copy").clone()
    .insertBefore("#target_ref_dom_insertBefore_copy2");

insertAfter("CSS文字列")

対象のDOM要素を，CSS指定で指定された要素の後に移動します．

この段落は，<p id="target_ref_dom_insertAfter">です．

この段落は，<p id="target_ref_dom_insertAfter2">です． 

$("#target_ref_dom_insertAfter").insertAfter("#target_ref_dom_insertAfter2");

clone()を利用することでコピーすることも出来ます．

この段落は，<p id="target_ref_dom_insertAfter_copy">です．

この段落は，<p id="target_ref_dom_insertAfter_copy2">です． 

$("#target_ref_dom_insertAfter_copy").clone()
    .insertAfter("#target_ref_dom_insertAfter_copy2");

clone()

対象のDOM要素を複製します．
appendTo/prependTo/insertBefore/insertAfter などのメソッドと組み合わせて使用します．
サンプルはそれぞれのメソッドを参照してください．

wrap(HTML) / wrap(DOM要素)

対象のDOM要素の外側に，指定したHTML・DOM要素を挿入します．

この段落は，<p id="target_ref_dom_wrap">です． 

$("#target_ref_dom_wrap").wrap("<p class='dotted'></p>");

remove("CSS文字列")

指定した要素だけをremove()するものと思いますが，使い方がよくわかりません．．．

DOM(jQueryオブジェクト操作)

jQueryオブジェクトが持つDOM要素を操作するメソッド群です．
jQueryオブジェクトはDOM要素の集合をスタックで持っており， 多くのメソッドは呼び出し時の状態をスタックに保存した上で， 操作を行います．
スタックを1つ前の段階に戻すには，end() メソッドを利用します．

end()

filter() 等によって変更したオブジェクトの状態を1つ前の状態に戻します．

段落1

段落2

段落3

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

filter("CSS文字列") / filter(["CSS文字列"の]配列)

DOM要素の集合を，指定したCSS指定で更に絞り込みます．
文字列の配列で指定した場合，いずれかにマッチするものに絞り込みます．

段落1

段落2

段落3

var $target = $("#target_ref_jquery_filter");
var $p = $("p", $target);
jquery_dump($p); // 全ての p タグが返されます．
jquery_dump($p.filter(".header")); // class="header" 以外のオブジェクトを削除します．

not("CSS文字列") / not(DOM要素)

filter() の否定版です．
CSS指定で指定されたもの，もしくは指定されたDOM要素を取り除きます．

段落

段落

段落

var $target = $("#target_ref_jquery_not");
var $p = $("p", $target);
jquery_dump($p); // 全ての p タグが返されます．
jquery_dump($p.not(".header")); // class="header" ではないオブジェクトを削除します．

find("CSS文字列")

DOM要素の集合に含まれる子要素から，指定したCSS指定にマッチするものを抽出します． 

var $target = $("#target_ref_jquery_find");
var $ul = $("ul", $target);
jquery_dump($ul);
jquery_dump($ul.find("li"));

next() / next("CSS文字列") / prev() / prev("CSS文字列")

next() は，DOM要素のそれぞれの集合に対して，その要素の次にある要素に置き換えます． 次の要素がない場合は，その要素は削除されます．
next("CSS文字列") の場合，next().filter("CSS文字列") と同様の動作になります． ただし，end() 1回で元の状態に戻ります．
prev() / prev("CSS文字列") は next() と異なり，その要素の前の要素に置き換えます．

段落1

段落2 

var $target = $("#target_ref_jquery_next");
var $ulnext = $("ul", $target);
jquery_dump($ulnext);
jquery_dump($ulnext.next());
jquery_dump($ulnext.next().end());

var $target = $("#target_ref_jquery_next");
var $pnext = $("p", $target);
jquery_dump($pnext);
jquery_dump($pnext.next());

var $target = $("#target_ref_jquery_next");
var $ulnext = $("ul", $target);
jquery_dump($ulnext);
jquery_dump($ulnext.next(".nextfilter"));
jquery_dump($ulnext.next(".nextfilter").end());

var $target = $("#target_ref_jquery_next");
var $pprev = $("p", $target);
jquery_dump($pprev);
jquery_dump($pprev.prev());

children() / children("CSS文字列")

DOM要素のそれぞれについて，子要素を返します．
children("CSS文字列") の場合，children().filter("CSS文字列") と同様の動作になります． ただし，end() 1回で元の状態に戻ります． 

var $target = $("#target_ref_jquery_children");
var $children = $("ul", $target);
jquery_dump($children);
jquery_dump($children.children());
jquery_dump($children.children().children());

var $target = $("#target_ref_jquery_children");
var $children = $("ul", $target);
jquery_dump($children);
jquery_dump($children.children(".top"));

parent() / parent("CSS文字列")

それぞれDOM要素の親要素を返します． ただし，共通の親を持つ要素が複数あった場合，親は１つだけ返されます．
parent("CSS文字列") の場合，parent().filter("CSS文字列") と同様の動作になります． ただし，end() 1回で元の状態に戻ります． 

var $target = $("#target_ref_jquery_parent");
var $parent = $("#target_ref_jquery_parent_2", $target);
jquery_dump($parent);
jquery_dump($parent.parent());
jquery_dump($parent.parent().parent());

var $target = $("#target_ref_jquery_parent");
var $parent = $("li", $target);
jquery_dump($parent);
jquery_dump($parent.parent());
jquery_dump($parent.parent().parent());

var $target = $("#target_ref_jquery_parent");
var $parent = $("li", $target);
jquery_dump($parent);
jquery_dump($parent.parent(".top"));

parents() / parents("CSS文字列")

それぞれDOM要素の親要素，その親要素，その親要素・・・と順に返します． ただし，ルートの要素は含まれません．
parents("CSS文字列") の場合，parents().filter("CSS文字列") と同様の動作になります． ただし，end() 1回で元の状態に戻ります． 

// このサンプルは処理が重いです．
// ダイアログが画面をはみ出した場合，Enterキーで閉じてください．
var $target = $("#target_ref_jquery_parents");
var $parents = $("#target_ref_jquery_parents_2", $target);
jquery_dump($parents);
jquery_dump($parents.parents());

var $target = $("#target_ref_jquery_parents");
var $parents = $("li", $target);
jquery_dump($parents);
jquery_dump($parents.parents(".top"));

siblings() / siblings("CSS文字列")

それぞれDOM要素の兄弟要素を返します． ただし，共通の兄弟要素が複数あった場合，ユニークな１つだけが返されます．
siblings("CSS文字列") の場合，siblings().filter("CSS文字列") と同様の動作になります． ただし，end() 1回で元の状態に戻ります．

段落 

var $target = $("#target_ref_jquery_siblings");
var $siblings = $("li.top", $target);
jquery_dump($siblings);
jquery_dump($siblings.siblings());

var $target = $("#target_ref_jquery_siblings");
var $siblings = $("ul", $target);
jquery_dump($siblings);
jquery_dump($siblings.siblings());

var $target = $("#target_ref_jquery_siblings");
var $siblings = $("ul", $target);
jquery_dump($siblings);
jquery_dump($siblings.siblings(".top"));

add("CSS文字列") / add(DOM要素) / add([DOM要素の]配列)

DOM要素の集合に，CSS文字列でマッチした要素，もしくは指定したDOM要素を加えます．
CSS文字列を指定する場合，対象はドキュメント全体になり，$("CSS文字列", context) の ような形式で範囲を指定することは出来ません．

段落1 

var $target = $("#target_ref_jquery_add");
var $add = $("ul", $target);
jquery_dump($add);
jquery_dump($add.add("#target_ref_jquery_add2"));

var $target = $("#target_ref_jquery_add");
var $add = $("ul", $target);
jquery_dump($add);
jquery_dump($add.add($("p", $target)[0])); // DOM要素を追加します

CSS

css(キー) / css(キー,値) / css(ハッシュ)

CSSの属性を操作します．
キーのみを指定した場合は取得，キー,値での指定や，ハッシュで指定した場合は， それらの設定値で上書きします．
取得の場合は，最初のDOM要素が対象となります． 値を設定する場合は，全てのDOM要素が対象となります．

エフェクト

hide() / show()

show() は指定された要素を非表示状態から表示状態に変更します． すでに表示状態であれば何もしません．
hide() は指定された要素を表示状態から非表示状態に変更します． すでに非表示状態であれば何もしません．

この段落は<p id="target_ref_effect_show">です． 

$("#target_ref_effect_show").hide();

$("#target_ref_effect_show").show();

toggle()

指定された要素の表示・非表示を切り替えます．

この段落は<p id="target_ref_effect_toggle">です． 

$("#target_ref_effect_toggle").toggle();

基本エフェクト (Basic Animations)

[Configure Your Download] した場合，[Basic Animations]を選択していないと，以下の関数は利用できません．

show(速度) / show(速度,コールバック関数)
/ hide(速度) / hide(速度,コールバック関数)

show() / hide() は要素のサイズを変更しつつ，表示する，もしくは非表示にします．
表示中の要素に show() を使用したり，その逆を行うと，余計なアニメーションが実行されることがあります． これを防ぐためには，要素の指定に :hidden，:visible を利用してください．
速度は，"fast", "normal", "slow" のいずれかを指定するか，ms(1/1000秒)単位の数値で指定します．
第2引数にコールバック関数を指定すると，アニメーションが完了したときに コールバック関数が呼び出されます．

この段落は<p id="target_ref_effect_show_speed">です． 

$("#target_ref_effect_show_speed").hide("slow");

$("#target_ref_effect_show_speed").show(2000);

$("#target_ref_effect_show_speed:visible").hide("slow",
    function(){
        alert(  "animation done."  );
    });

$("#target_ref_effect_show_speed:hidden").show("normal");

slideDown(速度) / slideDown(速度,コールバック関数)
/ slideUp(速度) / slideUp(速度,コールバック関数)
/ slideToggle(速度) / slideToggle(速度,コールバック関数)

slideDown() / slideUp() は要素をスライドさせつつ，表示する，もしくは非表示にします．slideToggle() は，表示・非表示を切り替えます．
表示中の要素に slideDown() を使用したり，その逆を行うと，余計なアニメーションが実行されることがあります． これを防ぐためには，要素の指定に :hidden，:visible を利用してください．
速度は，"fast", "normal", "slow" のいずれかを指定するか，ms(1/1000秒)単位の数値で指定します．
第2引数にコールバック関数を指定すると，アニメーションが完了したときに コールバック関数が呼び出されます．

この段落は<p id="target_ref_effect_slide">です． 

$("#target_ref_effect_slide").slideDown(2000);

$("#target_ref_effect_slide").slideUp("slow");

$("#target_ref_effect_slide:hidden").slideDown("normal");

$("#target_ref_effect_slide:visible").slideUp("slow",
    function(){
        alert(  "animation done."  );
    });

$("#target_ref_effect_slide").slideToggle("normal");

fadeIn(速度) / fadeIn(速度,コールバック関数)
/ fadeOut(速度) / fadeOut(速度,コールバック関数)
/ fadeTo(速度,透明度) / fadeTo(速度,透明度,コールバック関数)

fadeIn() / fadeOut() は要素をフェードさせ，表示する，もしくは非表示にします． fadeTo() は指定された透明度までアニメーションさせます．
対象となるオブジェクトは，幅・高さがすでに決定していなければなりません．
表示中の要素に fadeIn() を使用したり，その逆を行うと，余計なアニメーションが実行されることがあります． これを防ぐためには，要素の指定に :hidden，:visible を利用してください．
速度は，"fast", "normal", "slow" のいずれかを指定するか，ms(1/1000秒)単位の数値で指定します．
第2引数または第3引数にコールバック関数を指定すると，アニメーションが完了したときに コールバック関数が呼び出されます．

この段落は<p id="target_ref_effect_fade">です． 

$("#target_ref_effect_fade").fadeIn(2000);

$("#target_ref_effect_fade").fadeOut("slow");

$("#target_ref_effect_fade:hidden").fadeIn("normal");

$("#target_ref_effect_fade:visible").fadeOut("slow",
    function(){
        alert(  "animation done."  );
    });

$("#target_ref_effect_fade").fadeTo("slow", 0.5);

$("#target_ref_effect_fade").fadeTo("slow", 0.1);

animate(パラメータ,速度,コールバック関数)

高さ，透明度などのパラメータを指定して，アニメーションをさせるメソッドです．
パラメータには，"height", "top", "opacity" などを，どのように変化させるか "show", "hide", 数値で指定します．
速度は，"fast", "normal", "slow" のいずれかを指定するか，ms(1/1000秒)単位の数値で指定します．
第3引数にコールバック関数を指定すると，アニメーションが完了したときに コールバック関数が呼び出されます．

この段落は<p id="target_ref_effect_animate">です． 

$("#target_ref_effect_animate").animate({
    width: 200
}, "slow");

$("#target_ref_effect_animate").animate({
    width: 500
}, "slow");

$("#target_ref_effect_animate").animate({
    opacity: 'show',
    height: 'show'
}, "slow");

$("#target_ref_effect_animate").animate({
    opacity: 'hide',
    height: 'hide'
}, "slow");

拡張イベント (Advanced Events)

event(関数)
/ unbind(event,関数)
/ one(event,関数)

イベントの設定を行います． HTMLでの onclick / onfocus 等と同様のことを，JavaScript側から設定することが出来ます．
斜体のeventのところに，設定したいイベント名を記述します． 記述できるイベントは以下の通りです．

blur,focus,load,resize,scroll,unload,click,dblclick, mousedown,mouseup,mousemove,mouseover,mouseout,change,reset,select, submit,keydown,keypress,keyup,error

event() でイベントに関数を結びつけます．
unbind(event,関数) で，イベントの結びつけを解除します．関数を指定しなければ，全ての結びつけが解除されます．
one(event,関数) は，イベントに関数を結びつけますが，一度イベントが発生すると 結びつけが解除されます．
複数回結びつけると，その回数だけ関数が実行されることに注意してください．

この段落は<p id="target_ref_event">です． 

$("#target_ref_event").click(function(){
    alert(  "clicked!"  );
});
// このサンプルを実行後，上の点線の段落をクリックしてみてください．

$("#target_ref_event").unbind('click');

$("#target_ref_event").one('click', function(){
    alert(  "clicked!"  );
});
// このサンプルを実行後，上の点線の段落をクリックしてみてください．
// 最初の1回だけalertがポップアップします．

ready(関数)

$(document).ready(関数) の形で利用し， ドキュメントがロードされたときに初期化処理を実行します．
この長い文字列の代わりに，短く $(関数) と書くことが出来ますので， こちらを利用することをお勧めします． 

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

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

hover(over関数,out関数)

マウスオーバー処理を行うためのイベントを設定します．
マウスが対象オブジェクトに入ったときに over関数 が呼び出され， 出たときに out関数 が呼び出されます．

この段落は<p id="target_ref_event_hover">です． 

$("#target_ref_event_hover").hover(function(){
    // 対象オブジェクトに入った
    $(this).addClass("background_red");
}, function(){
    // 対象オブジェクトから抜けた
    $(this).removeClass("background_red");
});
// このサンプルを実行後，上の点線の段落にマウスカーソルを移動してみてください．

toggle(関数1,関数2)

対象オブジェクトがクリックされるたびに，関数1，関数2を交互に呼び出します．

この段落は<p id="target_ref_event_toggle">です． 

$("#target_ref_event_toggle").toggle(function(){
    // (0から数えて)偶数回目のクリック
    $(this).addClass("background_red");
}, function(){
    //(0から数えて)奇数回目のクリック
    $(this).removeClass("background_red");
});
// このサンプルを実行後，上の点線の段落をクリックしてみてください．

Ajax (Basic AJAX)

[Configure Your Download] した場合，[Basic AJAX]を選択していないと，以下の関数は利用できません．
様々なメソッドを利用したAjaxメソッドテストページも参照して下さい．

load(url,params,callback)

Ajaxでリモートのファイルを読み込み，置き換えます．
callback関数を指定した場合，第1引数にリモートのファイル内容，第2引数にステータスが帰ります． ステータスは，"success" か "error" のどちらかです．
paramsを指定した場合はPOSTメソッド，指定しない場合はGETメソッドになります．

この段落は，<p id="target_ref_ajax_load">です． 

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

$("#target_ref_ajax_load").load("hello.html", function(html, status){
    alert(  "html: " + html + "\nstatus: " + status  );
});

$("#target_ref_ajax_load").load("notfound.html", function(html, status){
    alert(  "html: " + html + "\nstatus: " + status  );
});

Ajaxメソッドテストページも参照して下さい．

$.get(url,params,callback)

AjaxでリモートのファイルをGETメソッドで読み込み，ファイル内容を返します．
引数の指定方法は $.load() と同様です．

Ajaxメソッドテストページも参照して下さい．

$.post(url,params,callback)

AjaxでリモートのファイルをPOSTメソッドで読み込み，ファイル内容を返します．
引数の指定方法は $.load() と同様です．

Ajaxメソッドテストページも参照して下さい．

タイムアウト

Ajax系の関数・メソッドのタイムアウトは $.ajaxSetup() 関数で指定できます． ms単位（1/1000秒）で指定でき，0を指定した場合は，タイムアウト処理を行いません． デフォルトでは0が設定されています．
タイムアウト時間待ってもリクエストが完了しない場合，error扱いとなります．
hello_timeout.cgi は5秒間応答を返さないCGIです． ブラウザのキャッシュを防ぐために，パラメータを追加しています．

この段落は <p id="target_ref_ajax_load_timeout"> です． 

$.ajaxSetup({
	timeout: 2000   // 単位はms
});
$("#target_ref_ajax_load_timeout").load("hello_timeout.cgi", {
    timekey: 1
    }, function(text, status) {
    alert(  "text: " + text + "\nstatus: " + status  );
});

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

Ajaxメソッドテストページも参照して下さい．

ajaxStart(コールバック関数) / ajaxStop(コールバック関数)
/ ajaxComplete(コールバック関数) / ajaxError(コールバック関数) / ajaxSuccess(コールバック関数)

Ajax呼び出しに関するグローバルなコールバック関数を設定します．
読み込み中にアニメーションを表示させる，等の目的で利用できます．
Ajax リクエストが実行中になったときに ajaxStart のコールバックが呼び出され， 全てのリクエストの実行が完了したときに ajaxStop のコールバックが呼び出されます．
同時に複数のリクエストが実行された場合，ajaxStart/ajaxStopは最初と最後に1回ずつ呼び出されます．
ajaxComplete / ajaxError / ajaxSuccess は，Ajaxリクエストが完了・失敗・成功したときに， リクエスト毎に呼び出されます．
1回のリクエストで，ajaxCompleteが1回と，ajaxError/ajaxSuccessのどちらかが1回呼び出されます． 

$("#loading").ajaxStart(function(){
    $(this).show();
});
$("#loading").ajaxStop(function(){
    $(this).hide();
});

Ajaxメソッドテストページも参照して下さい．
ajaxStart/ajaxStopで画面上部にアニメーションを表示しています．

ユーティリティ関数

ユーティリティ関数群です．$.method という形式で利用できるようになっています．

$.each(オブジェクト/配列,関数)

オブジェクトまたは配列の全ての要素に対して，指定した関数を呼び出します．
配列に対して実行した場合，関数の第1引数に配列の添字（0始まり）が，this に要素が渡されます．
オブジェクトに対して実行した場合，関数の第1引数にキーが，this に値が渡されます． 

// 配列の場合
$.each(["い","ろ","は"], function(i){
    alert(  "配列[" + i + "] = " + this  );
});

// オブジェクトの場合
$.each({ key1: "value1", key2: "value2" }, function(i){
    alert(  "引数: " + i + "\n値: " + this  );
});

$.extend(オブジェクト1,オブジェクト2)

オブジェクト1にオブジェクト2の内容を加えます．
継承を行う時に利用できます． 

var settings = { key1: 1, key2: 2 };
var add = { key2: "あ", key3 : "い" };
$.extend(settings, add);
$.each(settings, function(i) {
    alert(  "引数: " + i + "\n値: " + this  );
});

$.grep(配列,関数,反転フラグ)

配列の各要素に対して関数を実行し，その結果によって配列から要素を取り出します． 元の配列は変更されません．
反転フラグがfalseの場合は，関数の実行結果が true の要素を取り出します． 反転フラグがtrueの場合，その逆になります． 省略した場合，反転フラグは false として扱われます． 

var data = [1,2,3,4];
var data2 = $.grep(data, function(i){
    return (i % 2 == 0);
});
$.each(data2, function(i){
    alert(  "配列[" + i + "] = " + this  );
});

var data = [1,2,3,4];
var data2 = $.grep(data, function(i){
    return (i % 2 == 0);
}, true);
$.each(data2, function(i){
    alert(  "配列[" + i + "] = " + this  );
});

$.map(配列,関数)

配列の各要素に対して関数を実行し，その関数の戻り値の配列を返します． 元の配列は変更されません．
関数が値を返せばその値がそのまま戻り値に含まれます． 関数がundefinedを返した場合は戻り値には含まれません． 関数が配列を返した場合は，配列オブジェクトではなく，それぞれの値が戻り値の配列に追加されます． 

var data = [1,2,3];
var data2 = $.map(data, function(i){
    return i * 10;
});
$.each(data2, function(i){
    alert(  "配列[" + i + "] = " + this  );
});

var data = [1,2,3];
var data2 = $.map(data, function(i){
	if(i == 2) {
		return undefined;
	}
	return i * 10;
});
$.each(data2, function(i){
    alert(  "配列[" + i + "] = " + this  );
});

var data = [1,2];
var data2 = $.map(data, function(i){
	return [i*10, i*100];
});
$.each(data2, function(i){
    alert(  "配列[" + i + "] = " + this  );
});

$.merge(配列1,配列2)

指定された2つの配列をマージしますが，重複は取り除きます． 元の配列は両方とも変更されません．
重複がある場合，まず配列1の内容が全て返された後，配列2のうち配列1と重複していないものが返されます． 配列1の中で重複している要素や，配列2の中で重複している要素は，存在する個数分返されます． 

var data1 = [1,2];
var data2 = [3,4];
var mergedata = $.merge(data1, data2);
$.each(mergedata, function(i){
    alert(  "配列[" + i + "] = " + this  );
});

var data1 = [1,2,1];
var data2 = [4,2,3,1,3];
var mergedata = $.merge(data1, data2);
$.each(mergedata, function(i){
    alert(  "配列[" + i + "] = " + this  );
});

$.trim(文字列)

文字列の前後にある空白を取り除いた文字列を返します． 

var str = "  こんにちは  ";
alert(  "[" + str + "]"  );
str = $.trim(str);
alert(  "[" + str + "]"  );

// タブや改行も空白とみなされます
var str = "\tこんにちは\n";
alert(  "[" + str + "]"  );
str = $.trim(str);
alert(  "[" + str + "]"  );

// 全角空白も取り除けます
var str = "　こんにちは　";
alert(  "[" + str + "]"  );
str = $.trim(str);
alert(  "[" + str + "]"  );


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