このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。過度な期待はしないでください。
あと、ブラウザはChromeやFirefoxの最新版をお勧めいたします。

  • 8秒毎に何かする

    8秒毎に何かする。

    var timer_id = setInterval( function () {
	// ここに8秒毎の処理を
	} , 8000 );

// 繰り返しを中止する場合
clearInterval( timer_id );

    第2パラメータには実行までの時間を何ミリ秒単位（1秒後なら1000）を指定する。setTimeout関数と異なり、第1パラメータの関数は指定された間隔で繰り返し実行される。なお、繰り返しを中止する場合は、setInterval関数の戻り値を指定してclearInterval関数を呼び出す。

    キーワード:
  • 要素を複製する

    先頭のtr要素を複製して末尾に追加する

    $( 'tr:last' ).after( $( 'tr:first' ).clone( true ) );

    clone関数により指定した要素（子要素を含む）を複製できる。引数はその要素に割り当てられたイベント設定も同時に複製するかどうかの指定で、trueの場合はイベント設定も複製される。
    複製した要素が子要素としてinputタグを含む場合、value属性値は複製時に設定されている値にならない場合（jQuery 1.9.1など）があるので注意が必要。

    キーワード:
  • datepickerの選択可能範囲を指定する

    IDがstartdateの要素にdatepickerを割り当て、選択可能範囲を指定する。

    $( '#startdate' ).datepicker( {
	minDate: new Date(),
	maxDate: new Date( 2012, 2, 29 )
} );

    minDateプロパティが選択可能な開始日、maxDateプロパティが選択可能な最終日となる。初期値はどちらもnullで範囲制限されておらず、必要に応じてDateオブジェクトを指定する。上記の例は、開始日をアクセスした日からとし、最終日を2012年2月29日までとしている

    キーワード:
  • 配列に値が入っているか調べる

    指定した値が配列の中に入っているか調べる。

    var colors = [ 'red', 'yellow', 'green', 'blue' ];
if ( jQuery.inArray( 'green', colors ) == -1 ) {
	/* 見つからなかった場合の処理 */
}

/* 見つかった要素を削除する */
idx = jQuery.inArray( 'green', colors );
if ( idx != -1 )
	colors.splice( idx, 1 );

    PHPのin_array関数よりはarray_search関数に近い。配列内の値を調べ、最初に見つかったキーの値を返す。見つからない場合は-1を返す。

    キーワード:
  • 文字列を数値（浮動小数点数）に変換する

    INPUT要素の値を取得し、浮動小数点数に変換して変数valに格納する。

    var val = parseFloat( $( 'input' ).val() );

    浮動小数点数はこのparseFloat関数を、整数の場合はparseInt関数を使用する。なお、”や文字から始まる文字列は NaN になる（’.12’のように、’.’から始まる場合は正しく変換される）。

    キーワード:
  • クラス指定されたチェックボックスのクリック処理を行う

    表の上下に2つあるクラス指定されたチェックボックスのクリック処理を行う

    $( '.hide-unchecked:first' ).click();

    オン／オフ時のアクションがあるチェックボックスを1ページに偶数個指定している場合、セレクタでクラスのみ（上記の場合は.hide-unchecked）を指定するとクリック処理が偶数回実行されてしまい、意図した動作にならない。クラス指定されたボタン類を1回だけ実行したい場合はクラス指定の後に「:first」を付けることで問題を回避できる。

    キーワード:
  • 要素の高さを取得する

    idがpost-1の要素の高さを取得する。

    var height = $( '#post-1' ).height();

    取得できる高さはピクセル値で、上下のpadding分は含まれていない。例えばその要素の高さが50pxでpaddingが10pxの場合は、取得できる高さの値は50となる（jQuery 1.7.1でIE7～9、Chrome 16、Firefox 9、Safari 5.1、Opera 11.60で確認）。なおheight関数は、$( window ).height()と記述することでブラウザの表示領域の高さを、$( 'body' ).height()とすることでドキュメントの高さ（長さ）を取得できる。

    キーワード:
  • 親要素内の順番を取得する

    現在のli要素が親のul要素内で何番目なのか取得する。

    var pos = $( this ).prevAll( 'li' ).length;
/* または、要素名を省略して */
var pos = $( this ).prevAll( ).length;

    prevAll関数で同レベルで前にある要素を取得でき、そのlengthプロパティで取得した要素数を調べることで、現在の要素が何番目がわかる。0ならば前に要素はなく現在の要素が先頭の要素となり、1ならば前に1つ要素があることを意味する。

    キーワード:
  • チェックボックスをオン／オフする

    IDがagreeのチェックボックス要素をオン／オフにする。

    /* 1.9以降: オンにする */
$( '#agree' ).prop( 'checked', true );

/* 1.9以降: オフにする */
$( '#agree' ).prop( 'checked', false );

/* 1.9以前（1.8.3など）であれば以下も使用できるが、prop関数が導入された1.6以降であれば上記の方が無難 */
/* オンにする */
$( '#agree' ).attr( 'checked', 'checked' );

