はてなブックマーク

jQuery API の jQuery . isNumeric( value ) は、valueに指定した値が、数値であるかどうかを判定する。数値であれば「true」、数値でなければ「false」を返す。 引数 value 数値かどうかを判定する値。 戻り値 Boolean booleanType（論理型）。 引数valueに指定した値が、数値であれば、「true」。 引数valueに指定した値が、数値でなければ、「false」。 記述例 var value = '5'; jQuery( '#sample' ) . text( jQuery . isNumeric( value ) );

ボタンクリックで、ボックス要素を不透明から透明に徐々に変更するフェードアウトのアニメーションのJavaScriptサンプル。 jQuery APIのfadeOut( duration )などを使えば簡単だが、JavaScriptだけで作ってみた。 サンプル（実装例） 不透明から透明に 実装例の動作について 「不透明から透明に」ボタンをクリックすると、背景色が赤色のボックス要素の不透明度を「1」から「0」に徐々に変更するフェードアウトのアニメーションを実行する。 ソースコード JavaScript <script type="text/javascript"> function changeOpacity( $a, $b ) { document.getElementById( "sampleButton" ).disabled = true; var $intervalID = setIn

<script type="text/javascript"> var $sampleArray = new Array( '要素１', '要素２', '要素３' ); var $sampleArrayPush = $sampleArray.push( '要素４', '要素５', '要素６' ); document.write( '$sampleArrayPush: ' + $sampleArrayPush + '<br />' ); document.write( '$sampleArray: ' + $sampleArray + '<br />' ); </script>

switch文は、開き波括弧{をコロン(:)、閉じ波括弧}をendswitch;に変更することができる。 switch文内で、PHPブロックとHTMLブロックを分ける際の、endswitch;の使い方とサンプルについて。 PHPブロックとHTMLブロックを分けない際のendswitch;は、、endswitch（PHPブロックのみ）のページへ。 使い方 基本 <?php switch ( 変数もしくは式 ): case 値Ａ: ?> 変数もしくは式の値が、値Ａと等しいときに、呼び出すHTMLブロック <?php break; ?> <?php case 値Ｂ: ?> 変数もしくは式の値が、値Ｂと等しいときに、呼び出すHTMLブロック <?php break; ?> <?php case 値Ｃ: ?> 変数もしくは式の値が、値Ｃと等しいときに、呼び出すHTMLブロック <?php break

<?php $varArrayA = array( array( "red" => "レッド", "blue" => "ブルー", "yellow" => "イエロー" ), array( "aka" => "赤色", "ao" => "青色", "ki" => "黄色" ) ); foreach ( $varArrayA as $varValueA ) { foreach ( $varValueA as $varValueB ) { echo '<p>' . $varValueB . '</p>'; } } ?>

jQueryとは、HTMLドキュメントのトラバース、イベント処理、アニメーション、および迅速なWeb開発のためのAjaxのインタラクションなどを、簡単に実装できる、高速なJavaScriptライブラリのこと。ウェブ・アプリケーション・フレームワークとして、とても多く利用されているJavaScriptライブラリであり、事実上の標準ライブラリと言っても過言ではない。 API（アプリケーション・プログラム・インタフェース）が豊富に用意されており、JavaScriptプログラミングの手間が省ける。 プラグインが豊富に存在するのも、jQueryの魅力のひとつだ。jQuery公式のユーザインターフェース（UI）用ライブラリもある。 特徴 jQueryを使うべき７つの理由。 クロスブラウザ。ブラウザによる違いを吸収してくれる。 JavaScriptより少ないコードの記述で、より多くの処理を行う。 CSS

<script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-sample-table td' ) . click( function() { if ( jQuery( this ) . hasClass( 'jquery-sample-td-red' ) ) { jQuery( this ) . removeClass( 'jquery-sample-td-red' ) . addClass( 'jquery-sample-td-yellow' ); } else if ( jQuery( this ) . hasClass( 'jquery-sample-td-yellow' ) ) { jQuery( this ) . removeClass( 'jquery-sample-td-yellow'

<script type="text/javascript"> objectName = new Object(); objectName . propertyName = 'サンプル'; document . write( '<p>' + objectName . propertyName + '</p>' ); var sampleVar = objectName . propertyName; document . write( '<p>' + sampleVar + '</p>' ); </script>

JavaScript（ジャバスクリプト）で作った、ちょっと便利なサンプル集。 逆引き的に目的から探せる。

var object = { string: 'value', array: [ 'item1', 'item2', 'item3' ], map: { key1: 'value1', key2: 'value2' } } var result = jQuery . param( object ); 変数objectの内容を、シリアライズし、変数resultに格納。 実装例（サンプル） jQuery . param( object ) decodeURIComponent( jQuery . param( object ) ) jQuery . param( object, true ) decodeURIComponent( jQuery . param( object ), true ) 実装例（サンプル）について をシリアライズした結果を、黄色のボックス要素内に表示したもの。 jQu

サンプルの動作について ドラッグ＆ドロップで、「リスト項目Ａ～Ｂ」のリスト項目（li要素）を、赤い背景色のリスト（ol要素）から青い背景色のリスト（ol要素）へ、もしくは、青い背景色のリスト（ol要素）から赤い背景色のリスト（ol要素）へ移動できる。 サンプルのソースコード <script> function sampleDrag( $event ) { $event.dataTransfer.setData( "Text", $event.target.id ); } function sampleDrop( $event, $this ) { $event.preventDefault(); var $data = $event.dataTransfer.getData( "Text" ); $this.appendChild( document.getElementById( $da

if文は、開き波括弧{をコロン(:)、閉じ波括弧}をendif;に変更することができる。 使い方 波括弧で括る方法のif文の波括弧{}を、コロン(:)やendif;に変更する。 if、else、elseif、入れ子（ネスト）の使い方については、各ページにて解説。 PHPブロックのみ if ( 条件式Ａ ): 条件式Ａが「TRUE」のときに行う処理 elseif ( 条件式Ｂ ): 条件式Ａが「FALSE」で、条件式Ｂが「TRUE」のときに行う処理 else: 条件式Ａと条件式Ｂが「FALSE」のときに行う処理 endif; <?php if ( 条件式Ａ ): ?> 条件式Ａが「TRUE」のときに呼び出すHTMLブロック <?php elseif ( 条件式Ｂ ): ?> 条件式Ａが「FALSE」で、条件式Ｂが「TRUE」のときに呼び出すHTMLブロック <?php else: ?> 条件

jQueryを使い、link要素で読み込んでいる外部スタイルシートのファイルを、ボタンクリック操作で変更する方法。 実装例 実装例の動作について 「sampleA.css」ボタンをクリックすると、ボタンがあるdiv要素の背景色を薄い赤色にする。 「sampleB.css」ボタンをクリックすると、ボタンがあるdiv要素の背景色を薄い緑色にする。 「sampleC.css」ボタンをクリックすると、ボタンがあるdiv要素の背景色を薄い青色にする。 ソースコード JavaScript <script type="text/javascript"> function setHref( $href ) { jQuery( '#sampleLink' ).attr( 'href', $href ); } </script> <link id="sampleLink" type="text/css" re

jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスにおける、ボックス移動中のスクロール可否設定。ウィンドウや親要素を、スクロールさせたくない場合、scroll オプションに false を指定。ウィンドウや親要素を、スクロールさせたい場合、scroll オプションに true を指定する。 実装例（サンプル） 実装例について 実装例（サンプル）は、containment オプションに、parent を指定し、親要素内だけでしか移動できないようにし、スクロールできない移動ボックスとスクロールできる移動ボックスを並べた。 実装例の動作について 「scroll: false」と書いてあるボックスを、ドラッグして、移動させ、破線で示した親要素の枠に近付けてスクロールしようとしてもスクロールしない。 「scroll: true」と書いてあるボックスを、ドラ

CSV形式のファイルを読み込み、テーブル（表）で表示する方法。 サンプル 読み込むCSV形式ファイルの内容 読み込むファイル「sample.csv」の内容。 <?php $file = "sample.csv"; if ( ( $handle = fopen ( $file, "r" ) ) !== FALSE ) { echo "<table>\n"; while ( ( $data = fgetcsv ( $handle, 1000, ",", '"' ) ) !== FALSE ) { echo "\t<tr>\n"; for ( $i = 0; $i < count( $data ); $i++ ) { echo "\t\t<td>{$data[$i]}</td>\n"; } echo "\t</tr>\n"; } echo "</table>\n"; fclose ( $hand

戻り値 URL。 サンプル 取得 window.location.href： ジャンプ サンプルの動作について 「取得」ボタンをクリックすると、「window.location.href： 」の右横に「http://alphasis.info/2013/07/javascript-locationobject-href/」と表示する。 「設定」ボタンをクリックすると、「Locationオブジェクト」のページへ移動する。 サンプルのソースコード

<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="excanvas.min.js"></script> <![endif]--> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></scrip

DOM操作（Manipulation）に関する jQuery API リファレンス。

jQuery の jqPlot プラグインで作る縦棒グラフ。 jQuery の jqPlot プラグインで作るシンプルな縦棒グラフ jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使えば、縦棒グラフを描くことができる。 jQuery の jqPlot プラグインで作る複数系列の縦棒グラフ jQueryのjqPlotプラグインの「plugins」フォルダに入っている「jqplot.barRenderer.min.js」を使えば、縦棒グラフを描くことができる。複数の系列データの配列を用意すれば、複数系列の縦棒グラフも描ける。 jQuery の jqPlot で作る外側右の凡例付き複数系列の縦棒グラフ jQueryのjqPlotプラグインで作る複数系列の縦棒グラフにおいて、グラフの外側の右中央に凡例を表示する方法

if ～ elseif ～ else ～は、入れ子（ネスト）にして使うことができる。 使い方 if文、elseif文、else文、それぞれの中に、if ～ elseif ～ else ～を入れるだけ。 波括弧で括る方法 if ( 条件式Ａ ) { 条件式Ａが「TRUE」のときに行う処理 if ( 条件式Ｃ ) { 条件式Ａが「TRUE」で、条件式Ｃが「TRUE」のときに行う処理 } elseif ( 条件式Ｄ ) { 条件式Ａが「TRUE」で、条件式Ｃが「FALSE」、条件式Ｄが「TRUE」のときに行う処理 } else { 条件式Ａが「TRUE」で、条件式Ｃと条件式Ｄが「FALSE」のときに行う処理 } } elseif ( 条件式Ｂ ) { 条件式Ａが「FALSE」で、条件式Ｂが「TRUE」のときに行う処理 } else { 条件式Ａと条件式Ｂが「FALSE」のときに行う処理 if (

<script> <!-- jQuery( function() { backgroundColor(); jQuery( '#backgroundColorCoral' ).click( function () { backgroundColor( 'coral' ); } ); jQuery( '#backgroundColorYellow' ).click( function () { backgroundColor( 'yellow' ); } ); jQuery( '#backgroundColorSkyblue' ).click( function () { backgroundColor( 'skyblue' ); } ); function backgroundColor( $backgroundColor ){ if( $backgroundColor == undefi

「同意する」のラジオボタンを選択（クリック）すると、送信ボタンを有効化する。「同意しない」のラジオボタンを選択（クリック）すると、送信ボタンを無効化する。 つまり、「同意する」を選択しなければ、送信ボタンをクリックできない。 実装例 同意しない 同意する 実装例の動作について 「同意する」のラジオボタンを選択すると、送信ボタンを有効化する。 「同意しない」のラジオボタンを選択すると、送信ボタンを無効化する。 ソースコード <script type="text/javascript"> <!-- function changeDisabled() { if ( document.Form1["accept"][1].checked ) { document . Form1["send"] . disabled = false; } else { document . Form1["send"

jQuery には、多くのプラグインが存在する。これも、jQueryの魅力のひとつだ。 jQuery API がわからなくても、jQuery UI やjQuery プラグインを使うだけで出来ることがたくさんある。 AnimateScroll Color Picker Cycle Horizontal Accordian jPlayer jqDock jqPlot jQuery Cookie jQuery Easing Plugin tableHover tablesorter

foreach文は、開き波括弧「{」をコロン「:」、閉じ波括弧「}」を「endforeach;」に変更することができる。 使い方 配列の各要素の値を取得

jQuery の jQuery . ajax( settings ) メソッドを使った Ajax リクエストで、html形式のデータを読み込み、表示する方法。 実装例（サンプル） 実装例（サンプル）の動作について 「toggle」ボタンをクリックすると、「jquery-sample-ajax-html.html」ファイルを読み込み、黄色のボックス要素内に表示する。「toggle」ボタンを、再度クリックすると、元に戻す。 実装例（サンプル）のソースコード JavaScript <script> <!-- jQuery( function() { jQuery( '#jquery-sample-button' ) . toggle( function() { jQuery . ajax( { url: 'jquery-sample-ajax-html.html', success: funct

要素をドラッグで移動できるようにしたい場合には、jQuery UI の Draggable が便利だ。 jQuery UI の Draggable プラグインによるドラッグ移動可能ボックス jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。ドラッグして、上下左右に移動させることができる。オプションも豊富だ。 水平方向（左右）だけ、ドラッグで移動できるボックス jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。水平方向だけ移動できるようにするには、axis オプションに、x を指定する。 垂直方向（上下）だけ、ドラッグで移動できるボックス jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックス。垂直方向（上下）だけ移動できるようにするには、axis オプションに

実装例（サンプル）の動作について 「メニュー １～５」のタブメニューをクリックすると、クリックしたタブメニューの内容を開く。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 <link rel="stylesheet" href="jquery-ui.css"> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script> <script> jQuery( function() { jQuery( "#sampleTabs" ) .tabs() .addClass( "ui-tabs-vertical ui-helper-clearfix"