Callbacksオブジェクト jQuery Callbacksオブジェクトを生成する
Callbacksオブジェクトを生成します。引数の「フラグ」を指定できます。フラグはスペースで区切ることで複数指定可能です。各フラグは、Callbacksオブジェクトを次のように設定します。once：1度だけ起動できるCallbacksのリストを生成するmemory：$.Callbacks.add()でコールバック関数を追加したときに、それより前に$.Callbacks.fire(引数)で実行され...
Callbacksオブジェクト 
Ajax jQuery 「Ajax」Ajaxトランスポート
$.ajax()が内部的にコールする、send（送信）メソッドとabort（中断）メソッドを置き換えます。.ajaxPrefilter()やconverterでは対応できない、より根本的な処理の変更を行う際に利用するメソッドです。第1引数にはデータタイプ、第2引数にイベントハンドラを渡します。イベントハンドラ引数オプション：リクエストされたオプションオリジナルオプション：$.ajax()メソッドに...
Ajax jQuery 「Ajax」Ajaxプレフィルタ
$.ajax()がコールされるごとにオプションを変更したい場合などにフィルタとなる関数を設定するメソッドです、第1引数でデータタイプを指定することで、フィルタの対象となるデータタイプを限定できます。複数のデータタイプを対象とする場合スペース区切りで指定します。第2引数のイベントハンドラの引数オプション・・・リクエストされたオプションオリジナルオプション・・・$.ajax()メソッドに指定されたオプ...
Ajax jQuery 「Ajax」Ajaxのリクエストを送信し、レスポンスを受け取る
$.get()や$.post()など、jQueryの短縮形Ajaxメソッドの大本になるのが、この$.ajax()メソッドです。引数には、通信先のURLと、各設定パラメータを「名前：キー」のペアでオブジェクトとして指定します。または、URLも設定パラメータのひとつに「url：値」として含めることも可能です。もちろん、設定パラメータは必要なものだけ記述し、不要なものは省略できます。省略したパラメータに...
Ajax jQuery 「Ajax」JavaScriptファイルをサーバから取得する
$.getScript()メソッドは、WebサーバからJavaScriptファイルを読み込みます。第1引数「URL」として、リクエストの送信先のURLを指定します。第2引数「コールバック」には、リクエストの成功時に実行されるコールバック関数を指定します。コールバック関数の引数は、データ・・・レスポンスデータテキストステータス・・・通信の結果を表す文字列となります。なお、第2引数は省略することも可能...
Ajax jQuery 「Ajax」JSONエンコードデータをサーバから取得する
JSON（JavaScriptObjectNotation）は、JavaScriptのオブジェクトの表記方法に基づく、データの記述言語の一種です。JavaScriptとは非常に親和性が高く扱いやすいため、特にAjaxにおけるJavaScriptとサーバの間のデータ交換にはよく使われます。$.getJSON()メソッドは、Webサーバにリクエストを送信し、サーバ側のプログラムが出力JSONエンコード...
Ajax jQuery 「Ajax」HTTPリクエストを送信し、受け取ったレスポンスをDOMに挿入する
HTTPサーバにリクエストを送信し、レスポンスで得たデータをDOM要素に挿入します。第1引数は「URL」として、リクエストの送信先のURLを指定します。第2引数「データ」には、サーバに送信するデータをオブジェクト（連想配列）で記述します。このデータは「?param1=hello¶m2=world」のように整形され、サーバに渡されます。また、jQuery1.3以降「?param1=hello...
Ajax jQuery 「Ajax」HTTPリクエストを送信してレスポンスを受け取る
$.get()はGETメソッド、$.post()はPOSTメソッドで、Webサーバにリクエストを送信し、レスポンスを受け取ります。引数は共通です。まず、第1引数「URL」として、リクエストの送信先のURLを指定します。第2引数「データ」には、サーバに送信するデータをオブジェクト(連想配列)で記述します。このデータは「?paraml=hello¶m2=world」のように整形され、サーバに渡...
Ajax jQuery 「Ajax」Ajaxの設定をコントロールする
$.ajaxSetup()は、Ajax用パラメータを、引数として与えられた「オプション」オブジェクトの内容で設定します。$.ajaxSetup()で設定したパラメータは、後で個別のAjaxリクエストメソッドで変更することも可能です。書式jQuery.ajaxSetup(オプション)$.ajaxSetup(オプション)$.ajaxSetup({ url: "/test/test.html", typ...
Ajax jQuery 「Ajax」Ajaxの設定パラメータ
Ajaxでは、Webサーバとの通信を、さまざまな設定でコントロールします。jQueryのAjax機能で設定・参照が可能な各種パラメータは次のとおりです。accepts（既定値：データ型による）返り値としてどのような型を受け入れるかをWebサーバに伝えるために、データ型名とMIMEタイプのkey/valueペアをオブジェクトとして指定します。ここで指定するデータ型は、後述するconvertersパラ...
JavaScript jQuery 「エフェクト」視覚効果のキューを操作する
.animate()メソッドを連続して実行すると、それぞれのアニメーション効果は「キュー（queue）」に登録され、順に実行されます。キューはDOM要素ごとに１つまたは複数持てますが、複数のキューが必要になることはほとんどないでしょう。jQueryでは、特に指定しない限り、視覚効果には「fx」という名前のキューを使用します。.queue()メソッドは、引数を省略、またはキュー名だけを指定した場合、...
JavaScript jQuery 「エフェクト」アニメーションを停止する
実行中のアニメーションを停止します。第1引数は、fxキューをクリアするかどうかをtrueまたはfalseで指定します。trueを指定すると、fxキューに登録されている他のアニメーション効果もクリアされ、実行されなくなります。第2引数は、アニメーションを完了させるかどうかをtrueまたはfalseで指定します。trueを指定すると、停止と同時に各CSSプロパティの値がアニメーションの最終的な到達点に...
JavaScript jQuery 「エフェクト」カスタムアニメーション
animate()は、数値で指定可能なCSSプロパティを使い、独自の視覚効果を作成できる汎用的なメソッドです。まず、第1引数には変化させるCSSプロパティの名前と最終的に到達する値を、連想配列の形で指定します。ここで使用できるのは、あくまでも「数値」で指定できるプロパティだけやtext-decorationなどは指定できません。つまり、widthやheight,leftやrightなどは使用可能で...
JavaScript jQuery 「エフェクト」表示と非表示
引数なしで実行された場合、.show()メソッドは隠された要素を直ちに表示します。反対に、.hide()メソッドは直ちに隠します。.show()メソッドは、displayプロパティがblockに設定されたものと同様であり、初期値がどのような値であったとしても復元できます。もともとdisplayプロパティがinlineに設定されていた要素が隠されていた要素が隠された後に.show()で表示された場合...
JavaScript jQuery 「エフェクト」スライド効果
.slideUp()は、要素の高さを元の高さから0まで徐々に変化させます。逆に.slideDown()は、要素の高さを0から元の高さまで徐々に変化させます。.slideToggle()は、要素が表示されているかどうかによって.slideUP()または.slideDown()のいずれかの効果を実行します。例えば、対象要素がスライドアップしている状態であれば.slideDown()、スライドダウンして...
JavaScript jQuery 「エフェクト」フェード効果
.feadeIn()は、対象要素に対し徐々に表示を濃くするアニメーション効果を設定します。.fadeOut()は、その反対に徐々に表示を薄くします。.fadeTo()は第２引数で指定した「透明度」の値まで、徐々にfadeIn/fadeOutを行います。これらの関数の第1引数は、アニメーション効果にかける時間です。「fast（速く）」「slow（遅く）」といった文字列での指定の他、ミリ秒単位の数値で...
JavaScript jQuery 「エフェクト」アニメーション効果の無効化
jQueryでは、アニメーション効果のオン・オフをグローバルなプロパティ「jQuery.fx.off」の値だけで制御できます。jQuery.fx.offにtrueを設定すると、その時点からすべてのアニメーション効果が一切効かなくなります。逆に、falseを設定すればいつでもアニメーション効果を復活させられます。また、「jQuery.fx.off」の「jQuery」の部分は「$」の文字に置き換えが可...
jQuery jQuery 「データ」データの割り当てられているか調べる
指定された要素に.data()によってデータが割り当てられていればtrue、割り当てられていなければfalseを返します。書式$.hasData( 対象要素 )$.hasData( 'body' )
JavaScript jQuery 「データ」データの割り当てと解除
.data()メソッドを使うと、DOM要素に対してデータを割り当てたり参照したりできます。jQuery3以降では、データの「キー」に「英子文字に続くハイフン」が使われていると、ハイフンを取り除いて後続の先頭の文字が大文字に変換されることに注意してください。例えば次の例では、最初のアラートダイアログには「NaN」が表示され、2つ目のアラートダイアログには「yamada」が表示されます。$('.mai...
CSS操作 jQuery 「CSS操作」単位なしで利用可能なCSSプロパティの一覧を得る
jQuery.cssNumberは単位なしで利用可能なプロパティの一覧を持っているオブジェクトです。一覧には次のものが含まれます。zindexfontWeightopacityzoomlineHeightwindows（jQuery1.6から追加）orphans（jQuery1.6から追加）fillOpacity（jQuery1.6.2から追加）columnCount（jQuery1.9から追加）...
CSS操作 jQuery 「CSS操作」独自のCSSプロパティを作成する
.cssHooksはjQueryで利用できるCSSプロパティを独自に作成可能です。「get:function」には値を取得する際に実行したい処理を記述し、「set:function」には値を設定するときに実行したい処理を記述します。.cssHooksはベンダープレフィックスに依存しないCSSプロパティを作成するのに役立ちます。書式$.cssHooks = { get: function(elem,...
CSS操作 jQuery 「CSS操作」クラスの指定あり・指定なしを切り替える
.addClassメソッドはクラスを追加し、.removeClass()メソッドはクラスを削除するメソッドですが、.toggleClass()メソッドは、引数として渡したクラスが要素に指定されていなければ指定し、指定されていれば除去します。ただし、2番目の書式のように、第２引数のスィッチ（trueまたはfalse）を使って、指定したクラスの有効・無効を明示的に設定することもできます。jQuery1...
CSS操作 jQuery 「CSS操作」横方向のスクロール位置を取得する・設定する
.scrollLeft()メソッドは、引数なしで要素の横方向の現在のスクロール位置を取得し、引数を与えれば指定した位置までスクロールします。書式$( 対象要素 ).scrollLeft();$( 対象要素 ).scrollLeft({位置});var scrollLeft = $("p").scrollLeft();$('p').scrollLeft(300);サンプルスクロール位置を取得する。c...
CSS操作 jQuery 「CSS操作」縦方向のスクロール位置を取得する・設定する
.scrollTop()メソッドは、引数なしで要素の縦方向の現在のスクロール位置を取得し、引数を与えれば指定した位置までスクロールします。書式$( 対象要素 ).scrollTop();$( 対象要素 ).scrollTop({ 位置 });var scrollTop = $("p").scrollTop();$('p').scrollTop(300);サンプルスクロール位置を取得または設定する。...
CSS操作 jQuery 「CSS操作」要素の位置表示を調べる
.offset()メソッドが画面の端からの位置を取得するのに対して、.position()メソッドは要素の親要素からの相対位置を返します。戻り値には、「top」と「left」の２つのプロパティが含まれます。対象要素のmargin、padding、borderの値にピクセル以外が指定されている場合（例えば「margin: 0 auto;」など）は、正しい位置が返されないことがあります。書式$( 対象...
CSS操作 jQuery 「CSS操作」要素の表示位置を調べる・設定する
.offset()メソッドは、要素の画面左上からの位置を返します。戻り値には、「top」と「left」の２つのプロパティが含まれます。例えば、$(対象要素).offset().leftと記述することにより左からの位置を種痘します。leftをtopに置き換えると上からの位置が取得できます。jQuery1.4からは、.offset()メソッドで要素を移動をできるようになりました。引数としては「位置」を...
CSS操作 jQuery 「CSS操作」要素のouterWidthを調べる
outerWidth()メソッドは、条件にマッチした最初の要素のouterWidth（padding、borderを含めた高さのピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。引数には「marginの値も含めるかどうか」をtureまたはfalseで指定可能です。既定値はfalseなので、何も指定しない場合はmarginの値は含まれません。このメソッドはwindowsオブジェク...
CSS操作 jQuery 「CSS操作」要素のouterHeightを調べる
.outerHeight()メソッドは、条件にマッチした最初の要素のouterHeight（padding、borderを含めた高さのピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。引数には「marginの値も含めるかどうか」をtrueまたはfalseで指定可能です。既定値はfalseなので、何も指定しない場合はmarginの値は含まれません。このメソッドはwindowsオブ...
CSS操作 jQuery 「CSS操作」要素のinnerWidthを調べる
innaerWidth()メソッドは、条件にマッチした最初の要素のinnerWidth（paddingを含めた幅のピクセル数）を、例えば「300」のように単位付きの数値だけで返します。このメソッドはwindowオブジェクト、documentオブジェクトに対しては使用できないため、代わりに.width()メソッドを使用します。書式$( 対象要素 ).innaerWidth();var pHeight...
CSS操作 jQuery 「CSS操作」要素のinnerHeightを調べる
innerHeight()メソッドは、条件にマッチした最初の要素のinnerHeight（paddingを含めた高さのピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。このメソッドはwindowオブジェクト、documentオブジェクトに対しては使用できないため、代わりに.height()メソッドを使用します。書式$( 対象要素 ).innerHeight(値);var pHe...
CSS操作 jQuery 「CSS操作」要素の幅を設定する
.width()メソッドに引数を与えると、要素の高さを設定できます。条件にマッチする要素が複数ある場合、値はすべての要素に一括して設定されます。jQuery1.4.1以降では引数としてクロージャを記述することにより、動的に幅を設定できます。サンプルでは、特定の要素のインデックス番号を取得index()メソッドでp要素を指定し、1×50、2×50・・・と順番に値を返すことによって50ピクセルずつ幅を...
CSS操作 jQuery 「CSS操作」要素の幅を調べる
.width()メソッドは、条件にマッチした最初の要素の幅（paddingを含めないピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。「300px」のように単位を含めたい場合は、.width()ではなく、.css('width')を使用しましょう。書式：$( 対象要素 ).width();var w = $("p").width();サンプル１、要素の幅を取得する。script...
CSS操作 jQuery 「CSS操作」要素の高さを設定する
.height()メソッドに引数を与えると、要素の高さを設定できます。条件にマッチする要素が複数ある場合、値はすべての要素に一括して設定されます。jQuery1.4以降では引数としてクロージャを記述することにより、動的に高さを設定できるようになりました。書式$( 対象要素 ).height(値);$( 対象要素 ).height(function(){処理…});$("p:last").heigh...
CSS操作 jQuery 「CSS操作」要素の高さを調べる
.height()メソッドは、条件にマッチした最初の要素の高さ（paddingを含めないピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。「300px」のように単位を含めたい場合は、.height()ではなく.css('height')を使用します。書式$( 対象要素 ).height();var h= $("p").height();サンプル１、要素の高さを取得するscrip...
CSS操作 jQuery 「CSS操作」CSSスタイルの一括指定
「プロパティ名1：値1, プロパティ名2:値2・・・」と指定を列挙することで、要素に対して一括してスタイルを設定できます。値が数値の場合、単位はデフォルトでピクセルと解釈されます。上記の例の1行目のようにプロパティ名をCSSでの表記法と同様に指定する場合は引用符が必須となりますが、プロパティ名をキャメルケースで指定する場合は引用符は必須ではありません。書式CSS({プロパティ名1：値1,プロパティ...
CSS操作 jQuery 「CSS操作」CSSスタイルの指定
DOM要素に対して、プロパティ名と値を渡しスタイルを設定します。スタイルの指定はCSSの記法と同様なので、backgroundやmarginといった略記式のプロパティの指定も可能です。書式CSS(' プロパティ名 ',' 値 ')$(this).css('color','#fff')値が数値の場合、単位がないときはデフォルトでピクセルと解釈されます。サンプルクリックした要素の背景をblueにする<...
CSS操作 jQuery 「CSS操作」CSSプロパティの取得
DOM要素に設定されたスタイルやプロパティを取得します。プロパティ及び引数にはこれから行う処理に必要な値を指定します。このとき、marginやbackgroundなどといった複数の値を一括指定可能な略記式のプロパティでは指定できません。必ず、margin-rightやbackground-colorなど、単一の値を返すプロパティを指定しましょう。上記の場合だと、divに設定されているbackgro...
JavaScript jQuery 「イベント」一度だけ呼び出したいイベントハンドラを割り当てる
.on()で追加されるイベントハンドラはイベントが発生すれば何度でも実行されますが、.one()メソッドでは一度だけ実行して以後は実行されないイベントハンドラを登録できます。書式$(対象要素).one('イベントタイプ',,,)$("table").one("click dblclick","td",{msg: 'message'}, function(e){ ・ ・});サンプル1度だけ発火する...
JavaScript jQuery 「イベント」イベントを発火する
.trigger()は、イベントを発火して.on()メソッドで割り当てられたイベントハンドラを実行します。.triggerHandler()も同様にイベントを発火してイベントハンドラを実行しますが、trigger()がそのイベントによってブラウザの既定の動作が発生するのに対して、triggerHander()ではイベントハンドラが実行されるだけでブラウザの既定の動作は起きないという点が異なります。...
JavaScript jQuery 「イベント」イベントハンドラを解除する
イベントとイベントハンドラの割り当てを解除します。引数を指定しなければ、全イベントに対するすべてのイベントハンドラを解除します。イベントタイプだけ指定した場合は、そのイベントに対するすべてのイベントハンドラを解除します。書式$(対象要素).off(イベントタイプ, ,)$(対象要素).off(イベントタイプ, )$(対象要素).off(イベントタイプ)$(対象要素).off()$('table')...
JavaScript jQuery 「イベント」イベントにイベントハンドラを割り当てる
イベントに対し、イベントハンドラを割り当てます。従来の.live()、.delegate()、.bind()の機能は.on()に統合されましたので、廃止はたは非推奨になっています。これから開発するスクリプトでは.on()を使います。最初の書式では、１つまたは複数のイベントに対して、１つのイベントハンドラを割り当てます。複数のイベントを指定する場合は$('table').on('click dbcl...
JavaScript jQuery 「イベント」スクロールを検出する
このイベントは、ブラウザ上のスクロールで発生します。window要素だけでなく、フレームやCSSでoverflow:scrollもしくはoverflow:autoが設定された要素も対象になります。書式$(対象要素).on('scroll', イベントハンドラ)$(対象要素).trigger('scroll')$(対象要素).scroll()$('form').scroll(function(e){...
JavaScript jQuery 「イベント」ブラウザウィンドウのリサイズを検出する
ブラウザウィンドウのサイズを変更すると発生するイベントで、対象はWindow要素だけです。このメソッドは、ブラウザによって動作が異なる場合があります。InternetExplorerやSafari、Google Chrome等では、リサイジョンによって完全にリサイズが完了したときに1度だけイベントが発生する場合があります。trigger('resize')、引数無しのresize()では、リサイズ...
JavaScript jQuery 「イベント」フォーム送信のイベント
フォームの送信時に発生します。引数なしのsubmit()メソッドとtrigger('submit')は、フォームの送信をスクリプトから実行します。書式$(対象要素).on('submit', イベントハンドラ)$(対象要素).trigger('submit')$(対象要素).submit()$('form').submit(function(e){ alert('submit');});$('fo...
JavaScript jQuery 「イベント」テキストの選択
input type="text"とtextareaに限定のイベントです。このイベントは、要素中のテキストが選択されたとき、または選択範囲を変更したときに発生します。返されるイベントオブジェクト（e）からは、e.target.selectionStart：選択範囲の開始位置e.target.selectionEnd：選択範囲の終了位置e.target.selectionDirection：選択の方...
JavaScript jQuery 「イベント」フォーム要素の変更時イベント
input、textarea、selectの各要素に対し、値の変更が起きたときに発生するイベントです。厳密には、イベント発生のタイミングは要素の種類によって異なります。select要素だけ、マウスで選択を行ったと同時にイベントが発生しますが、他の要素ではフォーカスを失った時点でイベントが発生します。引数無しの.change()メソッドは、スクリプトからchange()イベントを強制的に発生させます...
JavaScript jQuery 「イベント」キーを押す・離す
keydown()とkeypress()は、共にキーの押下で発生するイベントです。両者が異なる点は、keydown()がe.whichの情報として「キーコード」を取得するのに対し、keypress()が入力された文字の「文字コード」を取得することです。たとえば、Ａキーを押した場合、keydown()はキーコード「65」を返しますが、keypress()は文字コード「97」を返します。大文字の'A'...
JavaScript jQuery 「イベント」フォーカスの移動
.focus()及び、.focusin()イベントハンドラは、要素にフォーカスが移ったときにコールされます。同様に、.blur()及び.focusout()イベントハンドラは、要素からフォーカスが外れたときにコールされます。これらのイベントは、キー操作でもマウス操作でも発生します。.focus()と.focusin()の違い、.blur()と.focusout()の違いは、イベントバブリングに関連...
JavaScript jQuery 「イベント」マウスカーソルの出入りに応じ、それぞれの処理を実行する
.hover()メソッドは、.mouseenter()と.mouseleave()を1つの書式にまとめたものです。.on()メソッドで「.on('hover'…)」と記述することはできませんので、hoverをonで書きたい時はmouseenterとmouseleaveを使います。書式$(対象要素).hover(function(e){入る処理},function(e){出る処理})$(対象要素)....
JavaScript jQuery 「イベント」マウスカーソルの要素への出入り
mouseover()とmouseenter()イベントは、要素にマウスカーソルが入った時に発生します。同様に、マウスカーソルが要素から出たとき、mouseout()、mouseleave()イベントが発生します。mouseout()とmouseleave()、mouseout()とmouseleave()の違いは、ともに要素の関係とイベントバブリングに関するものです。それぞれの前者は要素同士の親...