首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

JavaScript 框架比较(2)JavaScript 框架的典型特性

JavaScript 框架比较(2)JavaScript 框架的典型特性

JavaScript 框架的典型特性现在,让我们看一看大多数 JavaScript 框架都具备的有用特性。包括:
  • 选择器(Selector)
  • DOM 遍历
  • DOM 操作
  • 实用(Utility)函数
  • 事件处理
  • Ajax
在解释每个特性时,我将会用以下的一个或几个 JavaScript 框架举例说明:Prototype、jQuery、YUI、ExtJS 和 MooTools。尽管每个框架的实现和语法都各不相同,但概念都是相同的。每个框架都有一个详细的 API 参考,可帮助您理解如何使用该特定库中的特性。        
选择器大多数可用的 JavaScript 框架都会实现某种形式的对快速元素选取的支持。通常来说,这些选择器会使获得 HTML 元素引用的过程快很多,并允许通过 ID、类名、元素类型甚至使用一组伪选择器(pseudo-selector)来查找元素。        
例如,使用常规 JavaScript,您也许会用以下代码通过 ID 来选择 DOM 元素:        
1
var theElement = document.getElementById('the_element');




与其他框架一样,MooTools 提供了执行此操作的快捷方法。除了选取该元素,MooTools 还可通过一系列实用函数扩展此元素。其语法如下:        
1
var theElement = $('the_element');




如上所示的单美元符号(dollar)函数,在很多(但不是所有)流行的 JavaScript 框架中都可用,而且语法也大体一致。Prototype 库则更进一步,允许通过 ID 一次选取多个元素,并返回元素数组。和 MooTools 一样,可用 Prototype 实用函数扩展这些元素。用 Prototype 一次选取多个元素的语法是:        
1
var elementArray = $('element_one', 'element_two', 'element_three');




在  一节中,您将会学到更多 JavaScript 框架所提供的简化集合迭代的函数。        
在前面的例子中,必须提供需要选取的元素的 ID。然而,如果要选取多个元素(例如,所有图片)或是具有特定 CSS 类名的所有表行,那又怎么办呢?MooTools(还有其他库)提供了一个简单的方法来实现此功能 — 双美元符号(dollar-dollar)函数。它的工作方式与单美元符号函数相同,不同之处在于它接受 CSS 元素名、类名、伪选择器作为参数,而不是接受元素 ID 作为参数。例如,要使用 MooTools 选取 Web 页面上的所有图片,将用以下代码:              
1
var allImages = $$('img');




这将返回一个包含文档中的所有图片的数组,其中每一个图片都使用单美元符号函数进行扩展,以包含 MooTools 实用函数。
根据标记名选取元素非常有用,但如果只是想根据 CSS 类选择一个元素子集,该怎么办呢?这也很简单。在下面的例子中,MooTools 将会选择 CSS 类名为 “odd” 的所有表行。这在实现表行条状化(在表行之间交替变化背景色)时将非常有用:        
1
var allOddRows = $$('tr.odd');




实际上,MooTools 提供了实现表行条状化(row striping)的更好方法。在上面的例子中,假设表中的所有奇数行的 CSS 类名为 “odd”。以下代码不要求对表行定义任何 CSS 类名:
1
var allOddRows = $$('tbodydd');




这是一个伪选择器的例子,将会返回所有符合条件的对象,在本例中为页面中的 tbody(表主体)的所有奇数子元素。MooTools 伪选择器的其他例子包括:        
  • checked— 选取所有选中的元素(例如,选中的复选框)
  • enabled— 选取所有启用的元素
  • contains— 选取所有包含作为参数传递给选择器的文本的元素(例如,contains('this text'))
如前所述,并非所有 JavaScript 框架都使用单美元符号函数选取 DOM 元素。在 YUI (Yahoo! User Interface) 库第 3 版中,用以下代码根据 ID 选取元素(请注意 YUI 3 要求在 ID 前传递 ID 选择器符号 #):        
1
var theElement = Y.one('#the_element');




同样,与使用双美元符号函数根据标记或类名检索元素不同的是,YUI 使用了 Y.all 函数:        
1
var allOddRows = Y.all('tr.odd');




ExtJS 使用类似的方式,用以下语法根据 ID 选取元素:
1
var theElement = Ext.get('the_element');




以下语法用于根据标记和类名选取元素:
1
var allOddRows = Ext.select('tr.odd');




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