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

  • レンジ入力（input[type=range]）の変更時の値をリアルタイムに取得する

    レンジ入力（input[type=range]）の変更時の値をリアルタイムに取得する。

    /* 変更中（ドラッグ中） */
$( 'input[type=range]' ).on( 'input', function () {
	var val = $(this).val();
} );

/* 変更後 */
$( 'input[type=range]' ).change( function () {
	var val = $(this).val();
} );

    HTML5のレンジ入力（input[type=range]）要素に関連するイベントは、変更後（ドラッグ後）はchangeイベントになるが、ドラッグ中はinputイベントになる。inputイベントは、汎用的なイベント関数であるon関数を利用すること。

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

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

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

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

    キーワード:
  • 8秒毎に何かする

    8秒毎に何かする。

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

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

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

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

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

    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を返す。

    キーワード:
  • 要素のstyle属性を設定する

    IDがfeatureの要素のstyle属性を設定する。

    /* 1つの属性値を設定する */
$('#feature').css( 'color', '#000000' );

/* 複数の属性値を設定する */
$('#feature').css( {
	color: '#000000',
	background-color: '#FFFFFF'
} );

    attr関数でstyle属性を変更することと同じで、上記であれば$(‘#feature’).attr( ‘style’, ‘color: #000000’ );や$(‘#feature’).attr( ‘style’, ‘color: #000000; background-color: #FFFFFF;’ );のように記述できる。

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

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

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

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

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

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

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

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

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

    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関数の振舞が異なる。ラジオボタンも基本的には同じだが、隣接するラジオボタンを考慮する必要がある。

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

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

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

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

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

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

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

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

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

    キーワード:
  • 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を利用するのが便利。

    キーワード:
  • 要素を空にする

    IDがcontentの要素を空にする。

    $( '#content' ).empty();

    $( '#content' ).html( '' ) で問題ないような気もする。

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