このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。過度な期待はしないでください。
あと、ブラウザはChromeやFirefoxの最新版をお勧めいたします。
現在のli要素が親のul要素内で何番目なのか取得する。
var pos = $( this ).prevAll( 'li' ).length;
/* または、要素名を省略して */
var pos = $( this ).prevAll( ).length;
prevAll関数で同レベルで前にある要素を取得でき、そのlengthプロパティで取得した要素数を調べることで、現在の要素が何番目がわかる。0ならば前に要素はなく現在の要素が先頭の要素となり、1ならば前に1つ要素があることを意味する。
IDがstartdateの要素にdatepickerを割り当て、タイトル部分の月、年の並びを逆にする。
$( '#startdate' ).datepicker( {
showMonthAfterYear: true
} );
showMonthAfterYearプロパティのデフォルト値はfalseなので、trueを指定する。なお日本語の基本的な設定は、ui.datepicker-ja.jsを利用するのが便利。
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プロパティには’#’付きでアンカーの値が格納されている。なお、アンカーがない場合は”になる。
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 になる。
HTML5のvideo要素で再生時間を取得して10秒後に何かする。
$( 'video' ).on( 'timeupdate', function ( event ) {
if ( $(this)[0].currentTime >= 10 ) {
// 10秒以上経過した際の処理
// 動画の長さは$(this)[0].duration
}
} );
video要素のtimeupdateイベントは、再生中や前後へのシークによって動画の再生箇所が変更になった際に発生する。過負荷にならないよう通常再生時は1秒間に数回（ブラウザ依存）発生する。現在の再生時間はcurrentTimeプロパティに開始からの経過秒数が浮動小数点数で格納されている。また動画の長さ（秒数）はdurationプロパティに格納されている。
変数の内容が数（数値または数字で構成された文字列）か調べる。
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関数を使い分ける。
‘index.html’へ遷移させる。
location.href = 'index.html';
遷移の際、ページの状態を保持するブラウザと保持しないブラウザがあるため、ブラウザのヒストリバックで戻った際の表示内容に差異が生じる。
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;’をセットすると元の位置に戻る。
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が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には移動位置は最初の位置からの相対位置が格納されている。
表の上下に2つあるクラス指定されたチェックボックスのクリック処理を行う
$( '.hide-unchecked:first' ).click();
オン／オフ時のアクションがあるチェックボックスを1ページに偶数個指定している場合、セレクタでクラスのみ（上記の場合は.hide-unchecked）を指定するとクリック処理が偶数回実行されてしまい、意図した動作にならない。クラス指定されたボタン類を1回だけ実行したい場合はクラス指定の後に「:first」を付けることで問題を回避できる。
IDがstartdateの要素にdatepickerを割り当て、タイトル部分の年、月をプルダウンにする。
$( '#startdate' ).datepicker( {
changeYear: true,
changeMonth: true,
} );
changeYearおよびchangeMonthプロパティのデフォルト値はfalseなので、初期化時にtrueを指定する（どちらか一方も可）。これにより、年、月のプルダウンになり表示年月の切り替えできる。
IDがcontentの要素を空にする。
$( '#content' ).empty();
$( '#content' ).html( '' ) で問題ないような気もする。
