jQueryを使う時、いくつかよいポイント

**jQueryを使う時、いくつかよいポイント**
****
**1.よく使うdom要素を最初に宣言する(缓存变量,DOM遍历是昂贵的，所以尽量将会重用的元素缓存)**
**// よくない**
****
**h = $('#ele').width();**
**$('#ele').css('width',h/2);**
****
**// よい**
****
**$ele = $('#ele');**
**h = $ele.width();**
**$ele.css('width',h/2);**
****
****
**2.グローバル变量を避けたほうがいい(避免全局变量)**
**// よくない**
****
**$ele = $('#ele');**
**h = $ele.width();**
**$ele.css('width',h/2);**
****
**// よい**
****
**var $ele = $('#ele');**
**var h = $ele.width();**
**$ele.css('width',h/2);**
****
****
**3.jquery要素前に'$'をつける(在变量前加$前缀，便于识别出jQuery对象)**
**// よくない**
****
**var first = $('#first');**
**var second = $('#second');**
**var third = $('#third');**
****
**// よい**
****
**var $first = $('#first');**
**var $second = $('#second');**
**var $third = $('#third');**
****
****
**4.いくつか宣言をある時、一個のvarを使う、そしてバリューをつけるのやつを最後に書きます(**将多条var语句合并为一条语句，我建议将未赋值的变量放到后面。)
**例：**
**var**
  **$first = $('#first'),**
  **$second = $('#second'),**
  **$third = $('#third'),**
  **i,**
  **j;**
****
****
**5.click()イベントより、on()のほうがよい(使用 on()方法)**
**// よくない**
****
**$first.click(function(){**
    **$first.css('display', 'none');**
    **$first.css('color', 'green');**
**});**
****
**$first.hover(function(){**
    **$first.css('display', 'none');**
**})**
****
**// よい**
**$first.on('click',function(){**
    **$first.css('display', 'none');**
    **$first.css('color', 'green');**
**})**
****
**$first.on('hover',function(){**
    **$first.css('display', 'none');**
**})**
****
****
**6.できるだけ函数を合併する(一般来说,最好尽可能合并函数)**
**// よくない**
****
**$first.click(function(){**
    **$first.css('display', 'none');**
    **$first.css('color','blue');**
**});**
****
**// よい**
****
**$first.on('click',function(){**
    **$first.css({**
        **'display': 'none',**
        **'color': 'blue'**
    **});**
**});**
****
****
**7.チェーンを使う(链式操作)**
**// よくない**
****
**$first.html(value);**
**$first.on('click',function(){**
    **alert('hoge');**
**});**
**$first.fadeIn('slow');**
**$first.animate({width:'120px'},500);**
****
**// よい**
****
**$first.html(value);**
**$first.on('click',function(){**
    **alert('hoge');**
**}).fadeIn('slow').animate({width:'120px'},500);**
****
****
**8.コードの可読性を注意(维持代码的可读性,伴随着精简代码和使用链式的同时，可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果)**
**// よくない**
****
**$second.html(value);**
**$second.on('click',function(){**
    **alert('hello everybody');**
**}).fadeIn('slow').animate({width:'120px'},500);**
****
**// よい**
****
**$second.html(value);**
**$second**
    **.on('click',function(){ alert('hello everybody');})**
    **.fadeIn('slow')**
    **.animate({width:'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"),**
    **$ele = null;**
****
**$ele = $containerLi.first();**
**//... 諸々設定(许多复杂的操作)**
****
**// better**
****
**var**
    **$container = $("#container"),**
    **$containerLi = $container.find("li"),**
    **$ele = null;**
****
**$ele = $containerLi.first().detach();**
**//... 諸々設定(许多复杂的操作)**
****
**$container.append($ele);**
****
****
**12.高效化すること(查看的文档，可能会有一个更好或更快的方法来使用它)**
**// よくない**
****
**$('#id').data(key,value);**
****
**// よい (高效)**
****
**$.data('#id',key,value);**
****
****
**13.繰り返すdom要素を探すより、find()を使う(使用子查询缓存的父元素,正如前面所提到的，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();**