Life Collections

jQueryで少しでも処理速度を向上させるためのTipsをまとめてみました。

1. セレクタにはクラス名だけでなく要素名も書く

/* ○class="item"の要素を取り除く */
$(".item").remove();
↓高速化
/* ○id="side"の要素直下のclass="item"の要素を取り除く */
$("#side > div.item").remove();

$(“#navi a”)と記載した場合、まずa要素を検索し、その中から#naviが先祖要素にあたるa要素をjQueryオブジェクトとする。findを使用した場合は、#naviを検索してからa要素をjQueryオブジェクトとするため、大体のシチュエーションで処理が向上する。

$("#navi a")
↓高速化
$("#navi").find("a")

3. セレクタはClassよりもIDを利用する

idであれば一つ見つけたあと処理終了するため、idを利用した方が速くなります。

4. DOM 操作を避ける

DOM操作（prepend()、append()、after()等）は、比較的時間がかかります。代用できるならhtml()系を利用しましょう

2020.05.17

『jQuery』まとめ記事一覧

本サイトのjQuery関連記事をまとめています。是非お立ち寄りください。 jQuery 関連記事一覧 ...

jQuery関連記事

jQueryのその他記事もまとめてますので、是非お立ち寄りください(｡･ω･｡)

2020.05.17

[jQuery] jQueryでツールチップを自作する方法

対象オブジェクトにフォーカスをあてた際に、ツールチップを表示するjQueryコードを自作しました。是非ご利用ください。 仕様 マウスオーバーしたらチップを表示する ※tipMSG属性の値が、ツールチップとして表示される マウスアウトしたらチップを非...

2020.05.17

[jQuery] パフォーマンス向上のコツ（処理速度向上・高速化 あれこれ）

jQueryで少しでも処理速度を向上させるためのTipsをまとめてみました。 1. セレクタにはクラス名だけでなく要素名も書く $("#navi a")と記載した場合、まずa要素を検索し、その中から#naviが先祖要素にあたるa要素をjQueryオ...

2018.08.10

[jQuery] formのアクションを変更する〜フォーム送信時（Submit時）にボタン毎に遷移先URLを変更する方法〜

「送信ボタンを複数配置して、押したボタンによって遷移するURLを変えたい」。そんな時、クライアントサイドのjQueryで実現できるようなコードをご紹介します！ 概要 今回は、submitボタンに新たな属性を追加し、その属性に指定されたURLで遷移する先が決...

2018.08.09

[jQuery] リアルタイムに入力フォームのバリデーションをチェックするコード集

WEBページ作成時に作るに手間がかかる入力バリデーションチェック。PHP等のサーバサイドでのチェック方法もありますが、クライアントサイドでチェックできればリアルタイムにNG箇所を伝えることができます！今回は、javascript・jQueryで実装する入力フォ...

2018.06.20

[jQuery] カーソルをあてた時に画像を切り替える方法（マウスオーバー・マウスアウト）

「送信ボタンにカーソルを押した時に色を変えたい」こういったユーザビリティに関する要望は少なくないです！CSSでも実現できますが、CSSでは複数時に1つ1つソースコードを書かないといけなくなっちゃうので、今回はjQueryで、カーソルをあてた際に画像を切り替える...