「jQuery」の記事一覧
2022.08.26
jQueryで最初・最後の要素を取得（first・last）
jQueryのfirst・lastメソッドで最初・最後の要素を取得します。また、first・lastをセレクタとして使用します。以下のhtmlの構造で確認します…
2022.08.25
jQueryのhasClassメソッドでclassの付与を判定
jQueryのhasClassメソッドで要素にclassが付与されているか判定します。以下のhtmlの構造で確認します。 hasClassメソッドは引数にクラス…
2021.03.14
jQueryのcssメソッドで要素のCSSを取得・変更
デモページはこちら jQueryのcssメソッドで要素のCSSを取得・変更します。以下のhtmlの構造でテストします。 まずCSSの変更です。対象の要素に設定さ…
2021.03.05
jQueryのremoveAttrメソッド・removeDataメソッドで要素の属性を削除
デモページはこちら jQueryのremoveAttrメソッドとremoveDataメソッドで要素の属性を削除します。removeDataメソッドはカスタムデー…
2021.01.30
ヘッダー固定時のページ内リンクスムーススクロール
デモページはこちら ページ内リンクへの移動をスムーススクロールで実装します。ヘッダーは上部に固定しています。以下のhtml構造でテストします。 ページ内リンクの…
2021.01.04
トップへ戻るボタンをフッターの上部に表示
デモページはこちら jQueryでフッターの高さを取得し、ユーザーがページ最下部までスクロールしても、トップへ戻るボタンをフッターよりも上部に表示します。 フッ…
2020.11.08
プラグインを利用せずにjQueryで実装する高さ揃え
デモページはこちら jquery.matchHeight.jsのようなプラグインを利用せず、jQueryのみでhtml要素の高さ揃えを実装します。プラグイン利用…
2020.10.19
jQueryのイベントオブジェクトのメソッド（preventDefault・stopPropagation）
デモページはこちら jQueryのイベントオブジェクトのメソッドであるpreventDefaultとstopPropagationの動作をテストします。また、処…
2020.10.15
jQueryプラグイン jquery.matchHeight.jsの使い方
jQueryプラグイン、jquery.matchHeight.jsの使い方です。全てのページ共通で、以下のhtml構造でテストします。デモページではクラス名bo…
2020.10.11
jQueryのhoverメソッドで要素にマウスカーソルが重なった時と離れた時の処理を実装
デモページはこちら jQueryのhoverメソッドで要素にマウスカーソルが重なった時と離れた時の処理を実装します。hoverメソッドは要素にマウスカーソルが重…
2020.10.10
jQueryで要素を表示・非表示（show・hide・toggle・fadeIn・fadeOut・fadeToggle・slideDown・slideUp・slideToggle）
デモページはこちら jQueryで要素を表示・非表示にするメソッドのまとめです。対象要素を表示するshow、対象要素を非表示にするhide、対象要素の表示・非表…
2020.10.09
jQueryのindexメソッドで要素の順番を取得、eqメソッドで要素の順番を指定
デモページはこちら jQueryのindexメソッドで要素の順番を取得、eqメソッドで要素の順番を指定してタブ切り替えを実装します。 以下のhtmlの構造でテス…
2020.10.07
jQueryのattrメソッド・dataメソッドで要素の属性を取得・変更・新規設定
デモページはこちら jQueryのattrメソッドとdataメソッドで要素の属性を取得・変更・新規設定します。dataメソッドはカスタムデータ属性のみ取得・変更…
2020.10.04
jQueryのtextメソッド・htmlメソッドで要素を取得または変更
デモページはこちら jQueryのtextメソッドとhtmlメソッドで要素を取得または変更します。textメソッドとhtmlメソッドは機能が似ていますが細かい部…
2020.10.02
jQueryのeachメソッドの使い方
デモページはこちら jQueryのeachメソッドの使い方です。eachメソッドには関数を指定します。関数の引数として「index（インデックス番号）」と「el…
2020.09.29
PC表示でページの途中からスクロールに追従するナビゲーション
デモページはこちら PC表示の場合、ページの途中に配置したナビゲーションが画面の一番上に来たタイミングで固定され、スクロールに追従する動作を実装します。 ナビゲ…
2020.09.28
jQuery Migrateの使い方
デモページはこちら jQueryはバージョン1.9と3.0で大幅な仕様変更があり、jQuery Migrateはその仕様変更を補助するためのパッチです。jQue…
2020.09.23
ページ最下部でトップへ戻るボタンを表示
デモページはこちら ユーザーがページ最下部までスクロールしたタイミングで、トップへ戻るボタンをフェードインで表示します。ボタンをクリックまたはページ最下部よりも…
2020.09.23
jQueryで要素の幅と高さを取得（width・innerWidth・outerWidth・height・innerHeight・outerHeight）
デモページはこちら jQueryで要素の幅と高さを取得するメソッドのまとめです。まず幅ですが、対象要素の幅を取得するwidth、対象要素のpaddingを含めた…
2020.09.23
jQueryで要素を追加または移動（before・insertBefore・after・insertAfter・prepend・prependTo・append・appendTo）
デモページはこちら jQueryで要素を追加または移動するメソッドのまとめです。対象要素の直前に追加するbefore、insertBefore、対象要素の直後に…
2020.09.22
jQueryで親要素を取得（parent・parents・closest）
デモページはこちら jQueryで親要素（親要素の親要素である先祖要素を含む）を取得するメソッドのまとめです。対象要素の親要素を取得するparent、対象要素の…
2020.09.22
jQueryで子孫要素を取得（children・find）
デモページはこちら jQueryで子孫要素（子要素と子要素の子要素である孫要素）を取得するメソッドのまとめです。対象要素の子要素を全て取得するchildren、…
2020.09.21
jQueryで兄弟要素を取得（next・nextAll・prev・prevAll・siblings）
デモページはこちら jQueryで兄弟要素（同階層の要素）を取得するメソッドのまとめです。対象要素の直後の要素を取得するnext、対象要素の直後以降の要素を全て…
2020.09.20
jQueryプラグイン drawer.jsでヘッダーを固定
デモページはこちら jQueryプラグイン、drawer.jsでヘッダーを固定してグローバルナビゲーションを追従させます。 まずhtmlですが、ハンバーガーメニ…
2020.09.13
jQueryのDeferredオブジェクトを利用した同期処理
デモページはこちら svgロードアニメーションをフェードアウトする処理を、jQueryのDeferredオブジェクトを利用して同期処理（非同期処理を待つ処理）で…