基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの一覧です。
May 08, 2017 追記
- 「jQuery Snippets #10」を追加しました。
May 07, 2017 追記
- 「jQuery Snippets #9」を追加しました。
September 16, 2016 追記
- 「jQuery Snippets #8」を追加しました。
April 25, 2016 追記
- 「jQuery Snippets #7」を追加しました。
February 04, 2016 追記
- 「jQuery Snippets #6」を追加しました。
January 05, 2016 追記
- 「jQuery Snippets #5」を追加しました。
jQuery Snippets #1
- 要素にidやclassを追加・削除したい
- 要素に連番付きのidやclassを追加したい
- classやidの有無を判断する
- 要素の有無を判断する
- スムーススクロール(アンカー先に)
- スムーススクロール(固定ヘッダー使用時などに)
- スムーススクロール(ページトップに戻るのみ)
- スクロールしたら表示されるページトップ
- アコーディオン
- タブ切り替え
jQuery Snippets #2
- 読み込み時(load)・リサイズ時(resize)・スクロール時(scroll)の処理をまとめる
- ウィンドウリサイズで操作後のみ実行する
- ゼブラストライプ
- 数秒後に〇〇する
- 外部リンクにtarget="_blank"を付加する
- リンク先によって異なるclassを付加する
- 要素を順番にフェードインさせる
- 要素の高さを一番高いものに合わせる
- フォーカスすると表示領域が伸びる入力フィールド
- 確認ダイアログを表示する
jQuery Snippets #3
- 要素の幅・高さを取得する
- 現在のウィンドウサイズやスクロール量などを取得・表示する
- ウィンドウサイズによって処理を変える
- 背景画像などをウィンドウサイズいっぱいにする
- カーソルの動きによって背景が動く簡易的なパララックスエフェクト
- 簡易的なフェードスライド
- 画像が読み込まれない時に代替画像を表示
- 画像が読み込まれない時にimg要素を削除
- スマートフォンの場合に電話番号リンクを有効にする
- スマートフォン以外の場合に電話番号リンクを無効にする
jQuery Snippets #4
- hoverでon/off切り替え
- on(mouseenter/mouseleave)でon/off切り替え
- ホバー時に透過させる
- ホバー時に一瞬点滅させる
- ホバーでclassの付与・削除
- ホバーでon/offフェード切り替え
- 指定要素内にあるリンク先に飛ぶ
- クリックで要素が震える
- クリックで要素が震える
- ○○秒以上ホバーしたら...
jQuery Snippets #5
- YouTubeをクリック後に読み込み・再生させる #1
- YouTubeをクリック後に読み込み・再生させる #2
- 簡易的なカウントアップ
- classを利用したシンプルなフィルタ機能
- CSSのアニメーション完了をjQueryで取得する
- CSSの!importantを使用する
- 要素に指定されたスタイルを一気にリセットする
- ランダムに文字カラーを変更する
- 要素が空の場合はその要素ごと削除する
- 右クリックを無効にする
jQuery Snippets #6
- 便利なtoggle系メソッド
- チェックボックスをまとめてチェックする
- チェックされたら押下可能になるボタン
- 数字を自動的にカンマ(,)区切りにする
- 数字のみ入力できるようにする
- 全角入力された英数字を半角に変換する
- 半角入力された英数字を全角に変換する
- input要素にreadonlyやdisabledを指定する
- 現在入力されている文字数を表示する #1
- 現在入力されている文字数を表示する #2
jQuery Snippets #7
- 画像のアスペクト比を割り出して、値によって処理を加える
- ホバーした要素以外に処理
- CSSのプロパティ値を取得する
- アコーディオン -特定のアコーディオンを初期表示で展開させておく-
- アコーディオン -特定数に達していない場合は無効化する-
- アコーディオン -開閉時にテキストを変更する-
- アコーディオン -コンテンツ内のボタンでも閉じれるようにする-
- チェックボックスでチェックできる最大数を設定する
- ページ遷移するselect要素
- ページ遷移するselect要素+α
jQuery Snippets #8
- 擬似要素のCSSを変更する #1
- 擬似要素のCSSを変更する #2
- 別ページから遷移した時に特定のタブを開いた状態にする
- テキストを1文字ずつ任意のタグで括る
- テキストを1文字ずつ任意のタグで括る -番号付きclassを付ける-
- テキストを1文字ずつ表示させる
- ページ最下部にスクロールさせる
- ページ表示後に特定の箇所へスクロールさせる
- サムネイルをクリックして、メインイメージを切り替える
- iframeをリロードする
jQuery Snippets #9
- セレクトボックスを連動させる
- 年月日のセレクト内の項目を自動生成する
- ラジオボタンでコンテンツ切り替え
- 各種フォーム要素の値取得
- 各種フォーム要素の値有無や変化を判別して処理をする
- 入力されたら(されていたら)label要素にクラスを付与
- パスワードを表示させる
- .each()を逆にする
- オーバーレイの作成と表示・非表示の処理
- 座標を取得する