4.8　设置和读取标签属性

添加、删除和改变元素并不是jQuery唯一擅长的事情，并且，这也不是我们希望对元素的选择所做的唯一事情。我们常常想要改变一个元素的属性值，例如，给标签添加一个类，或者改变一个元素的CSS属性。也可以获取属性的值，例如，一个特定链接到底指向哪个URL。

4.8.1　类

层叠样式表是非常强大的技术，使得我们能够把各种高级的可视化格式添加到HTML中。一条CSS规则可以为页面添加带颜色的背景，而另一条规则可以完全把元素隐藏起来。可以直接使用JavaScript来删除、添加或者改变用于元素的类，从而创建一些真正高级的视觉效果。由于Web浏览器非常快速而高效地处理和实现CSS指令，因此只要直接为标签添加一个类，就可完全改变标签的外观，甚至让它从页面上消失。

有用工具提示View Source概览

通过添加、修改、删除和重新组合HTML代码来使用JavaScript操作DOM的一个问题是，当JavaScript完成的时候，很难识别页面的HTML是什么样子。例如，每个浏览器中的View Source命令只有在Web页面文件从Web服务器下载之后才显示。换句话说，我们看到HTML是在JavaScript修改它之前，使得很难搞清楚编写的JavaScript是否真的产生了想要的HTML。例如，如果在JavaScript向表单页面添加10条错误消息之后，或者在JavaScript程序创建了一个带有文本或表单字段的、精致的弹出式对话框之后，我们能够看到页面的HTML是什么样子，那么，要判断最终是否得到想要的HTML就容易很多了。幸运的是，大多数浏览器提供了一组开发者工具，允许你查看HTML的渲染，也就是在JavaScript完成其“魔术”之后浏览器所显示的HTML。

通常，这些工具在浏览器窗口的底部作为面板出现，位于Web页面之下。不同的标签允许你访问JavaScript代码、HTML、CSS和其他有用的资源。工具面板上所打开的标签和方法的实际名称因浏览器的不同而有所不同。

·在Fi re fox中可以安装Fi re fo x插件（参见1 5.2节）。打开想要查看的一个带有JavaScript代码的页面，并且打开Firebug（Tools→Firebug→Open Firebug）。在Firebug面板中单击HTML标签，将会看到完整的DOM（包括JavaScript所生成的任何HTML）。或者可以在Firefox中使用Web Developer工具栏（https：//addons.mozilla.org/en-US/firefox/addon/web-developer/）来查看常规的HTML源代码和生成的HTML。

·在IE 9中，按下F12键可以打开DeveloperTools面板，然后，单击HTML标签来查看页面的HTML。在IE 9中，HTML标签首先展示下载的HTML（这和View Source命令相同）。但是，如果单击刷新图标（或者按下F5键），HTML标签将显示任何JavaScript产生的改变完成之后所渲染的HTML。

·在Chrome中，选择View→Developer→Dev-eloper Tools并单击浏览器窗口的底部的面板中的Elements标签。

·在Safari中，确保Developer菜单是打开的（选择Safari→Preferences，单击Advanced按钮，并且确保选中“Show Develop menu in menu bar”）。然后，打开你感兴趣查看的页面，并且选择Develop→Show Web Inspector。在位于浏览器窗口底部的面板中单击Elements标签。

·在Opera，选择Tools→Advanced→OperaDragonfly（Dragonfly是Opera内置的开发工具集的名称）。在位于浏览器窗口底部的面板中单击Documents标签。

jQuery提供了几个函数来操作一个标签的类属性：

·addClass（）为元素添加一个特定的类。在jQuery选择的后面添加addClass（），并且把一个字符串传递给函数，字符串表示要添加的类的名字。例如，要给指向站点之外的所有链接添加externalLink类，可以使用如下代码：

$（'a[href^="http：//"]'）.addClass（'externalLink'）；

这段代码将会处理如下所示的HTML：

＜a href="http：//www.oreilly.com/"＞

并且将其改变为如下所示：

＜a href="http：//www.oreilly.com/"class="externalLink"＞

为了让这个函数有用，需要提前创建CSS类，并且将其添加到页面的样式表中。然后，当JavaScript添加类名的时候，Web浏览器可以根据之前定义的CSS规则来应用这个样式属性。

注意：当使用addClass（）和removeClass（）函数的时候，只需要提供类名，而省略在创建类选择器时通常会使用的点号。例如，addClass（'externalLink'）是正确的，而addClass（.'externalLink'）是错误的。

当已经有类应用于标签的时候，jQuery函数还考虑到了可能引发的问题，addClass（）函数不会删除已经应用于标签的旧的类，这个函数也只是添加新的类。

注意：为单个标记添加多个类名确实是有效的，并且往往很有用。浏览http：//webdesign.about.com/od/css/qt/tipcssmulticlas.htm可以了解关于这一技术的更多信息。

·removeClass（）是addClass（）相对应的函数。它从选择的元素上删除特定的类。例如，如果想要从ID为alertBox的＜div＞中删除名为highlight的类，这么做：

$（'#alertBox'）.removeClass（'highlight'）；

·最后，可能需要切换一个特定的类，即如果它还不存在就添加它，而如果它已经存在就删除它。表示元素处于打开或关闭状态的时候，切换是一种常用的方式。例如，当单击一个单选按钮，它就选中（打开）；再次单击它，选中标记就消失了（关闭）。

假设在Web页面上有一个按钮，当按下的时候会改变＜body＞标签的类。通过这么做，可以使用子孙选择器来构造另一组样式，从而为页面添加一次彻底的样式变化。当再次按下按钮，我们希望从＜body＞标签中删除该类，页面返回到其最初的外观。对于这个例子，假设访问者单击来改变页面样式的按钮有一个ID为changeStyle，并且我们想要在每次单击按钮的时候切换类名altStyle。下面是实现代码：

$（'#changeStyle'）.click（function（）{

$（'body'）.toggleClass（'altStyle'）；

}）；

此时，不要关心上面代码的第一行和第三行，这些和事件有关，事件使得脚本对页面上发生的操作做出响应（例如，单击按钮）。粗体代码展示了toggleClass（）函数，它在每次单击按钮的时候添加或删除类altStyle。