JavaScript 框架比较(2)_H5之家 - 中国HTML5教程资源分享第一站

实际上，MooTools 提供了实现表行条状化（row striping）的更好方法。在上面的例子中，假设表中的所有奇数行的 CSS 类名为 “odd”。以下代码不要求对表行定义任何 CSS 类名：

var allOddRows = $$('tbody:odd');

这是一个伪选择器的例子，将会返回所有符合条件的对象，在本例中为页面中的 tbody（表主体）的所有奇数子元素。MooTools 伪选择器的其他例子包括：

如前所述，并非所有 JavaScript 框架都使用单美元符号函数选取 DOM 元素。在 YUI (Yahoo! User Interface) 库第 3 版中，用以下代码根据 ID 选取元素（请注意 YUI 3 要求在 ID 前传递 ID 选择器符号 #）：

var theElement = Y.one('#the_element');

同样，与使用双美元符号函数根据标记或类名检索元素不同的是，YUI 使用了 Y.all 函数：

var allOddRows = Y.all('tr.odd');

ExtJS 使用类似的方式，用以下语法根据 ID 选取元素：

var theElement = Ext.get('the_element');

以下语法用于根据标记和类名选取元素：

var allOddRows = Ext.select('tr.odd');

在下一节中，您将看到 JavaScript 框架如何轻松遍历 DOM，换句话说，就是查找选定元素的父元素、子元素、兄弟元素。您还会学到如何使用库操作 DOM 以修改元素。

DOM 遍历

根据 ID、元素类型或 CSS 类名查找元素非常有用，但如何根据元素在 DOM 树中的位置执行查找呢？换而言之，根据一个给定的元素查找其父元素、子元素、前一个或后一个兄弟元素。例如，看一下清单 1 的 HTML 片段。

清单 1. HTML 片段（一个 HTML 表）<table> <thead> <tr> <th>Name</th> <th>Email Address</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>Joe Lennon</td> <td>joe@joelennon.ie</td> <td><a href="#">Edit</a>  <a href="#">Delete</a></td> </tr> <tr> <td>Jill Mac Sweeney</td> <td>jill@example.com</td> <td><a href="#">Edit</a>  <a href="#">Delete</a></td> </tr> </tbody> </table>

清单 1 用缩进表示每个元素在 DOM 节点树中的位置。在该例中，table 元素是根元素，它有两个子节点，thead 和 tbody。thead 元素只有一个子节点 tr，后者有三个子节点 — 所有 th 元素。tbody 元素有两个子节点，均为 tr 元素，每个 tr 元素又有三个子元素。每行的第三个子元素又有两个子节点，都是 a （锚点）标记。

如您所知，可以使用 JavaScript 框架的 Selector 函数根据 ID 轻松选取元素。在该例中，有两个元素具有 ID — 均为 tr（表行）元素，ID 分别为 row-001 和 row-002。要使用 Prototype 选取第一个 tr 元素，需要用到以下代码：

var theRow = $('row-001');

在前面的小节中，您学会了如何使用选择器根据类型或 CSS 类检索元素。在本例中，可以使用以下语法选取所有 td 元素。

var allCells = $$('td');

这段代码的问题是它将返回 DOM 中的所有 td 元素。但是，如果只希望获取 ID 为 row-001 的行中的 td 元素，怎么办呢？这时就该使用 DOM 遍历函数了。首先，使用 Prototype 选取 ID 为 row-001 的 tr 元素的所有子节点：

var firstRowCells = theRow.childElements();

这将返回 theRow 变量（之前已设为 ID 为 row-001 的元素）的所有子元素的数组。

下一步，假设只希望取得该行的第一个子节点，在本例中，是内容为 “Joe Lennon” 的 td 元素。应使用以下语句：

var firstRowFirstCell = theRow.down();

很简单吧？这种特别的用法等价于：

var firstRowFirstCell = theRow.childElements()[0];

也可以表示为：

var firstRowFirstCell = theRow.down(0);

JavaScript 索引值从零（0）开始，所以以上语句实际上是告诉 JavaScript 选取第一个子元素。要选取第二个子元素（包含 joe@joelennon.ie 邮件地址的单元格），可以使用下面的语句：

var firstRowSecondCell = theRow.down(1);

或者，可以在 DOM 兄弟节点间导航。本例中，第二个单元格是第一个单元格的下一个兄弟节点，因此可以使用以下语句：

var firstRowSecondCell = firstRowFirstCell.next();

这与 down() 函数使用了相同的方式，因此可以使用下面的语句选择第三个单元格：

var firstRowThirdCell = firstRowFirstCell.next(1);

除了使用索引查找特定节点外，Prototype 还允许使用 CSS 选择器语法。考虑的例子，找到包含 Jill Mac Sweeney 的明细的行的第二个链接（“Delete” 链接）：

var secondRowSecondLink = $('row-002').down('a', 1);

在本例中，可以使用美元符号函数找到 ID 为 row-002 的元素，然后向下遍历 DOM，直到找到下一个后代 a（锚点）元素。

有些框架可以使用 “菊花链” 遍历函数，表示可以将遍历命令互相连接。在 Prototype 中实现前一个例子的另一种方法是：

var secondRowSecondLink = $('row-002').down('a').next();

考虑下面的例子：

var domTraversal = $('row-001').down().up().next().previous();

如您所见，菊花链方式可以将几个 DOM 遍历语句连接起来。实际上，上例实际上选择 tr 元素 row-001，因此菊花链刚好回到了起点！

DOM 操作

上文中，您已经看到如何使用 JavaScript 框架的选择器和 DOM 遍历来简化特定元素的选取。然而，要想改变 Web 页面中的特定元素的外观或内容，需要操作 DOM 并应用改变。如果使用纯 JavaScript 将会非常繁琐，幸运的是，大多数 JavaScript 框架提供了有用的函数，简化了这些操作。

假设您有一个 div 元素，其 id 是 the-box：

<div>Message goes here</div>

如果要用 jQuery 改变 “Message goes here” 文本，方法如下：

$('the-box').html('This is the new message!');

实际上，可以在函数内部使用 HTML 代码，它将由浏览器解析。例如：

$('the-box').html('This is the <strong>new</strong> message!');

在本例中，div 元素的内容在 DOM 中呈现为：

<div>This is the <strong>new</strong> message!</div>

当然，在一些情况下您需要使用特殊字符，如大于号或小于号。可以不指定专门的 HTML 实体代码，而是使用 jQuery 的 text 函数：

$('the-box').text('300 > 200');

这将把 div 元素更新为以下代码：

在上面的例子中，原有内容被新内容取代。如果只是想把消息添加到文本的后面，该怎么做呢？幸好，jQuery 提供了专门的 append 函数：

$('the-box').append(', here goes message');

将这个函数应用到初始的 div 元素，div 元素的内容就变成下面这样：

<div>Message goes here, here goes message</div>