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

  • 配列に値が入っているか調べる

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

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

    キーワード:
  • 数値を小数点以下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位を四捨五入した整数値を返す。

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

    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()とすることでドキュメントの高さ（長さ）を取得できる。

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

    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関数を使い分ける。

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

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

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

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

    キーワード:
  • iOSで中断ボタンをクリックした際に要素を消して確認ボックス（confirm）を表示する

    中断ボタンをクリックした際に要素を消して確認ボックスを表示する。

    $( '#interrupt' ).click( function () {
	$( 'p' ).css( 'opacity', '0' );
	setTimeout( function () {
		if ( window.confirm( '○○を中断しますか。' ) ) {
			// ここに中断時の処理を記述
		}
		$( 'p' ).css( 'opacity', '1' );
	} , 250 );
	return false;
} );

    PCは問題ないけどiOS 9.2（確認時）で確認ボックスを表示するとその前のcss操作が効かない場合は、setTimeout関数のコールバックに確認ボックス表示以降の処理を記述する。

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

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

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

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

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

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

    val = Math.abs( val );

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

    キーワード:
  • 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メソッドの呼び出しで編集履歴の初期化を確定させている感じ。

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

    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 になる。

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

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

    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：数値の未定義型）かどうか調べる。

    キーワード:
  • 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関数を使い分ける。

    キーワード:
  • 日数を計算する

    2つの日付（文字列）から日数を計算する

    var date1 = '2012/11/28', date2='2012/11/30';
alert( ( new Date( date2 ) - new Date( date1) )/86400000 );

    JavaScriptのDateクラスを使ってDateオブジェクトを生成し、それを引き算すると、両者の差がミリ秒単位で求められる。それを1日のミリ秒数の86400000で割り、日数を算出している。

    キーワード:
  • jQuery UIのSliderの値を取得する

    IDが’slider1’の要素について、その値を取得し、変数valに格納する。

    var val = $( "#slider1" ).slider( 'value' );

    取得できる値は、確定された値である。ドラッグ中の値を使う場合は、slideイベントハンドラの第2パラメータuiのvalueプロパティを参照する。

    キーワード:
  • 別ページへ遷移させる

    ‘index.html’へ遷移させる。

    location.href = 'index.html';

    遷移の際、ページの状態を保持するブラウザと保持しないブラウザがあるため、ブラウザのヒストリバックで戻った際の表示内容に差異が生じる。

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