表の上下に2つあるクラス指定されたチェックボックスのクリック処理を行う
$( '.hide-unchecked:first' ).click();
オン／オフ時のアクションがあるチェックボックスを1ページに偶数個指定している場合、セレクタでクラスのみ（上記の場合は.hide-unchecked）を指定するとクリック処理が偶数回実行されてしまい、意図した動作にならない。クラス指定されたボタン類を1回だけ実行したい場合はクラス指定の後に「:first」を付けることで問題を回避できる。
ホーム > click (全7件)
中断ボタンをクリックした際に要素を消して確認ボックスを表示する。
$( '#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関数のコールバックに確認ボックス表示以降の処理を記述する。
ページ内リンクをスムーズにする。
$( 'a[href^=#]' ).click( function () { pos = $( $(this).attr( 'href' ) ).offset().top; $( 'html,body' ).animate( { scrollTop: pos }, 'fast' ); return false; } );セレクタで’a[href^=#]’を指定することでa要素のhref属性の値が’#’で始まっているページ内リンクを取得。そのクリックイベントで、対象のアンカー要素のトップ座標を取得してスクロールを実現している。
IDが’drop_here’の要素にdragenter、dragleave、dropイベントのハンドラを設定する。
$( '#drop_here' ).bind( 'dragenter', function ( event ) { /* ここにdragenter（ドラッグ状態でカーソルが要素内に入った）時の処理を記述 */ } ).bind( 'dragleave', function ( event ) { /* ここにdragleave（ドラッグ状態でカーソルが要素の外へ出た）時の処理を記述 */ } ).bind( 'drop', function ( event ) { /* ここにdrop時の処理を記述 */ } );jQueryは、clickやchange関数のようにHTML標準のイベントハンドラ用の関数を用意しているが、用意されていない関数はbind関数で設定でき、連結して記述できる。
チェックボックスのクリック時の処理を指定する。
/* 単独のクリックイベント処理の場合 */ $( 'input[type="checkbox"]' ).click( function() { // ここに処理内容を記述する } ); /* ブラウザ標準のイベント処理を行わない場合 */ $( 'input[type="checkbox"]' ).click( function( e ) { // ここに処理内容を記述する e.preventDefault(); } );属性の値を指定して検索する場合は [属性名=属性値] の書式で指定する。onClickイベントの処理はclick関数で対応する関数を指定すればよい。
IDがpagetopのA要素のonClickイベントを処理する。
$( '#pagetop' ).click( function () { // ここに処理内容を記述 return false; } );通常のJavaScriptと同様に、ページ遷移させない場合はfalseを返す。なお追加したコンテンツ内でonClickイベントを処理する場合はonメソッドが使える。
idがpagetopの要素をクリックすると、ページのトップへスクロールする。
$('#pagetop').click( function() { $('html,body').animate({'scrollTop':'0px'},'slow'); return false; } );html要素はIE7～9、Firefox 9.01、Opera 11.60が動作する（Chrome 16、Safari 5.1はNG）。body要素はChrome 16、Safari 5.1が動作する（IE7～9、Firefox 9.01、Opera 11.60はNG）。このようなことから、htmlとbody要素の両方を指定する必要がある。