/* オフにする */
$( '#agree' ).removeAttr( 'checked' );

    jQuery 1.9前後でattr関数およびremoveAttr関数の振舞が異なる。ラジオボタンも基本的には同じだが、隣接するラジオボタンを考慮する必要がある。

    キーワード:
  • 子要素を探す

    IDがchecksheetの要素の子要素からinput要素を探す。

    /* 全子孫要素から探す */
$( '#checksheet' ).find( 'input' ).each( function () {
	// ここに子のinput要素の処理
} );

/* 子要素から探す（孫要素以下は検索対象外） */
$( '#checksheet' ).children( 'input' ).each( function () {
	// ここに子のinput要素の処理
} );

    検索範囲によってfind関数とchildren関数を使い分ける。

    キーワード:
  • ページ内アンカーを取得する

    リクエストURLのページ内アンカーが’#tab1’か調べる。

    if ( location.hash == '#tab1' ) {
	/* アンカーが'#tab1'の場合の処理を記述する */
}

    locationのhashプロパティには’#’付きでアンカーの値が格納されている。なお、アンカーがない場合は”になる。

    キーワード:
  • 数値を小数点以下2桁にして要素のテキストを書き換える

    小数点以下2桁の文字列を取得する。

    $( '#progress' ).text( ( pos*100/total ).toFixed(2) );

var num = 12.3456789;
alert( num.toFixed() );  // 12
alert( num.toFixed(1) ); // 12.3
alert( num.toFixed(2) ); // 12.35
alert( num.toFixed(3) ); // 12.346
alert( num.toFixed(4) ); // 12.3457

    数値オブジェクトのtoFixedメソッドは、パラメータで小数点以下の桁数（0～20：省略時は0）をすることでその桁数までを含んだ文字列を返す。参考）Math.floorメソッドは小数点第1位を四捨五入した整数値を返す。

    キーワード:
  • wPaintで再初期化する

    HTML5のcanvas要素を利用したwPaintで再初期化する。

    $.fn.wPaint.extend( {
	clearAll: function () {
		this.clear();
		this.undoArray = [];
		this.undoCurrent = -1;
		this._init();
	}
} );

/* 呼び出す */
$( '#paint_here' ).wPaint( 'clearAll' );

    wPaintの拡張機能を利用して描画内容と編集履歴をクリアしている（wPaint 2.5.0で確認）。clearメソッドはメニューにもある描画内容をクリアするもの。undoArrayが編集履歴を記録する配列、undoCurrentが現在の編集位置を示しており、_initメソッドの呼び出しで編集履歴の初期化を確定させている感じ。

    キーワード:
  • 絶対値を取得する

    変数valの絶対値を取得する。

    val = Math.abs( val );

    JavaScriptで数値を扱う場合、まずはMathオブジェクトで。

    キーワード:
  • 変数の内容が数か調べる

    変数の内容が数（数値または数字で構成された文字列）か調べる。

    alert( jQuery.isNumeric( 1 ) );		// true
alert( jQuery.isNumeric( 1.05 ) );	// true
alert( jQuery.isNumeric( '1' ) );	// true
alert( jQuery.isNumeric( '0xFF' ) );	// true
alert( jQuery.isNumeric( '' ) );	// false
alert( jQuery.isNumeric( 'abc' ) );	// false
alert( jQuery.isNumeric( null ) );	// false

// 参考）isNaN関数
alert( isNaN( 1 ) );		// false
alert( isNaN( 1.05 ) );		// false
alert( isNaN( '1' ) );		// false
alert( isNaN( '0xFF' ) );	// false
alert( isNaN( '' ) );		// false
alert( isNaN( 'abc' ) );	// true
alert( isNaN( null ) );		// false

    jQuery.isNumeric関数（1.7以降）はPHPのisNumeric関数と同じく変数が数字か調べるのに対し、isNaN関数は変数がNaN（Not a Number：数値の未定義型）かどうか調べる。

    キーワード:
  • 文字列を数値（整数）に変換する

    INPUT要素の値を取得し、整数に変換して変数valに格納する。

    var val = parseInt( $( 'input' ).val() );

/* 第2パラメータには基数（2、8、10、16）を指定できる */
var val = parseInt( $( 'input' ).val(), 16 );

    parseInt関数は、PHPのintval関数みたいなもの。基数を省略した場合は原則10進数として解釈されるが、文字列が’0’から始まる場合は8進数、’0x’また’0X’で始まる場合は16進数として解釈される。なお、”や文字から始まる文字列は NaN になる。

    キーワード:
  • datepickerのタイトル月、年の並びを変える

    IDがstartdateの要素にdatepickerを割り当て、タイトル部分の月、年の並びを逆にする。

    $( '#startdate' ).datepicker( {
	showMonthAfterYear: true
} );

    showMonthAfterYearプロパティのデフォルト値はfalseなので、trueを指定する。なお日本語の基本的な設定は、ui.datepicker-ja.jsを利用するのが便利。

    キーワード:
  • 前の要素を探す

    button要素の前にあるinput要素の値を”にする。

    /* 直前のinput要素1つだけ適用する */
$( "button" ).prev( 'input' ).val( '' );

/* 前のinput要素全てに適用する */
$( "button" ).prevAll( 'input' ).val( '' );

    探す要素が1つかすべてかでprev関数とprevAll関数を使い分ける。

    キーワード:
 
 
ツールバーへスキップ