サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
semooh.jp
要素を指定した他の要素の後に挿入する。 例えば $(A).after(B) とした場合にAの後にBが挿入されるのに対して、$(A).insertAfter(B) ではBの後にAが挿入される。 両方のサンプルを見て、違いに注意すること。
<p>Test Paragraph.</p> <input type="text" size="100" /> $("p").text("<b>Some</b> new text."); $("input").val($("p").html());
各要素の透明度を操作して、表示されている要素をフェードアウトさせます。 アニメーション効果は指定したスピードで実行されます。 速度は、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。 省略された場合は、”normal”が用いられます。 また、効果が完了した際に呼び出される関数を第二引数に指定することも出来ます。
<p><b>Values: </b></p> <form> <input type="text" name="name" value="John"/> <input type="text" name="password" value="password"/> <input type="text" name="url" value="http://ejohn.org/"/> </form> $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );
<ul> <li>One</li> <li>Two</li> <li class="hilite">Three</li> <li>Four</li> </ul> <ul> <li>Five</li> <li>Six</li> <li>Seven</li> </ul> <ul> <li>Eight</li> <li class="hilite">Nine</li> <li>Ten</li> <li class="hilite">Eleven</li> </ul> <p>Unique siblings: <b></b></p> var len = $(".hilite").siblings() .css("color", "red") .length; $("b").text(len);
各要素のdblclickイベントに関数をbindします。 dblclickイベントは通常、要素がマウスなどのポインティングデバイスでダブルクリックされた場合に呼び出されます。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。
<div></div> <div id="first"></div> <div id="second"></div> <div id="third"></div> <div id="fourth"></div> <div id="fifth"></div> <div id="sixth"></div> <div></div> $("div").css("background", "#b4b0da") .filter(function (index) { return index == 1 || $(this).attr("id") == "fourth"; }) .css("border", "3px double red");
p { margin: 4px; font-size:16px; font-weight:bolder; } .blue { color:blue; } .under { text-decoration:underline; } .highlight { background:yellow; } <p class="blue under">Hello</p> <p class="blue under highlight">and</p> <p class="blue under">then</p> <p class="blue under">Goodbye</p> $("p:even").removeClass("blue");
配列/オブジェクトを問わずに汎用的に用いることができる、繰り返し処理用の関数です。 この関数は、jQueryオブジェクトのプロトタイプに実装されている $().each() とは異なります。こちらは、引数で渡した単なる配列やjQueryでないオブジェクトも繰り返し操作することができます。 コールバック関数は2つの引数を持ちます。 1番目はオブジェクトであればハッシュKEY、配列であればインデックスを受け取ります。 2番目には、値が受け渡されます。 繰り返し処理中にループを抜けたい場合（一般的なループ処理で言うところのbreak）、コールバック関数でfalseを返すことで実装できます。それ以外の値を返した場合は、無視されます。 配列とオブジェクトを用意します。 配列は、繰り返しながら対応するidを持つdiv要素に、テキストとして自分のidを入れていきます。但し、ループ中に"four"が出てき
文字列の先頭と末尾から、空白を除去します。 渡された文字列から、正規表現で空白と見做されるものを除去します。 そのため、改行コードや全角のブランクであっても、空白として処理されます。 サンプル サンプル1 $("button").click(function () { var str = " \n lots of spaces before and after "; alert("'" + str + "'"); str = jQuery.trim(str); alert("'" + str + "' - no longer"); });
各要素のイベントに、1度だけ呼び出される関数をbindします。 登録したコールバック関数は、各要素で1度だけ呼び出されます。それ以外の動作については、bind関数と同じです。 イベントハンドラにはeventオブジェクトが渡され、イベントやバブリングをキャンセルすることができます。あるいは、戻り値にfalseを返すことで両方をキャンセルすることが可能です。 多くの場合、コールバック関数は無名関数で作成できるでしょう。それが不可能な場合は関数ポインタを渡すことになりますが、その場合は第二引数を用いて追加データを受け渡すことが可能です。（その場合、関数ポインタは第三引数になります）
要素がクリックされる毎に、引数で渡した関数を順番に呼び出します。 最初に要素をクリックすると、第一引数に渡した関数が実行されます。もう1度クリックすると、第二引数に渡した関数が実行されます。以降、クリックされる度に関数が順に実行され、最後まで行くと最初の関数が実行されます。 jQuery1.2.6から、この関数は複数の引数を取れるようになりました。 それ以前のバージョンでは、引数は最初の2つだけが有効です。 また、この関数を設定した後で削除するには、unbind("click")である必要がありました。 これも1.2.6以降では、直接unbind("toggle")とすることが可能になっています。
エレメントの集合から、指定したポジションのエレメントだけを取り出す。 ゼロからlength-1までのうちから、合致する位置にあるエレメントだけが戻される。
各要素のkeydownイベントに関数をbindします。 keydownイベントは通常、キーボードの何かのキーが押し込まれた際に呼び出されます。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。
各要素のscrollイベントに関数をbindします。 scrollイベントは、文書がスクロールした際に呼び出されます。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。 <div>Try scrolling the iframe.</div> <p>Paragraph - <span>Scroll happened!</span></p> $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $(window).scroll(function ()
要素のクローンを作成し、そのクローンを選択状態にする。 この関数は、ある要素のコピーを作成してDOMの他の場所に配置する際に便利である。
function showValues() { var fields = $(":input").serializeArray(); $("#results").empty(); jQuery.each(fields, function(i, field){ $("#results").append(field.value + " "); }); } $(":checkbox, :radio").click(showValues); $("select").change(showValues); showValues();
<p></p> <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> function displayVals() { var singleValues = $("#single").val(); var multipleValues = $("#multiple").val() || []; $("p").html("<b>Single:</b
要素集合から引数にインデックスを指定し、ひとつだけの要素を選択する。 インデックスは0から全要素数-1までの連番。
<p> Hello, <span>Person</span> <a href="javascript:;">and person</a> </p> <button>Call empty() on above paragraph</button> $("button").click(function () { $("p").empty(); });
最初の要素の高さをピクセル単位で取得します。 jQuery1.2からは、このメソッドでwindowやdocumentの高さも取得できるようになりました。 ボタンをクリックすると、高さを表示します。 サンプルプログラムはiframe内で動いているので、windowの高さは黄色い部分の値になります。予期したよりも小さい値が表示されているかもしれません。その場合は、単独で開いて確認してみて下さい。 <button id="getp">Get Paragraph Height</button> <button id="getd">Get Document Height</button> <button id="getw">Get Window Height</button> <div> </div> <p> Sample paragraph to test height </p> function
要素の中身を他の要素の先頭に挿入する。 例えば $(A).prepend(B) とした場合にAにBが挿入されるのに対して、$(A).prependTo(B) ではBにAが挿入される。 両方のサンプルを見て、違いに注意すること。
この関数は、エレメントとマッチさせるCSSセレクターを含む文字列を受け取る。 jQueryの核になる関数である。jQueryの全てはこの関数を基本にしているか、もしくは何がしかの形で使っている。 この機能の最も基本的な利用方法は、合致するエレメントを抽出するためのexpression（大抵はCSSを含む）を受け取ることである。 もしcontextが何も指定されなければ、$()関数は現在のHTMLのDOMエレメントを検索する。 逆にDOMエレメントやjQueryオブジェクトなどのcontextが指定されれば、expressionはそのcontextに対して合致するものを捜します。 expressionの文法については、Selectorsのページを参照。
要素に関連付けられた、指定された名前の値を返します。 ここで指定する要素は、あくまでDOMの要素であることに注意して下さい。 操作中の要素がjQueryオブジェクトである場合、get()などを用いてDOM要素を抽出する必要があります。 <div id="adiv">DIV要素</div> <button>"blah" に "hello" を代入</button> <button>"blah" に 86 を代入</button> <button>"blah" の値を削除</button> <p>DIV要素の "blah" の現在値は <span>?</span> です。</p> $("button").click(function(e) { var adiv = $("#adiv").get(0); var value; switch ($("button").index(this)) {
jQueryオブジェクトそのものを拡張する。 jQuery.fn.extendがjQueryオブジェクトのプロトタイプを拡張するのに対して、このメソッドはjQuery名前空間に新たなメソッドを追加する。
各要素のblurイベントに関数をbindします。 blurイベントは通常、要素がマウスなどのポインティング・デバイスやタブキーなどでフォーカスを失ったタイミングで発生します。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。
HTTP(GET)通信でページを読み込みます。 シンプルなGETリクエストを送る簡単な方法で、複雑な$.ajax関数を使わずにサーバと通信ができます。通信の完了時に実行される関数を引数で指定することも可能ですが、これは成功時のみ実行されるので、失敗時と成功時の両方をカバーするには、$.ajaxを使う必要があります。
全ての要素をドキュメントから削除する。 この関数は、jQueryオブジェクトからは要素を削除しません。jQueryオブジェクト上では、引き続き要素の操作をすることが可能です。 ver1.2.2から、この関数はイベントハンドラや内部キャッシュデータも削除するようになります。ですので、 $("#foo").remove().appendTo("#bar"); というコードは、もし$(”#foo”)が持つイベントを失いたくないのであれば $("#foo").appendTo("#bar"); のように記述しなければなりません。 引数に選択条件式を指定することで、削除する要素を絞り込むことが可能です。
指定した要素集合から、現在動作中のアニメーション処理を全て中止します。 他のアニメーションがqueueに入ってる場合、次のアニメーションが直ちに実行されることになります。 ←→ボタンで左右に矩形が一定量移動します。移動中にSTOPボタンを押すと、アニメーションが中止されて停止します。 移動ボタンを複数回連打すると、それらはqueueに溜まって連続して実行されます。STOPボタンによりキャンセルされるのは現在動作中の動きだけで、すぐに次のqueueが始まることを確認できます。 // Start animation $("#go").click(function(){ $(".block").animate({left: '+=100px'}, 2000); }); // Stop animation when button is clicked $("#stop").click(functi
次のページ
このページを最初にブックマークしてみませんか？
『jQuery 日本語リファレンス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
