INPUT要素の値を取得し、浮動小数点数に変換して変数valに格納する。
var val = parseFloat( $( 'input' ).val() );
浮動小数点数はこのparseFloat関数を、整数の場合はparseInt関数を使用する。なお、”や文字から始まる文字列は NaN になる(’.12’のように、’.’から始まる場合は正しく変換される)。
このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。過度な期待はしないでください。
あと、ブラウザはChromeやFirefoxの最新版をお勧めいたします。
INPUT要素の値を取得し、浮動小数点数に変換して変数valに格納する。
var val = parseFloat( $( 'input' ).val() );
浮動小数点数はこのparseFloat関数を、整数の場合はparseInt関数を使用する。なお、”や文字から始まる文字列は NaN になる(’.12’のように、’.’から始まる場合は正しく変換される)。
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関数を使い分ける。
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()
とすることでドキュメントの高さ(長さ)を取得できる。
現在のli要素が親のul要素内で何番目なのか取得する。
var pos = $( this ).prevAll( 'li' ).length;
/* または、要素名を省略して */
var pos = $( this ).prevAll( ).length;
prevAll関数で同レベルで前にある要素を取得でき、そのlengthプロパティで取得した要素数を調べることで、現在の要素が何番目がわかる。0ならば前に要素はなく現在の要素が先頭の要素となり、1ならば前に1つ要素があることを意味する。
中断ボタンをクリックした際に要素を消して確認ボックスを表示する。
$( '#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オブジェクトで。
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:数値の未定義型)かどうか調べる。
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で割り、日数を算出している。
‘index.html’へ遷移させる。
location.href = 'index.html';
遷移の際、ページの状態を保持するブラウザと保持しないブラウザがあるため、ブラウザのヒストリバックで戻った際の表示内容に差異が生じる。
IDがcontentの要素を空にする。
$( '#content' ).empty();
$( '#content' ).html( '' )
で問題ないような気もする。
現在の要素のid属性が指定されているか調べる。
if ( typeof $( this ).attr( 'id' ) != 'undefined' ) {
/* 値が定義されている場合の処理 */
}
// 変数valを調べる場合は
if ( typeof val != 'undefined' ) {
/* 値が定義されている場合の処理 */
}
typeof演算子で値の型を取得できる。未定義の場合は’undefined’、文字列は’string’、数値は’number’、nullまたはオブジェクトは’object’となる。