JavaScript

jQuery

jQueryでチェックボックスの値を取得・全選択・外す

チェックボックスを全選択、とか、jQueryでチェックボックスの値を取得したり変更する方法です。.prop()を使っときゃいいみたいな記事をみかけたので一応、不具合対策も含めた自分なりのやり方をメモしておきます。 HTMLでは、チェックされたチェックボックスにはch … 続きを読む

画像(IMG要素)の読み込み後(loadイベント)の処理が動かない対策

jQueryを使って、画像(IMG要素)にイベントリスナーを設置したら動かなかったので対策したメモです。今まで気づかなかったのなんでかなぁ、とちょっと不思議でしたが単に物忘れだと思うので備忘録として書きます。 一定の間隔で複数の画像をスライドさせるようなコードをチャ … 続きを読む

ページ上部やページ内へのリンクをスクロールさせる

jQueryを使って、ページの上へ戻るボタンやページ内リンクをスクロールさせる方法です。基本的には簡単です。 準備 ページ内の特定の場所へ移動するリンクは、移動先のHTML要素にid属性を設定します。リンク元のhref属性には#(フラグメント識別子)に続くid … 続きを読む

ページをフワッとフェードインさせる

タイトル通り、ウェブページを読み込んだ時にふわっとフェードインで表示させるやり方です。フェードインは、CSSだけで再現するのであればanimationでできますが、今回のはjQueryの話になります。たまたま jQuery でフェードインするのに「CSS で body を非表示にしておきます」み … 続きを読む

jQueryでCSSのtransform: rotate()を使った回転アニメーションする際のメモ

回転のアニメーションを実現するだけのシンプルなjQueryプラグインもあるようですが、それだけのためにプラグイン読み込むのもイマイチなので、もっと簡単にCSSのtransitionを使って回転させます。 2016.9.17 追記 動かないコードが載っていたので削除して加筆修正 … 続きを読む

非同期(jQuery AJAX)でページ移動した時の履歴とかのメモ

「検索結果の次のページ」とか、AJAX使ってリンク先URLの内容を読み込んで表示する時に、「ブラウザの履歴とかアドレスバーをリンク先のものに書き換える」ためのメモです。window.history.pushState()を使います。 「検索結果の次のページ」の例で言 … 続きを読む