javascript

javascript

【jQuery】offset().topエラーになる原因

jQueryでトップからの位置を取得する「offset().top」ですが、chromeの開発ツールで確認するとたまにエラーになる時がある。ちゃんと取得してたはずなのに、なんでこんな表示が出てるの?って思うけど気にしないでいいかなとも思って...
javascript

【jQuery】スクロールの上下方向を検知・判定する方法

ページを作成しているとスクロールで変化させたいことって結構あります。スクロールしたら特定の位置で固定したり要素が見えたら表示したり。今回は上下にスクロールしたらを検知・判定のご紹介です。まずはデモで動作の確認をしてください。下スクロールしま...
javascript

【jQuery】フォームの入力チェック|バリデーション

フォームのバリデーションって作るの結構手間だよね。チェックする項目が多いと時間かかるしプラグインを使っても良いけど、自分で作った方が修正も手軽だしなんたってカスタマイズしやすいじゃん!だからコピペ用に作りました。ご自由にどうぞ!デモフォーム...
javascript

jQueryで後ろからn番目を取得する方法

jQueryを使って後ろからn番目は取得方法が無いのでCSSの「:nth-last-child(n)」を利用して指定します。疑似クラスで最初、最後、n番目や奇数、偶数を指定|CSSjQuery// 取得したい要素と数字var list = ...
javascript

コピペで簡単!高機能スライダー[Swiper.js v6]の使い方|Javascript

自力でスライダーを設置するのは簡単だが、スライダーの「当たり前」機能を付けるのがすごい手間だったりする。「レスポンシブ対応」や「スワイプやマウスオーバーでの操作」、「スライドの数が増えた時のスクリプト、スタイルの修正」、「Next,Prev...
javascript

jQueryで要素をコピーする方法

jQueryには便利な「clone()」関数というのがある。この「clone()」を使って簡単にDOMをコピーすることができるんです。下のHTMLからjQueryを使ってDOMを取得します。jQuery// をコピーvar title = ...
javascript

【jQuery】「エンターキー(Enter)が押されたらを取得する方法

メール送信時や、様々なインプット要素でボタンを押させずに「エンター(Enter)」で次へ行けるとめちゃスムーズ。そんなスムーズにインプットしてもらうための方法のご紹介です。3つありますが、どれも結果は変わらないので好きなものを利用してくださ...
javascript

【jQuery】コピペで実装!アコーディオンメニュー3選

アコーディオンメニューをコピペで実装できるサンプル3つを用意しました。3つ共にアコーディオンメニューは、数を増減しても同じように機能します。また「position:absolute」で高さを無くした状態になっています。アコーディオンメニュー...
javascript

【jQuery】リンク(aタグ)を無効化&少し待ってからリンク先へ飛ぶ方法

リンクをクリックしても、飛ばないようにする方法とリンクをクリックした後、少し待ってから遷移する方法のご紹介です。まずは、クリックしても飛ばないようにする方法です。リンク(aタグ)を無効化するHTML<a class="demo" href=...
javascript

【jQuery】CSS変数をjQueryで利用する方法

CSSで指定したCSS変数をjQueryで利用する方法のご紹介です。jQueryで変数作っちゃっても良いけど、そうできない時もある。例えば、、、、ん~あるかなぁ。jQueryで変数作れない時は、あるっ!としてCSS変数を書き換える方法です。...
javascript

Yes/No診断テストをjQueryで作りました!ダウンロードですぐに利用可能

いつも当ブログを見てくださりありがとうございます!「Yes/No診断テスト」を自由に使っていただけるよう、jQueryで作成しました。Yes/No診断テスト本バージョンでは、Yesの数を合計した結果を表示していますが、各質問の回答で結果を分...
javascript

【jQuery】複数の数値から最大値・最小値を出す方法

jQueryで沢山の数値から最大値や最小値を出す方法のご紹介です。jQuery// 最大値を出すMath.max(100, 2, 44, 39, 87);// 「100」が出力される// 最小値を出すMath.min(49, 20, 300...
javascript

【jQuery】数値から文字列、文字列から数値へ変換する方法

jQueryで数値から文字列に変換したり、文字列から数値へ変換する方法のご紹介です。js上で計算する時、足し算したいだけなのに「"1" + 1 = 11」になったりする時あって困っちゃう。そんな時は、下の方法ですぐ解決しよう!jQueryv...
javascript

【jQuery】ローカルストレージへの保存方法と、遷移後に読み込む方法

phpを使わずに、jqueryだけで遷移前の値を保持したい場合、クッキー(cookie)を使うかローカルストレージ(localstrage)を使うか迷う時がある。自分の場合は、クッキーには数キロバイトしか保存できないから、大体ローカルストレ...
javascript

【jQuery】配列・連想配列の数を取得する方法

jQueryで配列の数を取得するには「.length」を使い、連想配列の数を取得するには「Object.keys」と「.length」ます。下のjQueryが利用方法になります。jQuery// 配列の数を取得var demo1 = ;co...