13.1.2　将选择保存到变量中

每次使用$（）对页面元素做出选择的时候，例如，使用$（'#tooltip'），我们正在调用jQuery函数。每次我们这么做的时候，访问者的浏览器已经运行了很多的代码。这往往会使程序变得没必要地慢。例如，假设我们想要像下面这样对一个选择应用几个jQuery函数：

$（'#tooltip'）.html（'＜p＞An aardvark＜/p＞'）；

$（'#tooltip'）.fadeIn（250）；

$（'#tooltip'）.animate（{left：100px}，250）；

这段代码选择了ID为tooltip的一个元素，并且在其中插入了一个＜p＞标签。然后，它再次选择了该元素，并将其淡入视线。最后，它第三次选择了该元素，然后将其left属性动画到100像素。每次这样的选择，即每个$（'#tooltip'），都会运行jQuery函数。由于这三行代码都影响同一个元素，我们真的只需要选择它一次。

一种方法（在本书前面4.6.4节介绍过）是使用jQuery的函数串联功能。选择元素，然后一个接一个地添加函数，如下所示：

$（'#tooltip'）.html（'＜p＞An aardvark＜/p＞'）.fadeIn（250）.animate（{left：

100px}，250）；

但是，有时候串联会变得很长，并且难以阅读。另一种选择时，只运行jQuery函数一次，将其结果保存在一个可以重用的变量中。通过这种方法，上面的代码可以写成：

1 var tooltip=$（'#tooltip'）

2 tooltip.html（'＜p＞An aardvark＜/p＞'）；

3 tooltip.fadeIn（250）；

4 tooltip.animate（{left：100px}，250）；

第1行运行jQuery函数，创建了ID为tooltip的一个元素的选择，并且将其存储在一个名为tooltip的变量中。一旦进行了这个选择并存储了，你就不需要再这么做了。可以直接使用该变量（它现在包含了一个jQuer y选择），并且在其上运行jQuery函数。

当使用这种方法的时候，很多程序员喜欢在变量名的前面添加一个$，这帮助提醒他们，该变量存储了一个jQuery选择，而不是像字符串、变量、数组或对象直接量这样的其他数据类型。例如：

var$tooltip=$（'#tooltip'）；

在使用事件的时候，将一个选择存储到一个变量中也是很常见的。正如参见2.10.2节所介绍过的，当在一个事件函数中时，变量$（this）引用了事件所应用的元素。然而，每次使用$（this）的时候，我们都调用jQuery函数，因此，在事件函数中重复使用$（this），也会浪费计算机资源。相反，我们可以在事件函数的开始处，将$（this）存储到一个变量中，并且重复地使用该变量而不需要继续调用jQuery函数，如下所示：

$（'a'）.click（function（）{

var$this=$（this）；//store a reference to the＜a＞tag

$this.css（'outline'，’2px solid red'）；

var href=$this.attr（'href'）；

window.open（href）；

return false；

}）；//end click