1.将会重用的元素缓存
//bad
var h = $('#hello').height()；
$('#hello').css('height'，h-20)；
//good
var $hello = $('#hello')，
h = $hello.height()；
$hello.css('height'，h-20)；
2.尽量少设置全局变量，尽量在函数作用域内设置变量
3.缓存jQuery对象，并在jQuery对象前加$前缀，便于识别
//bad
var hello = $('#hello')，
value = hello.val()；
//good
var $hello = $('#hello')，
value = $hello.val()；
4.将多条var语句合并成一条var语句，将未赋值的变量放到后面
//good
var $hello = $('#hello')，
value = $hello.val()，
k = 3，
i，
j，
myArr = []；
5.统一使用on()方法
//bad
$hello.click(function(){
$hello.css('border'，'1px solid red')；
$hello.css('color'，'blue')；
})；
$hello.hover(function(){
$hello.css('border'，'1px solid red')；
})；
//good
$hello.on('click'，function(){
$hello.css('border'，'1px solid red')；
$hello.css('color'，'blue')；
})；
$hello.on('hover'，function(){
$hello.css('border'，'1px solid red')；
})；
6.精简js
//bad
$hello.click(function(){
$hello.css('border'，'1px solid red')；
$hello.css('color'，'blue')；
})；
//good
$hello.on(function(){
$hello.css({
'border'：'1px solid red'，
'color'：'blue'
})；
})；
7.链式操作
//bad
$hello.html(value)；
$hello.on('click'，function(){
alert('hello everyone')；
})；
$hello.fadeIn('slow')；
$hello.animate({height:'120px'}，500)；
//good
$hello.html(value)；
$hello.on('click'，function(){
alert('hello everyone')；
}).fadeIn('slow').animate({height:'120px'}，500)；
8.利用缩进和换行提高代码可读性
//bad
$hello.html(value)；
$hello.on('click'，function(){
alert('hello everyone')；
}).fadeIn('slow').animate({height:'120px'}，500)；
//good
$hello.html(value)；
$hello
.on('click'，function(){alert('hello everyone')；})
.fadeIn('slow')
.animate({height:'120px'}，500)；
9.使用短路求值，短路求值是一个从左到右的表达式，用&&(逻辑与)或||(逻辑或)操作符
//bad
function init($myElement){
if(!$myElement){
$myElement = $('#myElement')；
}
}
//good
function init($myElement){
$myElement = $myElement || $('#myElement')；
}
10.选择捷径
//bad
if(myArr.length > 0){}
//good
if(myArr.length){}
11.缓存父元素并在选择子元素时重用这些已缓存的父元素
//bad
var $container = $('#container')，
$containerLi = $('#container li')，
$containerLiSpan = $('#container li span')；
//good
var $container = $('#container')，
$containerLi = $('#container').find('li')，
$containerLiSpan = $containerLi.find('span')；
12.尽量少用通用选择符(*)
13.避免隐式通用选择符
//bad
$('.hello :radio')
//good
$('.hello input:radio')
14.优化选择符
15.选择器从id开始
//bad
$('#container div.robot')
//good
$('#container').find('div.robot')
16.让选择器右侧更具有特征性，相对而言，选择器左侧可以少一些特征性
//bad
$('div.head .info')
//good
$('.head span.info')
17.避免过多的约束条件，尽量移除中间的
//bad
$('.head div.content span.info')
//good
$('.head span.info')
18.多次DOM操作合成一次
//bad
for (var i = 0；i < 100；i++) {
$('#menu').append("<li>" + i + "</li>")；
}
//good
var menu = "<ul id='menu'>"，
$div = $('div')；
for (var i = 0；i < 100；i++) {
menu += "<li>" + i + "</li>"；
}
menu += "</ul>"；
$div.append(menu)；
19.在class前加上tagName，并且用就近的id限制选择的范围
//good
$('#head span.info')
20.尽量少用class选择器，不要用tagName或id来修饰id
//bad
$('div#head')；$('#head #info')
21.用find代替后代选择器
//bad
$('#head span.info')
//good
$('#head').find('span.info')
22.在对对象操作之前先确定对象存不存在
23.使用直接函数
如:使用$.ajax()，而不是使用$.get()；$.getJSON()；$.post()；
24.使用最新版本的jQuery，需要测试，有时也不是完全兼容老版本
25.给超过15个元素添加样式时，不使用CSS()方法，而是向head里添加style
如:$('<style>div{height:20px；background-color:orange；}</style>').appendTo('head')；
26.必要的时候使用原生JS
//bad
$(this).attr('id')
//good
this.id