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

  • チェックボックスをオン／オフする

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

    キーワード:
  • 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関数のコールバックに確認ボックス表示以降の処理を記述する。

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

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

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

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

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

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

    val = Math.abs( val );

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

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

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

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

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

    キーワード:
  • 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 になる。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    location.href = 'index.html';

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

    キーワード:
  • jQueryで初期処理を行う

    jQueryでさまざまな初期処理を行う場合はready関数を使う。

    $(document).ready( function() {
	/* ここにスクリプトを記述する */
} );

    HTMLドキュメント（DOM）が読み込まれ、操作可能になったタイミングで実行される（window.onloadイベント前）。

    キーワード:
  • 値が定義されているか調べる

    現在の要素のid属性が指定されているか調べる。

    if ( typeof $( this ).attr( 'id' ) != 'undefined' ) {
	/* 値が定義されている場合の処理 */
}

// 変数valを調べる場合は
if ( typeof val != 'undefined' ) {
	/* 値が定義されている場合の処理 */
}

    typeof演算子で値の型を取得できる。未定義の場合は’undefined’、文字列は’string’、数値は’number’、nullまたはオブジェクトは’object’となる。

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

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

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

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

    キーワード:
  • 動画の再生時間を取得して何かする

    HTML5のvideo要素で再生時間を取得して10秒後に何かする。

    $( 'video' ).on( 'timeupdate', function ( event ) {
	if ( $(this)[0].currentTime >= 10 ) {
		// 10秒以上経過した際の処理
		// 動画の長さは$(this)[0].duration
	}
} );

    video要素のtimeupdateイベントは、再生中や前後へのシークによって動画の再生箇所が変更になった際に発生する。過負荷にならないよう通常再生時は1秒間に数回（ブラウザ依存）発生する。現在の再生時間はcurrentTimeプロパティに開始からの経過秒数が浮動小数点数で格納されている。また動画の長さ（秒数）はdurationプロパティに格納されている。

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