网页制作与网站发布

学科新技术

为web编写脚本：jQuery简介(5)

现在，如果有必要的话，你能够利用jq_06.html对你的代码进行检查。让你的文件处于打开状态，因为在下一个练习中你需要改进它。

toggle()方法对于你希望来回切换打开或关闭的元素来说非常方便。正如你可能期望的那样，除了 hide()之外，jQuery还有一个名称为show()的专用方法。实际上，所有这三个方法均能够将已选元素的CSS显示属性改为block或none。

动态地改变CSS属性

尽管在之前练习中你创建的匿名函数（anonymous function）能够切换段落的显示状态，然而相应的效果还需要改进。鼠标的指针需要指出相应的标题是可单击的，并且当显示相关的段落时，在每一个标题旁边的箭头也应该向下翻转。让我们一起来调整这些条目。

继续使用与以前相同的文件。此外，你也可以使用jq_06.html。

为了将光标改为手形指针，你需要将css()方法链接到click()方法之后。这就是为什么说当使用 jQuery时，了解JavaScript语法至关重要的原因。将插入点置于click()方法的结束圆括号之后。如果你还不确定它在什么位置，那么使用图12作为指南。

图12. 当链接方法时，你需要找到正确位置

按下Enter/Return以便插入一新行。然后，输入一个点，其后跟着css(cursor, pointer)。 Dreamweaver CS5.5在你输入时能够继续提供代码提示功能。

css()方法需要两个参数：属性的名称和你希望赋给它的值。现在，相应的代码应该如下所示：

$(function() { $(h2 + p).hide(); $(h2).click(function(e) { $(this).next(p).toggle(); }) .css(cursor, pointer); });

如果现在你保存该页面并且对它进行测试，那么你将看到目前光标显示该标题是可单击的。

下一个任务是调整标题的背景图像。为了实现这一任务，你需要再一次引用匿名函数（anonymous function）中的下一段落。当你需要不止一次地引用同一选项时，你最好是将该选项作为变量进行存储。并按照下面方式修改该代码：

$(function() { $(h2 + p).hide(); $(h2).click(function(e) { var para = $(this).next(p); para.toggle(); }) .css(cursor, pointer); });

这一操作能够将至$(this).next(p)的引用另存为para，然后将para方法应用于para。这与之前的效果一致。

为了改变背景图像，你需要创建一个条件，它能够检查随后段落的display属性。在步骤3中，你使用带有两个参数的css()方法设置CSS属性。使用带有该属性名称的方法作为参数能够获得该属性的值。因此，该代码的最终版本应该如下所示：

$(function() { $(h2 + p).hide(); $(h2).click(function(e) { var para = $(this).next(p); para.toggle(); if (para.css(display) == none) { $(this).css(background-image, url(images/arrow-r.png)); } else { $(this).css(background-image, url(images/arrow-down.png)); } }) .css(cursor, pointer); });

该条件能够检查该段落的display属性的值。如果它是none，那么相应的段落会被隐藏。因此，第一个条件块中的代码使用带有两个参数的css()方法对该事件目标的background-image属性进行设置（即被单击的<h2>标题）。必须注意url()值与当前的文档相关，而不是与相应的式样表相关。 Dreamweaver CS5.5能够帮助你从代码提示中获取相应的正确路径。如果相应的段落被隐藏，那么可以将arrow-r.png用作背景图像。否则，应该使用arrow-down.png。

保存该页面，并在浏览器或者Live视图中对它进行测试。正如图13所示，当鼠标指针悬浮在其中一个标题上时，它会被转换成手形，并且当打开某个条目时，该箭头会向下翻转。

图13. 标题和指针现在能够响应用户的互动

现在，如果有必要的话，你能够利用jq_07.html对你的代码进行检查。

正如你刚才所见，当与不同数量的参数一起使用时，jQuery方法常常扮演不同的但却相关的角色。 css()方法遵循一个通用的模式。当与一个作为单一参数的CSS属性一起使用时，它能够获得该属性的值。然而，当提供第二个参数时，它将设置指定属性的值。 attr()参数能够为HTML元素的属性扮演相同的getter/setter角色。

为事件处理程序传递参数

在之前的教程中，即Introduction to JavaScript，changeFontSize()函数将你想要影响的元素的ID作为它的参数，如下所示：

onClick="changeFontSize(fruits)"

然而，你不能使用jQuery事件处理程序进行上述操作。取而代之的是，你需要使用一个数据对象来处理这些参数。

简而言之，你能够在一对大括号中使用一个逗号隔开的名称/值对系列来创建一个JavaScript对象。每一个名称和它的相关值均由逗号隔开。例如：

