JQueryベストプラクティスおよびよくあるエラー

1 JQueryのreadyプロセッサを使用
コードがDOMを操作している場合は、DOMロードが完了してからコードを実行する必要があります.以下のような第1の書き方をお勧めします.第2の書き方はJQuery 3です.xではもうお勧めしません.

$(function () { 
    /*      */ 
});

//  
$(document).ready(function () { 
    /*      */ 
});

2 noConflict()で競合を回避し、別名を定義する
jQueryコードが別名として$記号を使用する他のクラスライブラリと競合している場合は、noConflict()メソッドを使用して別名を定義します.

$jq = jQuery.noConflict();
$jq(function () {
    /*      */ 
}

3キャッシュJQueryオブジェクトおよびチェーンコール
jQueryセレクタ関数$()を呼び出すコストが高く、繰り返し呼び出す効率が低い.
3.1誤った方式

//  
$('#list li').addClass('strong');
$('#list li').css('color', 'red');

3.2 JQueryオブジェクトのキャッシュ

//  
var $li = $('#list li');
$li.addClass('strong');
$li.css('color', 'red');

3.3チェーンコール

//  
$('#list li').addClass('strong').css('color', 'red');

4 JQuery変数命名習慣
jQueryパッケージ変数は、通常、標準JavaScriptオブジェクトと区別するために$で始まります.

//       
var $li = $('#list li');

5 DOM原生の属性と関数を利用する
jQueryのターゲットの1つはDOMを抽象化することであるが,DOM原生を利用した属性と関数効率はより高い.DOMを知らずにjQueryを学ぶ人の中で最もよく犯すエラーの一つは、jQueryアクセス要素の属性を利用することです.
5.1冗長かつ遅い

$('img').click(function () {
    $(this).attr('src');  
});

5.2簡潔かつ迅速

$('img').click(function () {
    this.src;  
});

6要素の共通構文の作成
6.1要素共通構文の作成

$('
', {
    text: p_text, 
    "class": 'red', 
    title: p_title, 
    id:  p_id
}).appendTo("#myDiv");

6.2文字列接続方式

$('
'+p_text+'
').appendTo(#myDiv);

上記の2つの方式は文法が正しく、機能が同じであるが、第1の方式がより良い.第2の文字列の接合方法は可読性が悪く、脆弱である.
1つ目の方法は、特殊文字の入力が非常に強力です.しかし、第2の方法の効率は第1の方法よりも優れている.