JavaScript框架比较:选择器（2）

选择器

大多数JavaScript框架可实现某种形式的快速元素选择。一般来说，这些选择器使获取一个元素的引用更加快捷，并允许你通过ID、class、元素类型或一些伪类选择符来选取元素。

例如，使用通常的JavaScript，你可以使用下面的代码借助ID来取得DOM元素。

var theElement = document.getElementById('the_element');

与其他几个框架一样，MooTools提供了一个执行该操作的快捷方法。除了选择元素，MooTools通过自己一系列的功能函数扩展了元素。

var theElement = $('the_element');

$函数在几个流行的框架（并非全部）中可用，其语法大致相同。Prototype更深一层，通过ID在任何时候可以选择多个元素，返回的是一个元素数组。与

MooTools一样，这些元素利用Prototype的实用函数扩展。利用Prototype库在任何时候选择多个元素的语法是这样的：

var elementArray = $('element_one', 'element_two', 'element_three');

在实用函数这一部分，你将了解到JavaScript框架提供的一些函数迭代我们的集合更加容易。

在前面的例子，你必须提供你欲选择元素的ID。但是，你要选择多个元素该怎么办？所有image、拥有特定className的表格的每一行。MooTools（其它的几个库）提供了一个非常简单的方法来做到这一点－－$$函数。除了元素的ID外，他还可以接受以下参数：元素的名字、类名以及伪类选择器，其工作原理与$函数相似。例如，使用MooTools获取页面上所有的图片，你可以使用下面的代码：

var allImages = $$('img');

这将得到文档中所有imag的数组，每一个通过$函数和其实用函数进行扩展。

通过tag标签来选取对象是非常有用的，但如果你只想基于元素的class选取它的部分子集，遮盖怎么办？同样很简单。在下面的例子中，MooTools将选择table中class为“odd”的行，这在对每行进行操作时很有用（交替变换表格每一行的颜色）。

var allOddRows = $$('tr.odd');

事实上，MooTools提供了一个更好的方法执行行操作。在前面的例子中，假定table的奇数行授予了类名“odd”。那么下面的代码不需要在table的每一行上定义任何类名。

var allOddRows = $$('tbody <IMG class=wp-smiley alt=:o src="http://www.denisdeng.com/wp-includes/images/smilies/icon_surprised.gif"> dd');

这是一个伪类选择器的例子，它返回匹配规范的任何对象。在这个例子中，结果为页面中tbody元素中所有奇数行的子元素。MooTools其它伪类元素的例子包括：

• checked 所有被选中的元素（例如：选中的复选框）；

• enabled 所有可用的元素；

• contains 所有包含文本（作为参数传递给选择器）的元素。

如前所述，并非所有的JavaScript框架都使用$函数来选取DOM元素。在YUI（Yahoo用户界面）的第三个版本中，下面的代码是通过ID来选取元素的（注意：YUI3需要在ID前加上字符#）。

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

同样，通过tag或class来选取元素也不是使用$$函数，在YUI中你要使用Y.all来代替。

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

ExtJS以同样的方式工作，通过ID选择元素用下面的语法：

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

而通过tag和class来获取元素则用下面的语法：

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

在下一章中，你将了解到如何使用JavaScript框架来轻松遍历DOM对象，换句话说，找到与选定元素有父子和兄弟关系的元素。

转载地址：http://www.denisdeng.com/?p=699

原文地址：http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html