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

  • 1秒後に何かする

    1秒後に何かする。

    setTimeout( function () {
    	// ここに1秒後の処理を
    	} , 1000 );
    // 処理を中止する場合
    try { clearTimeout(); } catch ( e ) {}
    

    第2パラメータには実行までの時間を何ミリ秒単位(1秒後なら1000)を指定する。setInterval関数と異なり、第1パラメータの関数が実行されるのは一度きり。なお、処理を中止する場合は、clearTimeout関数を呼び出す。その際、すでにタイムアウト後の処理を実行した後でclearTimeout関数を呼び出すと、一部ブラウザ(IE)では例外が発生し以降の処理を中断してしまうので、try節で囲んで使ったほうが安全。

  • 全要素がフェードアウトした後に何かする

    user1クラスの要素をフェードアウトし、その後に何かする。

    $( '.user1' ).fadeOut( 'fast' ).promise().done( function () {
    	// ここに全要素フェードアウト後の処理を
    } );
    
    /* おまけ: eachでも同じように記述できる */
    $( '.user1' ).each( function () {
    	// ここに各要素に適用する処理を
    } ).promise().done( function () {
    	// ここに全要素適用後の処理を
    } );
    

    fadeOutやfadeIn関数にはコールバック関数の指定があるが、それらは各要素の表示効果後に呼び出されるため、最後にまとめて1回処理するようなケースには向かない。そんなケースに向いているのが、promise関数と組み合わせたdone関数である。(jQuery 1.6以降)

  • ページ内リンクをスムーズにする

    ページ内リンクをスムーズにする。

    $( 'a[href^=#]' ).click( function () {
    	pos = $( $(this).attr( 'href' ) ).offset().top;
    	$( 'html,body' ).animate( { scrollTop: pos }, 'fast' );
    	return false;
    } );
    

    セレクタで’a[href^=#]’を指定することでa要素のhref属性の値が’#’で始まっているページ内リンクを取得。そのクリックイベントで、対象のアンカー要素のトップ座標を取得してスクロールを実現している。

  • 自要素のHTMLを取得する

    IDがtr1のtd要素のHTMLを取得して連結する。

    var new_tr = '';
    $( '#tr1 > td' ).each( function () {
    	new_tr += $(this).context.outerHTML;
    } );
    

    html関数で取得できるのは自要素が内包する部分のみなので、自要素(この例ではtd要素)を含む場合はcontext.outerHTMLを参照する。

  • 兄弟要素を取得する

    兄弟要素(同じ親要素で自分以外)を取得する。

    // contentクラスの兄弟要素について何か処理する
    $(this).siblings( '.content' ).each( function () {
    	// ここに処理を記述
    } );
    
    // 2番目以降のli要素を非表示にする
    $( 'ul > li:first' ).siblings( 'li' ).hide();
    

    兄弟要素を取得する場合に使用(自要素は取得対象にならない)。パラメータに条件を指定できるので、特定の要素名やクラスといった絞り込みが可能である。

  • ダイアログボックスのサイズを調整する

    初期化時にダイアログボックスのサイズを設定する。

    /* 幅(省略時は300)と高さ(省略時は'auto')を指定 */
    $( '#dialog1' ).dialog( { width: 500, height: 400 } );
    
    /* 最小幅(省略時は150)と最少高さ(省略時は150)を指定 */
    $( '#dialog1' ).dialog( { minWidth: 400, minHeight: 200 } );
    
    /* 最大幅(省略時はfalse)と最大高さ(省略時はfalse)を指定 */
    $( '#dialog1' ).dialog( { maxWidth: 800, maxHeight: 600 } );
    
    /* リサイズ不可(省略時はtrue(リサイズ可))に設定 */
    $( '#dialog1' ).dialog( { resizable: false } );
    

    jQuery UIのダイアログボックスで、サイズに関連するプロパティはこの7種類。幅および高さで指定する値はピクセル値(数値だけでよい)、resizableにはtrueまたはfalseを指定する。

  • 要素を複製する

    先頭のtr要素を複製して末尾に追加する

    $( 'tr:last' ).after( $( 'tr:first' ).clone( true ) );
    

    clone関数により指定した要素(子要素を含む)を複製できる。引数はその要素に割り当てられたイベント設定も同時に複製するかどうかの指定で、trueの場合はイベント設定も複製される。
    複製した要素が子要素としてinputタグを含む場合、value属性値は複製時に設定されている値にならない場合(jQuery 1.9.1など)があるので注意が必要。

  • 配列に値が入っているか調べる

    指定した値が配列の中に入っているか調べる。

    var colors = [ 'red', 'yellow', 'green', 'blue' ];
    if ( jQuery.inArray( 'green', colors ) == -1 ) {
    	/* 見つからなかった場合の処理 */
    }
    
    /* 見つかった要素を削除する */
    idx = jQuery.inArray( 'green', colors );
    if ( idx != -1 )
    	colors.splice( idx, 1 );
    

    PHPのin_array関数よりはarray_search関数に近い。配列内の値を調べ、最初に見つかったキーの値を返す。見つからない場合は-1を返す。

  • 8秒毎に何かする

    8秒毎に何かする。

    var timer_id = setInterval( function () {
    	// ここに8秒毎の処理を
    	} , 8000 );
    
    // 繰り返しを中止する場合
    clearInterval( timer_id );
    

    第2パラメータには実行までの時間を何ミリ秒単位(1秒後なら1000)を指定する。setTimeout関数と異なり、第1パラメータの関数は指定された間隔で繰り返し実行される。なお、繰り返しを中止する場合は、setInterval関数の戻り値を指定してclearInterval関数を呼び出す。

  • レンジ入力(input[type=range])の変更時の値をリアルタイムに取得する

    レンジ入力(input[type=range])の変更時の値をリアルタイムに取得する。

    /* 変更中(ドラッグ中) */
    $( 'input[type=range]' ).on( 'input', function () {
    	var val = $(this).val();
    } );
    
    /* 変更後 */
    $( 'input[type=range]' ).change( function () {
    	var val = $(this).val();
    } );
    

    HTML5のレンジ入力(input[type=range])要素に関連するイベントは、変更後(ドラッグ後)はchangeイベントになるが、ドラッグ中はinputイベントになる。inputイベントは、汎用的なイベント関数であるon関数を利用すること。

  • 要素の高さを取得する

    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つ要素があることを意味する。

  • 文字列を数値(浮動小数点数)に変換する

    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関数の振舞が異なる。ラジオボタンも基本的には同じだが、隣接するラジオボタンを考慮する必要がある。

  • 要素のstyle属性を設定する

    IDがfeatureの要素のstyle属性を設定する。

    /* 1つの属性値を設定する */
    $('#feature').css( 'color', '#000000' );
    
    /* 複数の属性値を設定する */
    $('#feature').css( {
    	color: '#000000',
    	background-color: '#FFFFFF'
    } );
    

    attr関数でstyle属性を変更することと同じで、上記であれば$(‘#feature’).attr( ‘style’, ‘color: #000000’ );$(‘#feature’).attr( ‘style’, ‘color: #000000; background-color: #FFFFFF;’ );のように記述できる。

  • datepickerの選択可能範囲を指定する

    IDがstartdateの要素にdatepickerを割り当て、選択可能範囲を指定する。

    $( '#startdate' ).datepicker( {
    	minDate: new Date(),
    	maxDate: new Date( 2012, 2, 29 )
    } );
    

    minDateプロパティが選択可能な開始日、maxDateプロパティが選択可能な最終日となる。初期値はどちらもnullで範囲制限されておらず、必要に応じてDateオブジェクトを指定する。上記の例は、開始日をアクセスした日からとし、最終日を2012年2月29日までとしている

  • ページ内アンカーを取得する

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

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

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

  • 子要素を探す

    IDがchecksheetの要素の子要素からinput要素を探す。

    /* 全子孫要素から探す */
    $( '#checksheet' ).find( 'input' ).each( function () {
    	// ここに子のinput要素の処理
    } );
    
    /* 子要素から探す(孫要素以下は検索対象外) */
    $( '#checksheet' ).children( 'input' ).each( function () {
    	// ここに子のinput要素の処理
    } );
    

    検索範囲によってfind関数とchildren関数を使い分ける。