当你准备使用jQuery,我强烈建议你遵循下面这些指南:

缓存变量:DOM遍历是昂贵的，所以尽量将会重用的元素缓存。

// 不建议
h = $ ("#element").height();
$ ("#element").css("height",h-20);
// 建议
$ element = $ ("#element");
h = $ element.height();
$ element.css("height",h-20);
                    

使用匈牙利命名法：在变量前加$前缀，便于识别出jQuery对象。

// 不建议
var first = $ ("#first");
var second = $ ("#second");
var value = $ first.val();
// 建议 – 在jQuery对象前加$前缀
var $ first = $ ("#first");
var $ second = $ ("#second"),
var value = $ first.val();
                    

使用on：在新版jQuery中，更短的 on(“click”) 用来取代类似 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");
})
                    

链式操作+可读性：伴随着精简代码和使用链式的同时，可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果。

// 不建议
$ 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);
                    

短路求值：短路求值是一个从左到右求值的表达式，用 &&（逻辑与）或 ||（逻辑或）操作符。

// 不建议
function initVar($ myVar) {
if(!$ myVar) {
$ myVar = $ ("#selector");
}
}
// 建议
function initVar($ myVar) {
$ myVar = $ myVar || $ ("#selector");
}