jQuery Snippets

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

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. 要素の数字でソートする