jQuery性能优化指南(1)

3.将jQuery对象缓存起来

把jQuery对象缓存起来 就是要告诉我们 要养成将jQuery对象缓存进变量的习惯。 下面是一个jQuery新手写的一段代码：

$("#traffic_light input.on").bind("click", function(){ ... });

$("#traffic_light input.on").css("border", "1px dashed yellow");

$("#traffic_light input.on").css("background-color", "orange");

$("#traffic_light input.on").fadeIn("slow");

但切记不要这么做。我们应该先将对象缓存进一个变量然后再操作，如下所示：

var $active_light = $("#traffic_light input.on");

$active_light.bind("click", function(){ ... });    $active_light.css("border", "1px dashed yellow");

$active_light.css("background-color", "orange");

$active_light.fadeIn("slow");

记住，永远不要让相同的选择器在你的代码里出现多次。

注：（1）为了区分普通的JavaScript对象和jQuery对象，可以在变量首字母前加上 $ 符号。
            （2）上面代码可以使用jQuery的链式操作加以改善。如下所示：

如果你打算在其他函数中使用jQuery对象，那么你必须把它们缓存到全局环境中。 如下代码所示：

Code
// 在全局范围定义一个对象 (例如: window对象)

window.$my = { 

head : $("head"), 

traffic_light : $("#traffic_light"), 

traffic_button : $("#traffic_button")

};

function do_something(){ 

// 现在你可以引用存储的结果并操作它们

var script = document.createElement("script");

 $my.head.append(script);

// 当你在函数内部操作是, 可以继续将查询存入全局对象中去. 

$my.cool_results = $("#some_ul li");

$my.other_results = $("#some_table td");

 // 将全局函数作为一个普通的jquery对象去使用.

$my.other_results.css("border-color", "red");

 $my.traffic_light.css("border-color", "green");

}
//你也可以在其他函数中 使用它