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

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

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

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

    キーワード:
  • wPaintで再初期化する

    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メソッドの呼び出しで編集履歴の初期化を確定させている感じ。

    キーワード:
  • IE7でrowspan属性値を取得・変更する

    idが’cell-a1’のセルのrowspan属性値を取得して1増やす。

    $( '#cell-a1' ).each( function () {
	var rowspan = 1;
	if ( typeof $(this).attr( 'rowSpan' ) !== 'undefined' )
		rowspan = parseInt( $(this).attr( 'rowSpan' ) );
	$(this).attr( 'rowSpan', rowspan+1 );
} );

    IE7では’rowspan’を指定しても値を取得・更新できない。IE7に対応するためには名前を’rowSpan’（Sのみ大文字）にする（’colspan’は’colSpan’に）。もう1つの注意点は、IE7ではrowspan属性値が1と記述していてもその属性値を取得するとundefinedになるため、typeofを使って比較するといった工夫が必要になる。

    キーワード:
  • 2つの要素をまとめて移動する

    現在の要素とその次の要素を同列の先頭に移動する。

    $(this).siblings( ':first' ).before( $(this), $(this).next() );

    before関数のパラメータは複数指定できるので、2つの要素を同時に移動させる場合はそれぞれ（上記の例では$(this)と$(this).next()）を指定すればいい。

    キーワード:
  • 自要素の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();

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

    キーワード:
  • 動画の再生時間を取得して何かする

    HTML5のvideo要素で再生時間を取得して10秒後に何かする。

    $( 'video' ).on( 'timeupdate', function ( event ) {
	if ( $(this)[0].currentTime >= 10 ) {
		// 10秒以上経過した際の処理
		// 動画の長さは$(this)[0].duration
	}
} );

    video要素のtimeupdateイベントは、再生中や前後へのシークによって動画の再生箇所が変更になった際に発生する。過負荷にならないよう通常再生時は1秒間に数回（ブラウザ依存）発生する。現在の再生時間はcurrentTimeプロパティに開始からの経過秒数が浮動小数点数で格納されている。また動画の長さ（秒数）はdurationプロパティに格納されている。

    キーワード:
  • リストを並び替える

    リスト（idがranking）の内容をdata-count属性の値で昇順に並び替える。

    $('ul#ranking' ).html(
	$('ul#ranking > li' ).sort(
		function ( _a, _b ) {
			return parseInt( $(_a).data( 'count' ) ) < parseInt( $(_b).data( 'count' ) ) ? -1 : 1;
		}
	)
);

    sort関数のコールバック関数で評価対象となる_a要素と_b要素の値（ここではdata-count属性）を判定し、正または負の値を返すだけ。比較演算子の向きを変えれば降順にできる。なおこの例ではul要素を並び替えたが、table要素も同様に並び替えできる。

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

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

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

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

    キーワード:
  • ページ内リンクをスムーズにする

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

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

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

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

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

    $( '.user1' ).fadeOut( 'fast' ).promise().done( function () {
	// ここに全要素フェードアウト後の処理を
} );

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

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

    キーワード:
  • HTML5の独自データ属性の値を取得する

    data-size属性の値を取得する。

    /* $( this )の場合 */
var size = $( this ).data( 'size' );

/* td要素で他の独自データ属性を使って他と区別したい場合 */
var size = $( 'td[data-size]' ).data( 'size' );

    data関数で’data-‘に続く名前を指定することで値を取得できる。値には文字列のほか、連想配列（オブジェクト）を指定できるらしい。

    キーワード:
  • 1秒後に何かする

    何かの要素があった場合、1秒後に何かする。

    $( '#slider' ).delay( 1000 ).queue( function () {
	// ここに1秒後の処理を
} );

    JavaScriptのsetTimeout関数のような振る舞いは、delay関数とqueue関数の組み合わせで実現できる。この例ではIDが’slider’の要素が存在した場合に、1秒後に何か処理を行う。

    キーワード:
  • jq-tilesにて任意のスライドに切り替えるメソッドを追加する

    独自ナビゲーションからスライドを切り替えるため、changeメソッドを追加してスライドを切り替える。

    /* nextメソッドの次あたりに追加 */
change: function( idx ) {
	if ( this._getCurrentIdx() != idx && this.$wraps.length > idx ) {
		this.stop();
		return this._navigate( idx, $.noop );
	}
},

/* 使用例 */
$( '.slider' ).tilesSlider( 'change', 1 );

    jq-tilesのソースコードjquery.tiles.jsにchangeメソッドを追加。パラメータidxは切り替えたいスライドの番号（0～）で、現在のスライドと同じか最終スライド番号よりも大きい場合はなにもしない。なおスライド切り替え時には、stopメソッドを使って自動切り替えを停止している。これはお好みで。

    キーワード:
  • どこかがクリックされた時に何かする

    WordPressの管理画面で「メディアを追加」のダイアログがクローズされたタイミングで何か処理をする。

    $( document ).on( 'click', '.media-modal-close', function () {
	// ここに処理内容を記述
} );

    on関数はイベントハンドラを登録するもの。同様の機能として、live関数やdelegate関数があるが、jQuery 1.7以降ではlive関数が非推奨になっており、このon関数を使用すべき。

    キーワード:
  • レンジ入力（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関数を利用すること。

    キーワード:
  • Google Mapsを初期化する

    idがgoogle-mapsの要素にマップを適用する。

    
$.event.add( window, 'load', function() {
	$( '#google-maps' ).each( function () {
		mapOptions = {
			zoom: 6,
			center: new google.maps.LatLng( 38.682, 139.333 )
		};
		var map = new google.maps.Map( $(this)[0], mapOptions );
	} );
} );

    loadイベントにて、idがgoogle-mapsの要素にマップを適用する。google.maps.Mapの第1パラメータはマップを適用させるDOMエレメントを指定するが、上記の通り$(this)[0]でいい。

    キーワード:
  • 要素を消したり表示したりする

    table要素を消したり表示したりする。

    /* すばやく消したり表示したりする */
$( 'table' ).toggle();

/* ゆっくり消したり表示したりする */
$( 'table' ).fadeToggle( 'slow' );

    toggle関数は、指定された要素の表示状態に応じてhide関数とshow関数を実行する。fadeToggle関数（ver1.4.4で追加）は、指定された要素の表示状態に応じてfadeOut関数とfadeIn関数を実行する。fadeToggle関数のパラメータはfadeOut関数およびfadeIn関数と同様で、duration（アニメーション時間：省略時400）、easing（動作パターン：省略時swing）、complete（完了時のコールバック関数）が指定できる。

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