jQueryの処理を早くするための基本&参考サイト|HTMLマークアップ
基本的なことを覚えるためのチェック項目
- 「each」のかわりに「for」を使う
- 「class」のかわりに「id」を使う
- 「class」を使うときには「エレメント」も指定
- セレクターに「context」を与える var $targets = $('.target', '#content');
- 変数をなどでキャッシュする
- 「find()」を使う
- DOM操作を避ける 「prepend()、append()、after()/何かを挿入する作業」→html() などで代用、あまり使いたくないけど空タグを入れておくとか、、、
- 長い文字列を扱う場合は、concat() よりも join() を使う
- 「return false;」をいれる
- Google AJAX Libraries APIを使う
参考サイト:
- 少しのコードで実装可能な20のjQuery小技集
- 今すぐに出来る、jQuery を高速化する10個の方法
- jQueryのパフォーマンス最適化に関するTips
- 斜め読み-Siddharth「jQuery初心者へ贈る、あなたのコードをテストしながらより良くするやり方」
- JavaScriptがページの読み込み時間を遅くする理由トップ10
▼特定の要素を指定
■疑似セレクタ
:hidden 非表示状態にある要素を取得
:visible 表示状態にある要素を取得
:enabled 利用可能な状態にある要素を取得
:disabled 利用不可の状態にある要素を取得
:checked チェック済みの要素を取得
:selected 選択状態にある要素を取得
:animated アニメーション中の要素を取得
$(":text:disabled").css("background-color", "red");
■jQueryオブジェクトが持つDOM要素を操作するメソッド群
CSSクラス名・ID名で操作
.filter("CSS文字列") / .filter(["CSS文字列"の]配列)
DOM要素の集合に含まれる子要素から、指定したCSS指定で更に絞込み。
文字列の配列で指定した場合、いずれかにマッチするものに絞込み。
.not("CSS文字列") / .not("DOM要素")
filter() の否定版。
CSSもしくは指定されたDOM要素を取除く。
.find("CSS文字列")
DOM要素の集合に含まれる子要素から、指定したCSS指定にマッチするものを抽出。
.is()
要素セットに特定条件を含む要素が存在するかを判定するには?
対象の要素セットに複数の要素が含まれる場合には、それら要素のうちの1つでも条件に合致すれば、isメソッドはtrueを返します。
引用元:http://www.atmarkit.co.jp/fdotnet/jqueryref/03traversing/traversing_06.html