基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの一覧です。

May 08, 2017 追記

May 07, 2017 追記

September 16, 2016 追記

April 25, 2016 追記

February 04, 2016 追記

January 05, 2016 追記

jQuery Snippets #1

  1. 要素にidやclassを追加・削除したい
  2. 要素に連番付きのidやclassを追加したい
  3. classやidの有無を判断する
  4. 要素の有無を判断する
  5. スムーススクロール(アンカー先に)
  6. スムーススクロール(固定ヘッダー使用時などに)
  7. スムーススクロール(ページトップに戻るのみ)
  8. スクロールしたら表示されるページトップ
  9. アコーディオン
  10. タブ切り替え

jQuery Snippets #2

  1. 読み込み時(load)・リサイズ時(resize)・スクロール時(scroll)の処理をまとめる
  2. ウィンドウリサイズで操作後のみ実行する
  3. ゼブラストライプ
  4. 数秒後に〇〇する
  5. 外部リンクにtarget="_blank"を付加する
  6. リンク先によって異なるclassを付加する
  7. 要素を順番にフェードインさせる
  8. 要素の高さを一番高いものに合わせる
  9. フォーカスすると表示領域が伸びる入力フィールド
  10. 確認ダイアログを表示する

jQuery Snippets #3

  1. 要素の幅・高さを取得する
  2. 現在のウィンドウサイズやスクロール量などを取得・表示する
  3. ウィンドウサイズによって処理を変える
  4. 背景画像などをウィンドウサイズいっぱいにする
  5. カーソルの動きによって背景が動く簡易的なパララックスエフェクト
  6. 簡易的なフェードスライド
  7. 画像が読み込まれない時に代替画像を表示
  8. 画像が読み込まれない時にimg要素を削除
  9. スマートフォンの場合に電話番号リンクを有効にする
  10. スマートフォン以外の場合に電話番号リンクを無効にする

jQuery Snippets #4

  1. hoverでon/off切り替え
  2. on(mouseenter/mouseleave)でon/off切り替え
  3. ホバー時に透過させる
  4. ホバー時に一瞬点滅させる
  5. ホバーでclassの付与・削除
  6. ホバーでon/offフェード切り替え
  7. 指定要素内にあるリンク先に飛ぶ
  8. クリックで要素が震える
  9. クリックで要素が震える
  10. ○○秒以上ホバーしたら...

jQuery Snippets #5

  1. YouTubeをクリック後に読み込み・再生させる #1
  2. YouTubeをクリック後に読み込み・再生させる #2
  3. 簡易的なカウントアップ
  4. classを利用したシンプルなフィルタ機能
  5. CSSのアニメーション完了をjQueryで取得する
  6. CSSの!importantを使用する
  7. 要素に指定されたスタイルを一気にリセットする
  8. ランダムに文字カラーを変更する
  9. 要素が空の場合はその要素ごと削除する
  10. 右クリックを無効にする

jQuery Snippets #6

  1. 便利なtoggle系メソッド
  2. チェックボックスをまとめてチェックする
  3. チェックされたら押下可能になるボタン
  4. 数字を自動的にカンマ(,)区切りにする
  5. 数字のみ入力できるようにする
  6. 全角入力された英数字を半角に変換する
  7. 半角入力された英数字を全角に変換する
  8. input要素にreadonlyやdisabledを指定する
  9. 現在入力されている文字数を表示する #1
  10. 現在入力されている文字数を表示する #2

jQuery Snippets #7

  1. 画像のアスペクト比を割り出して、値によって処理を加える
  2. ホバーした要素以外に処理
  3. CSSのプロパティ値を取得する
  4. アコーディオン -特定のアコーディオンを初期表示で展開させておく-
  5. アコーディオン -特定数に達していない場合は無効化する-
  6. アコーディオン -開閉時にテキストを変更する-
  7. アコーディオン -コンテンツ内のボタンでも閉じれるようにする-
  8. チェックボックスでチェックできる最大数を設定する
  9. ページ遷移するselect要素
  10. ページ遷移するselect要素+α

jQuery Snippets #8

  1. 擬似要素のCSSを変更する #1
  2. 擬似要素のCSSを変更する #2
  3. 別ページから遷移した時に特定のタブを開いた状態にする
  4. テキストを1文字ずつ任意のタグで括る
  5. テキストを1文字ずつ任意のタグで括る -番号付きclassを付ける-
  6. テキストを1文字ずつ表示させる
  7. ページ最下部にスクロールさせる
  8. ページ表示後に特定の箇所へスクロールさせる
  9. サムネイルをクリックして、メインイメージを切り替える
  10. iframeをリロードする

jQuery Snippets #9

  1. セレクトボックスを連動させる
  2. 年月日のセレクト内の項目を自動生成する
  3. ラジオボタンでコンテンツ切り替え
  4. 各種フォーム要素の値取得
  5. 各種フォーム要素の値有無や変化を判別して処理をする
  6. 入力されたら(されていたら)label要素にクラスを付与
  7. パスワードを表示させる
  8. .each()を逆にする
  9. オーバーレイの作成と表示・非表示の処理
  10. 座標を取得する

jQuery Snippets #10

  1. ul要素内のli要素を分割する
  2. data属性を利用したシンプルなフィルタ機能
  3. 1度だけ実行させる
  4. 本来の画像サイズを取得
  5. 特定の要素が何番目かを取得する
  6. 特定の文字列を置換する
  7. フラグ判定
  8. 現在地によってページ内ナビゲーションにclassを追加・削除する
  9. 要素をアルファベット順でソートする
  10. 要素の数字でソートする