高い効率のjqueryコードの19条の手引きを書き出します。

まず、jQueryを頭の中でしっかり覚えることがjavascriptです。これは私たちが同じ符号化慣例、スタイルガイド、ベストプラクティスを取るべきことを意味します。まず、あなたがJavascript初心者なら、「JavaScript初心者への24のベストプラクティス」を読むことをお勧めします。これは高品質のjavascript教程です。jQueryに触れる前に読んだほうがいいです。jQueryを使用する準備ができたら、以下のようなガイドに従ってください。1.キャッシュ変数DOMは巡回するのが高価ですので、できるだけ再利用する要素キャッシュです。

//   
h = $('#element').height();
$('#element').css('height',h-20);
//   
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

2.グローバル変数jQueryはjavascriptと同じように、一般的には関数のスコープ内にある変数を確保したほうがいいです。

//   
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
//   
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

3.ハンガリー命名法を使用して変数の前に$プレフィクスを追加し、jQueryオブジェクトを識別するのに便利です。

//   
var first = $('#first');
var second = $('#second');
var value = $first.val();
//    -  jQuery    $  
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

4.Varチェーン（シングルVarモード）を使用して、複数のvar文を一つの文に結合し、未割り当ての変数を後ろに置くことを提案します。

var 
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};

5.clickのような関数の代わりに'On'を使って新版jQueryでより短いon(click)を使ってください。前のバージョンでon（）はbind（）です。jQuery 1.7バージョン以降、on()イベントハンドラの優先順位を付けます。しかし、一貫性を考慮して、すべてのon（）方法を簡単に使うことができます。

//   
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});
$first.hover(function(){
    $first.css('border','1px solid red');
})
//   
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})
$first.on('hover',function(){
    $first.css('border','1px solid red');
})

6.簡素化javascriptは一般的に、できるだけ関数を統合した方がいいです。

//   
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});
//   
$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

7.チェーン操作jQuery実現方法のチェーン操作は非常に容易である。これを利用します。

//   
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
//   
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

8.コードの可読性を維持するには、コードの簡素化とチェーンの使用とが伴い、コードの読み取りが困難になる可能性がある。インデントと改行を加えると効果的です。

//   
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
//   
$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

9.短絡求値を選択する短絡求値は、左から右へ値を求める表現であり、&&

//   
function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}
//   
function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

10.短縮コードを選択する方法の一つは、符号化の近道を利用することである。

//   
if(collection.length > 0){..}
//   
if(collection.length){..}

11.重い動作で要素を分離する場合、DOM要素に対して大量の操作（複数の属性またはcssスタイルを連続的に設定する）を行うつもりであれば、まず要素を分離してから追加することを提案します。

//   
var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;
$element = $containerLi.first(); 
//...        
// better
var 
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;
$element = $containerLi.first().detach(); 
//...        
$container.append($element);

12.熟記技術はjQueryを使う方法に対して経験が足りないかもしれません。必ず確認したい文書は、より良い方法やより速い方法で使うことができます。

//   
$('#id').data(key,value);
//    (  )
$.data('#id',key,value);

13.サブクエリキャッシュを使用する親要素は、前述のように、DOMトラバースは高価な動作である。典型的な方法は、親要素をキャッシュし、サブ要素を選択する際にキャッシュ要素を再利用することである。

//   
var 
    $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');
//    (  )
var 
    $container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

14.汎用選択子が後代選択器に汎用選択子を置くことを避けるため、性能は非常に悪い。

//   
$('.container > *'); 
//   
$('.container').children();
         
           ，     。
//   
$('.someclass :radio'); 
//   
$('.someclass input:radio');
     
  ，Id         ，              。
//   
$('div#myid'); 
$('div#footer a.myLink');
//   
$('#myid');
$('#footer .myLink');

15.複数のID選択子がここで強調されることを避けるために、ID選択子は一意であるべきであり、追加の選択子を追加する必要はなく、複数の後裔ID選択子が必要ではない。

//   
$('#outer #inner'); 
//   
$('#inner');

16.最新バージョンの新バージョンを堅持するのは通常より良いです。より軽量で、より効率的です。明らかに、サポートするコードの互換性を考慮する必要があります。例えば、2.0バージョンは、ie 6/7/8をサポートしていません。
廃棄方法を捨てて、新しいバージョンごとの廃棄方法に注目することは非常に重要であり、これらの方法をできるだけ避けることである。

//    - live     
$('#stuff').live('click', function() {
  console.log('hooray');
});
//   
$('#stuff').on('click', function() {
  console.log('hooray');
});

/注：ここでは正しくないかもしれません。ライブのためにリアルタイムバインディングを実現するべきです。delegateはおそらく17に適しています。CDN GoogleのCNDを利用して、ユーザーから一番近いキャッシュを選択し、迅速に応答することが保証されます。Google CNDを使って自分で住所を検索してください。ここの住所は使えません。jquery公式サイトから提供されたCDNを紹介します。
18.必要な時にjQueryとjavascriptの元のコードを組み合わせて上述のように、jQueryはjavascriptであり、jQueryでできることを意味しています。同じようにオリジナルコードで作ってもいいです。生コード（またはvanilla）の可読性とメンテナンス性は、jQueryに及ばないかもしれません。コードがもっと長いです。しかし、より効率的であることも意味する（一般的に、より低い層のコードの読み取り可能性が低いほど、性能が高い、例えば：アセンブリは、より強力な人材が必要である）。元のコードより小さく、より軽く、より効率的なフレームはないということを覚えています。
vanillaとjQueryの性能の違いを考えると、二人のエッセンスを吸収して、jQueryと同等の原生コードを使うことを強く提案します。
19.最後に忠告した結果、この文章を記録する目的はjQueryの性能と他のいい提案を高めることです。もっと深く研究したいなら、この話題に多くの楽しみを発見します。覚えてください。jQueryはなくてはならないものではなく、選択肢の一つです。なぜそれを使うかを考える。DOM操作？ajax？模版ですか？アニメ？エンジンを選択しますか？JAvascriptミニフレームやjQueryのカスタマイズ版がいいかもしれません。