jQuery

JavaScript

jQuery オブジェクトに対する便利なメソッド

.each()は、$.each()と同様に、主に反復処理のために使用します。jQueryオブジェクト内の要素を1つずつ走査し、各要素に対してコールバック関数を適用します。コールバック関数には、要素のインデックス値と要素自体を引数として渡せます。.get()は、jQueryオブジェクトからDOM要素を取り出します。引数としてインデックス値を渡した場合、そのインデックス値にマッチする、1つの要素が返さ...
JavaScript

jQuery その他のユーティリティメソッド

$.extend()は、複数のオブジェクトをマージし、各オブジェクトが内包するプロパティを対象オブジェクトにまとめます。引数が1つだけの場合、対象オブジェクトが省略されたと見做し、jQueryオブジェクトそのものが対象オブジェクトとして選択されます。第1引数は「ディープコピー」スイッチで、既定値はfalseです。これをtrueに設定すると、オブジェクトが再帰的にマージされます。具体的には、オブジェ...
JavaScript

jQuery 「ユーティリティ」反復処理や条件判断に便利なメソッド

$.each()は、jQueryを使ったスクリプティングでは特に使用頻度の高い反復処理のためのメソッドです。オブジェクトや配列の要素を順に走査し、各要素に対してコールバック関数を実行します。コールバック関数には、現在の要素のインデックスと、現在の要素が引数として渡せます。なお、反復処理をすぐに止めてループから脱出したいときは、コールバック関数から「return false亅します。なお、$.eac...
JavaScript

jQuery 「ユーティリティ」配列を操作する

$.merge()は、2つの配列をマージします。配列2のすべての要素が、配列1に追加されますので、配列1を処理前の状態で残したい場合は、あらかじめ複製します。$.map()は、配列またはオブジェクトの各要素に対してコールバック関数の処理を適用し、その結果を新しい配列として返します。このメソッドはjQuery1.6から配列だけでなくオブジェクトを扱えるようになりました。ただし、jQueryオブジェク...
JavaScript

jQuery 「ユーティリティ」文字列の前後からホワイトスペースを除去する

文字列の前後から、スペース、タブ文字を除去します。改行コードは除去されません。例えば、メールアドレス等のご入力を防ぎたい、ログインIDやパスワードの入力をアシストしたい、といったときに利用できる便利なメソッドです。書式jQuery.trim(文字列)$.trim(文字列)str = jQuery.trim(str);str = $.trim(str);サンプル文字列の前後から不要なホワイトスペース...
Deferredオブジェクト

jQuery Deferredの状態を調べる

Deferredオブジェクトの状態を調べます。pending、resolved、rejectedのいずれかを返します。デバック時などに有用なメソッドです。書式dfd.state()var dfd = $.Deferred();var state = dfd.state();サンプルDeferedオブジェクトの状態を取得して出力する<body> <div class="main"> <div cla...
Deferredオブジェクト

jQuery 同期処理と非同期処理について

コードに書いてある順番に処理が進み、ひとつの処理をしている間は後続の処理は実行されない、これが同期処理です。サーバーから応答が返ってくるまでの間、別の処理が走り効率的に処理するのが非同期処理です。解説JavaScriptでは、Ajaxに限らず非同期処理を行うケースがあります。<body> <div class="main"> <div class="header"> <h1> サンプル </h1>...
Callbacksオブジェクト

jQuery Callbacksオブジェクトをロックする・ロックされているか確認する

lock()はCallbacksオブジェクトをその時点の状態、その時点で与えられている引数で「ロック」します。ロック前にadd()されていたコールバックはfire()しても実行されません。「memory」フラグを指定して生成したCallbacksオブジェクトでは、lock()後にadd()で追加することでコールバックを実行できますが、リスト中の各コールバック関数に渡される引数をロックした時点に固定...
Callbacksオブジェクト

jQuery Callbacksオブジェクトを無効化する・無効化されているか確認する

disable()はCallbacksオブジェクトを無効化し、以後fire()で実行できなくなります。disabled()はCallbacksオブジェクトが無効化されていればtrue、そうでなければfalseを返します。書式callbacks.disable()callbacks.disabled()callbacks.disable();var disabled = callbacks.disa...
Callbacksオブジェクト

jQuery Callbacksが実行されたか確認する

Callbacksオブジェクトが一度でもfire()されていたらtrue、そうでなければfalseを返します。書式callbacks.fired()callbacks.fired();サンプルCallbacksオブジェクトが実行済みか確認する<body> <div class="main"> <div class="header"> <h1>サンプル</h1> </div> <div class=...
Callbacksオブジェクト

jQuery [Callbacks] コンテキストを指定してCallbacksオブジェクトを実行する

callbacks.fire()メソッドと似ていますが、引数として「コンテキスト」を渡せる点が異なります。コンテキストとして渡された要素は、Callbacksオブジェクトに登録された各コールバック関数の中で「this」で参照できます。fireWidth()の第2引数は配列またはオブジェクトで渡す必要があります。書式callbacks.fireWith(コンテキスト,引数)callbacks.fir...
Callbacksオブジェクト

jQuery Callbacksオブジェクトを実行する

Callbacksオブジェクトに追加されているコールバック関数を、fire()に渡した引数で一括して実行します。書式callbacks.fire( 引数 )callbacks.fire(str);サンプルCallbacksオブジェクトに追加した関数を実行する<body> <div class="main"> <div class="header"> <h1>サンプル</h1> </div> <di...
Callbacksオブジェクト

jQuery Callbacksオブジェクトにコールバックを追加する

$.Callbacks()で生成したCallbacksオブジェクトに、引数で渡したコールバック関数を追加します。複数のコールバック関数を追加する場合は配列として渡します。書式callbacks.add( コールバック )callbacks.add(myfunc);サンプルCallbacksオブジェクトを生成してコールバック関数を追加する<body> <div class="main"> <div ...
Callbacksオブジェクト

jQuery Callbacksオブジェクトを生成する

Callbacksオブジェクトを生成します。引数の「フラグ」を指定できます。フラグはスペースで区切ることで複数指定可能です。各フラグは、Callbacksオブジェクトを次のように設定します。once:1度だけ起動できるCallbacksのリストを生成するmemory:$.Callbacks.add()でコールバック関数を追加したときに、それより前に$.Callbacks.fire(引数)で実行され...
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&param2=world」のように整形され、サーバに渡されます。また、jQuery1.3以降「?param1=hello...
Ajax

jQuery 「Ajax」HTTPリクエストを送信してレスポンスを受け取る

$.get()はGETメソッド、$.post()はPOSTメソッドで、Webサーバにリクエストを送信し、レスポンスを受け取ります。引数は共通です。まず、第1引数「URL」として、リクエストの送信先のURLを指定します。第2引数「データ」には、サーバに送信するデータをオブジェクト(連想配列)で記述します。このデータは「?paraml=hello&param2=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要素ごとに1つまたは複数持てますが、複数のキューが必要になることはほとんどないでしょう。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()は第2引数で指定した「透明度」の値まで、徐々に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番目の書式のように、第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」の2つのプロパティが含まれます。対象要素のmargin、padding、borderの値にピクセル以外が指定されている場合(例えば「margin: 0 auto;」など)は、正しい位置が返されないことがあります。書式$( 対象...
CSS操作

jQuery 「CSS操作」要素の表示位置を調べる・設定する

.offset()メソッドは、要素の画面左上からの位置を返します。戻り値には、「top」と「left」の2つのプロパティが含まれます。例えば、$(対象要素).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();サンプル1、要素の幅を取得する。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();サンプル1、要素の高さを取得する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...