body要素のアニメーションを中止する。
$( 'body' ).stop();
// 実行中のアニメーションを中断し、背景を黒くするアニメーションを実行する
$( 'body' ).stop().animation( { backgroundColor: "#000000" }, 1000} );
アニメーションは要素別のキューに保存されており、stop関数はそのキューを空にする。キューが空で次のアニメーションが指定されている場合は、すぐに次のアニメーションが実行される。
ホーム > jQuery (全66件)
現在のli要素が親のul要素内で何番目なのか取得する。
var pos = $( this ).prevAll( 'li' ).length; /* または、要素名を省略して */ var pos = $( this ).prevAll( ).length;prevAll関数で同レベルで前にある要素を取得でき、そのlengthプロパティで取得した要素数を調べることで、現在の要素が何番目がわかる。0ならば前に要素はなく現在の要素が先頭の要素となり、1ならば前に1つ要素があることを意味する。
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関数で設定でき、連結して記述できる。
先頭のtr要素を複製して末尾に追加する
$( 'tr:last' ).after( $( 'tr:first' ).clone( true ) );clone関数により指定した要素（子要素を含む）を複製できる。引数はその要素に割り当てられたイベント設定も同時に複製するかどうかの指定で、trueの場合はイベント設定も複製される。
複製した要素が子要素としてinputタグを含む場合、value属性値は複製時に設定されている値にならない場合（jQuery 1.9.1など）があるので注意が必要。IDがaddrの入力ボックスでエンターキーが押された時に何かする
$( '#addr' ).keypress( function ( e ) { if ( e.which == 13 ) { // ここに処理を記述 return false; } } );押されたキーはe.whichで確認でき、エンターキーは13となる。falseを返すことでイベントの引継ぎは中断される。
IDがlistのUL要素内の先頭にLI要素を挿入する
$('ul#list').prepend( '<li>アイテム0</li>' ); <!-- html部分 --> <ul id="list"> <li>アイテム1</li> <li>アイテム2</li> </ul>機能は、
$('ul#list').html( '<li>アイテム0</li>'+$('ul#list').html() );と同じ。なお末尾に追加する場合はappend関数を使う。変数の内容が数（数値または数字で構成された文字列）か調べる。
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：数値の未定義型）かどうか調べる。
指定した値が配列の中に入っているか調べる。
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を返す。
idがleft-sideの要素のpadding分を含んだ幅を100pxにする。
$( '#left-side' ).outerWidth( 100 );idがleft-sideの要素がpadding:5pxの場合、
$( '#left-side' ).attr( 'style', 'width:90px;' );と同じ効果になる。なお、左右のpadding値を含まない指定する場合は、width関数を使用する。idがpost-1の要素の幅（padding分を含む）を取得する。
var width = $( '#post-1' ).outerWidth(); /* margin分を含んだ幅を取得する */ var width = $( '#post-1' ).outerWidth( true );取得できる幅はピクセル値で、左右のpadding分を含む（padding分を含まない幅はwidth関数を使用）。さらにパラメータとしてtrueを指定すると、左右のmargin分を含んだ幅を取得できる。
IDが’cancel’の要素がクリックされたら、IDが’view_content’の要素のアニメーションを中止する。
$( '#view_content' ).animate( { top: -1000 }, 3000 ); $( '#cancel' ).click( function () { $( '#view_content' ).stop(); } );特定の要素に対して実行しているアニメーション効果を中止する場合にstop関数を使用する。なおstop関数にはバージョンによって2または3のパラメータが指定可能。
tbody要素内の3番目のtr要素を検索する。
var trElm = $( 'tbody tr:eq(2)' ); /* 4番目以降のtr要素を検索する */ $( 'tbody tr:gt(2)' ).each( function () { /* ここに見つかったtr要素の処理を記述 */ } ); /* 2番目以前のtr要素を検索する */ $( 'tbody tr:lt(2)' ).each( function () { /* ここに見つかったtr要素の処理を記述 */ } );インデックスを指定できるセレクターとしては、:eq、:gt、:ltがある。先頭要素のインデックスを0として指定する。
thead要素内のtd要素のインデックスを取得する。
$( 'thead td' ).each( function () { var index = $(this).index(); } );table要素やul要素内で繰り返し使われる要素は配列になっており、それらのインデックスを取得する場合に使用する。先頭要素のインデックスは0となる。
button要素の前にあるinput要素の値を”にする。
/* 直前のinput要素1つだけ適用する */ $( "button" ).prev( 'input' ).val( '' ); /* 前のinput要素全てに適用する */ $( "button" ).prevAll( 'input' ).val( '' );探す要素が1つかすべてかでprev関数とprevAll関数を使い分ける。
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;’ );のように記述できる。
ajaxでJSON形式のデータを取得する。
jQuery.ajax( { type: 'POST', url: '/url', data: 'name1=value1&name2=value2', dataType: 'json', success: function( dataResponse, textStatus, jqXHR ) { // データ取得時の処理を }, error: function( jqXHR, textStatus, errorThrown ) { // データ取得失敗時の処理を } } );typeには’POST’または’GET’を、dataには必要に応じて「name1=value1」の形式でパラメータを、dataTypeには’json’のほか’xml’、’html’、’text’などが指定できる。successのコールバック関数の指定は
function( dataResponse ) {}のようにデータを受け取る変数だけでも構わない。ラジオボタンの次のlabel要素のテキストを取得する。
$( 'input[type="radio"]' ).each( function() { var text = $(this).next( 'label' ).text(); } );next関数は現在の要素と同階層の次の要素を検索する。逆に前の要素を検索する場合はprev関数を使用する。
チェックボックスのクリック時の処理を指定する。
/* 単独のクリックイベント処理の場合 */ $( 'input[type="checkbox"]' ).click( function() { // ここに処理内容を記述する } ); /* ブラウザ標準のイベント処理を行わない場合 */ $( 'input[type="checkbox"]' ).click( function( e ) { // ここに処理内容を記述する e.preventDefault(); } );属性の値を指定して検索する場合は [属性名=属性値] の書式で指定する。onClickイベントの処理はclick関数で対応する関数を指定すればよい。
