我的书签
添加书签
移除书签4.6 再谈选择页面元素
前面介绍过了，Web浏览器提供了两种主要的方法来选择Web页面上的元素，即document.getElementById（）和document.getElementsByTagName（）。遗憾的是，这两个方法都没有提供做出更细致的选择所需的控制。例如，如果要选择一个navButton类的所有＜a＞标签，首先需要选择每个标签，然后遍历每个标签并找到有相应的类名的那些标签。
workaround workshop解决方案研究DOM的问题
遗憾的是，主流浏览器还是按照传统用不同的方式来解释DOM。例如，Internet Explorer9之前的版本处理事件的方式和其他浏览器不同；同样的HTML在Firefox和Safari中产生的文本节点可能比Internet Explorer中产生的更多；并且，IE不会总是按照与Firefox、Safari或Opera相同的方式来获取HTML标签属性。此外，不同的浏览器处理HTML中的空白（例如，制表符和空格）的方式不同，在某些情况下，把空白当做额外文本节点一样对待（Firefox和Safari），而在另一些情况下则忽略空白（IE）。而这些只是最常见的Web浏览器处理DOM的一些区别。克服跨浏览器的JavaScript问题，对于JavaScript程序员来说是如此巨大的一项任务，以至于应
该用一整本（很枯燥的）书来介绍这个主题。实际上，很多JavaScript图书花了很多时间给出了让各种浏览器表现自己所需的代码。但是，生命如此短暂，你何不为自己的Web站点构建交互式的用户界面并添加漂亮的效果，而是要操心如何让脚本在Internet Explorer、Firefox、Safari和Opera中同样地工作呢。
此外，对于Web设计师来说，选择页面元素的传统的DOM方法并不是很直接，特别是已经有了一种优秀的方法（即CSS选择器）来选择页面元素的时候。好在jQuery解决了这些问题，并且提供了易于使用的、跨浏览器兼容的方法来选择和操作页面元素。
幸运的是，jQuery提供了一种非常强大的技术用来选择和操作元素的集合，这就是CSS选择器。没错，如果你习惯使用层叠样式表来进行Web页面样式化，应该已经使用jQuery了。CSS选择器只是一条指令，告诉Web浏览器将样式应用于哪个标签。例如，h1是一个基本的元素选择器，它向每个＜h1＞标签应用一个样式，而.copyright是一个类选择器，它只对那些class属性为copyright的标签进行样式化：
＜p class="copyright"＞Copyright，2011＜/p＞
通过jQuery，可以使用叫做jQuery对象的一条特殊命令来选择一个或多个元素。基本的语法如下所示：
$（'selector'）
在创建jQuery对象的时候，可以使用几乎所有的CSS 2.1和很多CSS 3选择器（即便浏览器本身并不理解特定的选择器——例如，IE无法识别某些CSS 3选择器）。例如，在jQuery中，如果想要选择带有一个特定ID banner的标签，可以这样编写：
$（'#banner'）
banner就是用来样式化ID名为banner的标签的CSS选择器，#部分表示要标识一个ID。当然，一旦选择一个或多个元素，我们希望对它们做些事情，jQuery提供了很多工具来操作元素。例如，假设想要改变一个元素中的HTML，可以这样编写：
$（'#banner'）.html（'＜h1＞JavaScript was here＜/h1＞'）；
从4.7节开始，在本书剩余的篇幅中，我们还将学习使用jQuery操作页面元素的更多内容。但是，首先需要学习更多关于如何使用jQuery选择页面元素的内容。
注意：大多数浏览器的最新版本都包含了通过类名和通过CSS选择器来选择元素的功能。然而，由于世界上使用的各种浏览器之间对这些功能的支持是不同的，jQuery这样解决这一困难可以确保你的选择即便在旧的浏览器版本IE 6中也能工作。
4.6.1 基本选择器
像ID、class和element这样的基本CSS选择器，构成了CSS的核心。它们是使用jQurey来选择范围广泛的元素的好方法。
阅读有关选择器的内容并非理解它们的最佳方法，本书包含一个交互的Web页面，以便可以测试选择器。在本书教程文件的testbed文件夹下，可以找到一个名为selectors.html的文件。在Web浏览器中打开这个文件。可以通过在选择器文本框中输入各种jQuery选择器并单击Apply按钮来测试它们（如图4-4所示）。
注意：参见本书1.3节中的“注意”部分了解如何找到本书的教程文件。
ID选择器
可以使用jQuery和一个CSS ID选择器来选择应用了一个ID的任何页面元素。例如，假设在一个Web页面中有如下的HTML：
＜p id="message"＞Special message＜/p＞
要使用老的DOM方式来选择元素，会这样编写：
var messagePara=document.getElementById（'message'）；
jQuery方法如下所示：
var messagePara=$（'#message'）；
和DOM方法不同，这里没有使用ID名（'message'），必须使用CSS语法来定义ID选择器（'#message'）。换句话说，在ID名的前面包含了井号，就好像为该ID创建了一种CSS样式。
图 4-4 本书的教程文件中提供的selectors.html允许尝试jQuery选择器。只要在Selector表单字段（圈出的）输入一个选择器，然后单击Apply按钮就可以了。这个页面把选择器转换为一个jQuery对象，并且匹配输入的选择器的任何元素都会变为红色。字段的下面是用来选择该项的jQuery代码，以及选择的元素的总数。在这个例子中，p是选择器，并且页面上的所有＜p＞标签（该页面上一共有12个）都突出显示为红色
元素选择器
对于getElementsByTagName（）方法，jQuery也拥有自己的替代。只要把标签的名字传递给jQuery即可。例如，使用旧的DOM方法来选择页面上的每个＜a＞标签，可以这么写：
var linksList=document.getElementsByTagName（'a'）；
使用jQuery，应该这么写：
var linksList=$（'a'）；
提示：jQuery所支持的选择器比这里列出的范围更广。尽管本书列出了很多有用的选择器，但可以在http：//docs.jquery.com/Selectors找到jQuery的选择器的一个完整列表。
类选择器
选择元素的另一种有用方式是通过类名。
例如，假设想要创建一个包含下拉菜单的导航栏，当访问者的鼠标光标移动到一个主导航按钮上时，希望下拉菜单出现。为此，需要使用JavaScript控制这些菜单，并且需要一种方法来编程每个主导航按钮，以便某人把鼠标光标移动到按钮上的时候打开一个下拉菜单。
注意：由于找到具有特定类名的所有元素是如此常见的一项任务，因此一些浏览器（例如，Firefox和Safari的最新版）已经添加了这样的功能。既然并不是所有的浏览器都有一种内置方式来找到一个特定类的元素，像jQuery这样考虑了不同浏览器的一个库就显得很有价值了。
有这样一种技术，把一个类（例如，navButton）添加到每个主导航栏链接中，然后使用JavaScript来查找带有该类名的链接，并且把所有神奇的菜单打开功能应用到这些链接（将在8.5节学习如何做到这一点）。这个方案现在听起来有点容易混淆，但是，现在来说重要的在于：要让这个导航栏工作，需要一种方式来仅仅选择具有一个特定类名的那些链接。
幸运的是，jQuery提供了一种简单的方法来选择具有相同类名的所有元素。只要像下面这样使用一个CSS类选择器即可：
$（'.submenu'）
再次，注意我们只是像这样编写CSS类选择器，在这个类选择器中，类名的前面有一个点号。一旦选择那些标签，就可以使用jQuery操作它们。例如，要隐藏类名为.submen的所有标签，可以这样编写：
$（'.submenu'）.hide（）；
我们将在6.1.1节学习有关jQuery hide（）函数的更多内容，但是现在，这个例子使我们对于jQuery如何工作有了一些概念。
