ホーム > イベント (全8件)
  • クラス指定されたチェックボックスのクリック処理を行う

    表の上下に2つあるクラス指定されたチェックボックスのクリック処理を行う

    $( '.hide-unchecked:first' ).click();

    オン／オフ時のアクションがあるチェックボックスを1ページに偶数個指定している場合、セレクタでクラスのみ（上記の場合は.hide-unchecked）を指定するとクリック処理が偶数回実行されてしまい、意図した動作にならない。クラス指定されたボタン類を1回だけ実行したい場合はクラス指定の後に「:first」を付けることで問題を回避できる。

    キーワード:
  • コントロール＋クリックのイベントを実行させる

    コントロールキーを押しながらクリックした時のイベントを発行する。

    ctrl_click = $.Event( 'click' );
ctrl_click.ctrlKey = true;
$(this).trigger( ctrl_click );

    事前にクリックイベントオブジェクトを生成し、ctrlKeyプロパティにtrueを設定してtriggerメソッドを利用する（$(this)は適宜変更）。

    キーワード:
  • エンターキーが押された時に何かする

    IDがaddrの入力ボックスでエンターキーが押された時に何かする

    $( '#addr' ).keypress( function ( e ) {
	if ( e.which == 13 ) {
		// ここに処理を記述
		return false;
	}
} );

    押されたキーはe.whichで確認でき、エンターキーは13となる。falseを返すことでイベントの引継ぎは中断される。

    キーワード:
  • チェックボックスのクリック時の対応を指定する

    チェックボックスのクリック時の処理を指定する。

    /* 単独のクリックイベント処理の場合 */
$( 'input[type="checkbox"]' ).click( function() {
	// ここに処理内容を記述する
} );

/* ブラウザ標準のイベント処理を行わない場合 */
$( 'input[type="checkbox"]' ).click( function( e ) {
	// ここに処理内容を記述する
	e.preventDefault();
} );

    属性の値を指定して検索する場合は [属性名=属性値] の書式で指定する。onClickイベントの処理はclick関数で対応する関数を指定すればよい。

    キーワード:
  • ブラウザのサイズ変更（リサイズ）で何かする

    ブラウザのサイズが変更された際、変更後のサイズに合わせて位置や領域を調整する。

    $(document).ready( function () {
	$(window).resize( function () {
		// ここに処理内容を記述
	} );
}

    onResizeイベントはresize関数に処理内容を記述すればいい。

    キーワード:
  • onChangeイベントを処理する

    IDがperfのSELECT要素のonChangeイベントを処理する。

    $( '#perf' ).change( function () {
	// ここに処理内容を記述
} );

    選択されたOPTION要素（の値）、処理中に $(this).children(':selected').val() を記述する。

    キーワード:
  • onClickイベントを処理する

    IDがpagetopのA要素のonClickイベントを処理する。

    $( '#pagetop' ).click( function () {
	// ここに処理内容を記述
	return false;
} );

    通常のJavaScriptと同様に、ページ遷移させない場合はfalseを返す。なお追加したコンテンツ内でonClickイベントを処理する場合はonメソッドが使える。

    キーワード:
  • jQueryで初期処理を行う2

    HTMLドキュメント、画像が読み込まれたタイミング（window.onloadイベント）で実行するスクリプトを記述する。

    jQuery.event.add( window, 'load', function() {
	/* ここにスクリプトを記述する */
} );

    onloadイベント前に何らかの処理を行う場合は、ready関数を使用する。

    キーワード:
 
 
ツールバーへスキップ