除了附加以外，您还可以 “前置” 内容，即在已有内容的前面而不是末尾插入新内容。另外，jQuery 提供了在给定元素之外插入内容的函数，不管是在开头还是在末尾。这类函数可以替换内容、清空内容、从 DOM 移除所有元素、克隆元素等等。

除了 DOM 操作函数，JavaScript 框架还包含一些用于以编程方式处理元素样式和 CSS 类的函数。例如，假设您有一个表，您想要在鼠标移到某一行时高亮显示该行。您创建了一个特定的名叫 hover 的 CSS 类，并且您想要将这个类动态添加到行中。在 YUI 中，可以使用以下代码检查行中是否已经具有 hover 类，如果已经有的话，则删除它，如果没有的话，则添加它：

if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');

而且，大多数 JavaScript 框架都有内置的 CSS 操作函数。

实用函数

很多 JavaScript 框架提供了大量实用函数，可使 JavaScript 开发变得很容易。由于这些函数非常多，因此本文无法一一介绍。我将只讨论大多数框架都具备的一些比较重要的函数。

如果您曾经使用 JavaScript 处理过数组，你应该熟悉使用 for 循环来遍历数组以处理数组值。例如，看一下清单 2 的代码：

清单 2. 遍历 JavaScript 数组的传统方法var fruit = ['apple', 'banana', 'orange']; for(var i = 0; i < fruit.length; i++) { alert(fruit[i]); }

清单 2 中的代码没有问题，但有些冗长。大多数 JavaScript 框架包含 each 函数，它会对数据组的每个元素调用一个指定的函数。使用 MooTools，可以用清单 3 的代码执行与清单 2 相同的操作。

清单 3. 使用 MooTools 中的 each 函数['apple', 'banana', 'orange'].each(function(item) { alert(item); });

清单 3 中的语法与 Prototype 和 jQuery 中的语法相同，而与 YUI 和 ExtJS 中的语法有细微差异。然而，当用于 hash 映射或对象而不是数组时，各框架的语法都不一样。例如在 MooTools 中，将用到清单 4 的代码：

清单 4. 在 MooTools 中对基于键/值对的对象使用 eachvar hash = new Hash({name: "Joe Lennon", email: "joe@joelennon.ie"}); hash.each(function(value, key) { alert(key + ": " + value); });

在 Prototype 中，将用到清单 5 中的代码。

清单 5. 在 Prototype 中对基于键/值对的对象使用 eachvar hash = $H({name: "Joe Lennon", email: "joe@joelennon.ie"}); hash.each(function(pair) { alert(pair.key + ": " + pair.value); });

每个框架都包含很多有用的函数，通常划分为 String 函数、Number 函数、Array 函数、Hash 函数、Date 函数等等。更多信息，请查阅相关 JavaScript 框架的 API 参考资料。

事件处理

每个 JavaScript 框架都实现了跨浏览器事件处理支持，鼓励您从旧式的内联事件连接转向一种流线化方法。看一下清单 6 中的 jQuery 示例，其中在 hover 事件中高亮显示 div 元素。

清单 6. 使用 jQuery 连接 hover Event$('the-box').hover(function() { $(this).addClass('highlight'); }, function() { $(this).removeClass('highlight'); });

这是一个由 jQuery 实现的特殊事件，请注意它有两个函数，触发 onMouseOver 事件时调用第一个，触发 onMouseOut 事件时调用第二个。这是因为 hover 没有标准的 DOM 事件。让我们查看一个更典型的事件，例如 click（查看清单 7）。

清单 7. 使用 jQuery 连接 click Event$('the-button').click(function() { alert('You pushed the button!'); });

如您所见，本例中只有一个函数参数。jQuery 使用这种方式处理大多数 JavaScript 事件。在 jQuery 中使用事件处理函数时，上下文变量是指触发事件的元素。有些框架并不使用这种处理方式。以 Prototype 为例，清单 8 显示了用 Prototype 实现的与清单 7 等价的代码。

清单 8. 使用 Prototype 连接 click Event$('the-button').observe('click', function(e) { alert('You pushed the button!'); });

您首先将注意到没有 click 函数，而是使用了 observe 函数，该函数在引用它自身之前将事件作为参数。您还可能注意到该函数的参数 e。这就是指向触发事件的元素的上下文变量。为了探究其工作原理，让我们针对 Prototype 重写 的代码（请看清单 9）。

清单 9. 使用 Prototype 连接 hover Event$('the-box').observe('mouseover', function(e) { var el = Event.element(e); el.addClassName('highlight'); }); $('the-box').observe('mouseout', function(e) { var el = Event.element(e); el.removeClassName('highlight'); });

与 jQuery 中使用美元符号函数获取上下文变量不同的是，在 Prototype 中需要使用 Event.element() 函数。并且，您需要对 mouseover 和 mouseout 使用不同的函数。

在阅读本文的过程中，您也许会注意到函数使用内联方式创建且都没有命名。这意味着它们无法被重用。Prototype 的 hover 例子展示了如何使用已命名的函数作为替代方法。如清单 10 所示。

清单 10. Prototype 中改进的 hover 例子function toggleClass(e) { var el = Event.element(e); if(el.hasClassName('highlight')) row.removeClassName('highlight'); else row.addClassName('highlight'); } $('the-box').observe('mouseover', toggleClass); $('the-box').observe('mouseout', toggleClass);