このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。過度な期待はしないでください。
あと、ブラウザはChromeやFirefoxの最新版をお勧めいたします。
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メソッドの呼び出しで編集履歴の初期化を確定させている感じ。
リクエストURLのページ内アンカーが’#tab1’か調べる。
if ( location.hash == '#tab1' ) {
/* アンカーが'#tab1'の場合の処理を記述する */
}
locationのhashプロパティには’#’付きでアンカーの値が格納されている。なお、アンカーがない場合は”になる。
IDがitemの要素にdraggableを適用し、ドラッグ中とドラッグ終了イベントの処理を行う。
$(document).ready( function () {
$( '#item' ).draggable( {
drag: function ( e, ui ) {
if ( ui.position.left > 0 ) {
// 最初の位置よりも右側に移動した場合
}
},
stop: function ( e, ui ) {
if ( ui.position.top > 0 ) {
// 最初の位置よりも下側に移動した場合
}
}
} );
} );
drapプロパティにはドラッグ中に発生するイベントの関数を、stopプロパティにはドラッグ終了時に発生するイベントの関数を指定する。イベント関数が受け取るui.position.topとleftには移動位置は最初の位置からの相対位置が格納されている。
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 になる。
IDがitemの要素にdraggableを適用し、ドラッグ終了時に移動範囲が±100ピクセル以内なら元の位置に戻す。
$(document).ready( function () {
$( '#item' ).draggable( {
stop: function ( e, ui ) {
if ( Math.abs( ui.position.top ) <= 100 &&
Math.abs( ui.position.left ) <= 100 ) {
$(this).attr( 'style', 'position: relative;' );
}
}
} );
} );
attr関数で、style属性値に’position: relative;’をセットすると元の位置に戻る。
変数の内容が数（数値または数字で構成された文字列）か調べる。
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で割り、日数を算出している。
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’となる。
button要素の前にあるinput要素の値を”にする。
/* 直前のinput要素1つだけ適用する */
$( "button" ).prev( 'input' ).val( '' );
/* 前のinput要素全てに適用する */
$( "button" ).prevAll( 'input' ).val( '' );
探す要素が1つかすべてかでprev関数とprevAll関数を使い分ける。
‘index.html’へ遷移させる。
location.href = 'index.html';
遷移の際、ページの状態を保持するブラウザと保持しないブラウザがあるため、ブラウザのヒストリバックで戻った際の表示内容に差異が生じる。
jQuery UI 1.9.xにアップデートしてautocompleteウィジェットの要素の後に表示される「n results are available, use up and down arrow keys to navigate.」を非表示にする。
/* cssに次の指定を追加 */
.ui-helper-hidden-accessible {
display: none;
}
jQuery UIを1.9.xへアップデートしたautocompleteウィジェットではその候補数を出力するようになった（おそらく他のウェジェットも）。jQuery UIを独自のcssで表示している場合は、ui-helper-hidden-accessibleクラスを表示しないスタイルを追加すること。
IDがstartdateの要素にdatepickerを割り当て、タイトル部分の年、月をプルダウンにする。
$( '#startdate' ).datepicker( {
changeYear: true,
changeMonth: true,
} );
changeYearおよびchangeMonthプロパティのデフォルト値はfalseなので、初期化時にtrueを指定する（どちらか一方も可）。これにより、年、月のプルダウンになり表示年月の切り替えできる。
thead要素内のtd要素のインデックスを取得する。
$( 'thead td' ).each( function () {
var index = $(this).index();
} );
table要素やul要素内で繰り返し使われる要素は配列になっており、それらのインデックスを取得する場合に使用する。先頭要素のインデックスは0となる。
IDがcontentの要素を空にする。
$( '#content' ).empty();
$( '#content' ).html( '' ) で問題ないような気もする。
idがperfの選択された値を取得する。
/* single selection */
var perf = $( 'select#perf option:selected' ).val();
/* multiple selection */
var perf = new Array();
$( 'select#perf option:selected' ).each( function () {
perf.push( $(this).val() );
} );
複数選択の場合は、$( 'select#perf option:selected' ).lengthで選択数を取得できる。
IDがaddrの入力ボックスでエンターキーが押された時に何かする
$( '#addr' ).keypress( function ( e ) {
if ( e.which == 13 ) {
// ここに処理を記述
return false;
}
} );
押されたキーはe.whichで確認でき、エンターキーは13となる。falseを返すことでイベントの引継ぎは中断される。
