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