我的书签
添加书签
移除书签7.2.2 编程
1.在文本编辑器中打开chapter07文件夹下的文件rollover.html。
这个文件已经包含了一个到jQuery文件的链接，并且还包含了$（document）.ready（）函数（参见本书4.3节）。第一步是选择＜div＞标签中的所有图像并且用jQuery each（）函数设置一个循环（参见4.10节）。
2.在$（document）.ready（）函数后面的空行单击，并输入$（'#gallery img'）.each（function（）{。
选择器#gallery img选择了ID为gallery的标签中的所有＜img＞标签。jQuery的each（）函数提供了一种快捷方式来遍历一组页面元素，在每个元素上执行一系列的操作。each（）函数接收一个匿名函数（参见4.10.1节）作为参数。提供该完整函数的代码是个好办法，下面我们将这么做。
3.按下回车键两次，然后输入}）；//end each来结束匿名函数，也结束对each（）函数的调用，并且结束这条JavaScript语句。现在代码如下所示：
1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
2＜script＞
3$（document）.ready（function（）{4
$（'#gallery img'）.each（function（）{5
6}）；//end each
7}）；//end ready
此时，这段脚本循环遍历gallery中的每幅图像，但是还没有真正做些事情。首先该做的事情是捕获src属性并且将其存储到一个变量中，以供随后在脚本中使用。
注意：JavaScript注释//end each和//end ready不是这段脚本所必需的。然而，它们使得我们很容易识别脚本每行的作用。
4.单击内部的空行（步骤3中的第5行）并输入
var imgFile=$（this）.attr（'src'）；
正如4.10.2节所述，我们可以使用$（this）来引用循环中的当前元素，换句话说，$（this）将按顺序引用每个图像标签。jQuery的attr（）函数（参见4.9节）获取特定的HTML属性。在这个例子中，它获取图像的src属性并将其存储到一个名为imgFile的变量中。例如，对于第一幅图像，src属性是images/small/blue.jpg，这就是出现在页面上的图像的路径。
可以使用每个src值来预载入图像。
5.按下回车键得到一个空行，然后添加如下所示两行代码：
var preloadImage=new Image（）；
var imgExt=/（.\w{3，4}$）/；
preloadImage.src=imgFile.replace（imgExt，’_h$1'）；
正如7.1.2节所述，要预载入图像，必须先创建一个image对象。在这个例子中，创建变量preloadImage用来存储该image对象。接下来，通过设置Image对象的src属性来预载入图像。
预载入图像的一种方式（参见7.1.2节的介绍）是创建想要载入的图像的一个数组，然后，遍历数组中的每一项，创建一个image对象并且把图像的来源添加到对象中。然而，这种方法需要很多工作，因为你需要知道到每个翻滚图像的路径，并且将这些路径输入数组。
在这个例子中，我们使用了更多的创意（并且是费力较少的方法）来预载入图像。我们只是必须确保在和最初图像相同的位置存储了翻滚图像，并且名字也相似。对于这个Web页面，页面上的每幅图像都有一幅对应的翻滚图像，翻滚图像的名字的末尾添加了一个_h。例如，对于图像blue.jpg，有一幅名为blue_h.jpg的翻滚图像。两个文件都存储在同一文件夹下，因此，两个文件的路径是相同的。
创新的部分是：可以通过直接改变最初图像的来源的名字以反映翻滚图像的名字，从而让JavaScript搞清楚src，而不是像preloadImage.src='images/small/blue_h.jpg'这样手动输入翻滚图像的src以预载入它。换句话说，如果你知道页面上的图像的路径，那么，其翻滚图像直接在该路径的.jpg前面加一个h。因此，_images/small/blue.jpg变成了_images/small/blue_h.jpg，并且_images/small/orange.jpg变成了_images/small/orange_h.jpg。
这就是其他两行代码所做的事情。第一行var imgExt=/（.\w{3，4}$）/；创建了一个正则表达式。正则表达式（将在本书14.2节学习）是我们可以在字符串中查找的一个字符模式，例如，连续的3个数字。正则表达式可能有些技巧，但这个正则表达式实际上只是匹配一个字符串末尾的一个点号后面跟着3个或4个字符。例如，它将匹配/images/small/blue.jpeg中的.jpeg和/images/orange.png中的.png。
接下来的一行，preloadImage.src=imgFile.replace（imgExt，’_h$1'）；，使用replace（）方法（参见14.2节）把匹配的文本用其他内容替代。这里，路径名中的一个.jpg将替换为_h.jpg，这样images/small/blue.jpg就改为images/small/blue_h.jpg。由于使用一个正则表达式子模式（参见14.2.6节中“高级用户提示：使用子模式替换文本”部分了解详细内容），这种技术需要一些技巧，因此，如果你对它的工作原理不是很清楚，不要担心，后面还会介绍。
既然已经预载入了翻滚图像，我们就可以给图像分配hover（）事件了。6.按下回车键，然后添加如下第9行到第11行的代码：
1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
2＜script＞
3$（document）.ready（function（）{
4$（'#gallery img'）.each（function（）{5
var imgFile=$（this）.attr（'src'）；6
var preloadImage=new Image（）；7
var imgExt=/（.\w{3，4}$）/；8
preloadImage.src=imgFile.replace（imgExt，’_h$1'）；
9$（this）.hover（
10 11
）；//end hover
12}）；//end each
13}）；//end ready
jQuery的hover（）函数只是对一个元素应用mouseover和mouseout事件的一种缩写（参见5.1.1节的“hover（）事件”部分）。为了使该函数能够工作，传递给它两个函数作为参数。当鼠标光标移动到元素上的时候，第一个函数运行，在这个例子中，图像变为翻滚图像；当鼠标光标从元素上移开的时候，第二个函数运行，在这个例子中，翻滚图像变回到最初的图像。
7.在空行（步骤6中的第9行后）添加如下的3行代码：
function（）{
$（this）.attr（'src'，preloadImage.src）；
}，
第一个函数直接把当前图像的src属性改为翻滚图像的src属性。最后一行末尾的逗号是必需的，因为我们刚刚添加的函数是充当调用hover（）函数的第一个参数，逗号则分隔开传递给函数的每个参数。
8.最后，添加第二个函数（下面的第13行到第15行）。完成后的脚本如下所示：
1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
2＜script＞
3$（document）.ready（function（）{
4$（'#gallery img'）.each（function（）{
5 var imgFile=$（this）.attr（'src'）；
6 var preloadImage=new Image（）；
7 var imgExt=/（.\w{3，4}$）/；
8 preloadImage.src=imgFile.replace（imgExt，’_h$1'）；
9$（this）.hover（
10 function（）{
11$（this）.attr（'src'，preloadImage.src）；
12}，
13 function（）{
14$（this）.attr（'src'，imgFile）；
15}
16）；//end hover
17}）；//end each
18}）；//end ready
第二个函数只是把src属性改回到最初的图像。在第5行中，最初出现在页面上的图像的路径存储到了变量imgFile中。在这个函数中（第14行），我们再次获取这个值来把src设置回其最初的值。保存页面，在Web浏览器中查看它，并且把鼠标光标移动到每个黑白的图像上看看它们如何变为全彩的。