var boy = { name: Peter Pan, home: Neverland, age: forever young };

每一个名称均是该对象的一个属性。因此，boy.name的值是"Peter Pan" ，而boy.age的值则是"forever young "。

下面的练习将展示如何改编JavaScript简介（changeFontSize() ）教程中的changeFontSize()函数以便其能够与jQuery配合使用。在原来的版本中，该函数将元素的ID作为参数使用。而jQuery版本则将事件对象作为它的参数使用，并且通过一个数据对象将相应的ID传递给该函数。

在Code视图中打开jq_08.html。这是JavaScript简介（Introduction to JavaScript）教程中的最终版本的练习文件的一个副本。如果你将该页面加载至一个浏览器，并且反复单击"Change list font size" 链接，那么相应的字体大小会逐步地从16px增加到24px，然后再回到16px。

将插入点放在结束</body>标签前，然后，与之前练习一样，附着jQuery库并且插入一个jQuery文档准备好事件处理程序（document ready event handler）。

在页面的<head>中，选中changeFontSize()函数定义（未包含环绕的<script>标签）并将它剪切至你的剪贴板。

从<head>中删除<script>标签，并将该函数定义粘帖至jQuery文档准备好事件处理程序（document ready event handler）中。目前，位于页面底部的<script>块应该如下所示：

从“Change link font size”段落中删除相应的链接，并且为该段落提供一个ID trigger，如下所示：

<p id="trigger">Change list font size.</p>

在页面的<head>中添加一个<style> 块，以便将trigger的display 属性设置为none:

如果现在你将该页面加载至一个浏览器，那么相应的段落将不再显示。这就是任何人在访问JavaScript被禁用的页面时，它的显示方式。隐藏链接使得你只能在启用JavaScript的情况下显示它。

当JavaScript处于启用状态时，你可能希望在鼠标指针悬浮在相应的段落上时，该段落能够显示出来并且处于可单击状态。将下面的代码添加至文档准备好处理程序（document-ready handler）中—可以将它放置在changeFontSize() 函数定义之前或之后：

$(#trigger).show() .css(cursor, pointer);

现在，你需要将changeFontSize()作为click事件处理程序进行绑定并创建一个数据对象以便将fruitsID传递给该函数。修改之前步骤中相应的代码，如下所示：

$(#trigger).show() .css(cursor, pointer) .click({id: fruits}, changeFontSize);

这一次，click()方法需要两个参数。第一个参数是含有一个属性的匿名对象：带有fruits值的id。第二个参数是你想要在单击相应的段落时将被执行的函数名称。注意，该函数名称后没有一对圆括号。

尽管用作click()方法的第一个参数的对象没有名称，然而它的属性会通过事件对象的data对象自动地传递给该函数。不要担心它听起来像voodoo魔术。获取相应的值涉及对changeFontSize()函数的一些简单的编辑。改变该函数定义的前两行，如下所示：

function changeFontSize(e) { var list = document.getElementById(e.data.id),

你应该将e，而非将id作为参数传递至该函数，这样才能捕获该事件对象。任何作为数据对象传递给该函数的值均能够作为e.data的属性进行检索。因此，在步骤9中你创建的匿名对象的id属性能够作为e.data.id.进行访问。

保存该页面，并在浏览器或者Live视图中对它进行测试。它的工作方式应该与以前完全相同。现在，如果有必要的话，你能够利用jq_09.html对你的代码进行检查。

融合jQuery和JavaScript语法

除了将参数传递给changeFontSize()函数的方法之外，该函数内部的代码均是标准JavaScript—其证据是（如果你需要了解它）JavaScript和jQuery能够互相和谐共处。但是，当你将两种类型的语法混合时，你需要格外小心。

实际上，changeFontSize()函数能够使用标准JavaScript getElementById()方法获得至fruits无序列表（unordered list）的引用。由于你使用jQuery，因此你能够按照如下所示使用一个jQuery选择器：

var list = $(# + e.data.id)

注意：你需要在ID前添加一个井号（hash sign）前缀，这是因为jQuery使用CSS选择器。

但是，一旦你按照这种方式获得至该无序列表的一个引用，那么你就不能与style对象一起使用它，因为jQuery使用css()方法。相应的函数需要重新编写，如下所示：

在 jq_10.html中已有一个修改后函数的副本。

注意：为了方便起见，本教程的练习将jQuery文档准备好处理程序（document-ready handler）放置在与HTML相同的文件中。除了非常短的脚本之外，更常见的作法是将jQuery代码存储在一个外部文件并且将其与jQuery库之后的页面链接。