Prototype 1.6 边学边译 -- 工具函数 $

最新推荐文章于 2026-01-06 22:03:14 发布

翻译最新推荐文章于 2026-01-06 22:03:14 发布 · 863 阅读

文章标签：

#prototype #扩展 #html #function #null #工具

Prototype 1.6 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了Prototype框架中的$函数，解释了其如何简化HTML元素的引用，支持通过ID或DOM节点来获取元素，并展示了其在函数编写中的灵活运用。

$

$(id | element) -> HTMLElement $((id | element)...) -> [HTMLElement...]

如果传入一个字符串参数，返回 HTML 页面中 ID 等于该字符串参数的元素。如果传入一个 HTML 元素作为参数，则返回该元素。可以传入任意多个参数（可同时具有字符串参数和元素参数）, 则返回一个 DOM 元素数组。所有返回的元素都已经经过 Prototype DOM 扩展。

$ 函数是 Prototype 的基础，就像是一把瑞士军刀。它并不仅只是 document.getElementById 的简单别名。它同时也能让你在你的函数中引用 HTML 元素而不用关心你使用的参数是 ID 还是 DOM 节点：

function foo(element) { element = $(element); /* 其它代码... */ }

这个方法将会使你的代码更具有灵活性－－你可以传递元素 ID，也可以传递元素本身，而不用作任何类型检测。

如果只传入一个参数，$ 函数返回元素，然而如果传入多个参数，则 $ 函数返回一个元素数组（并且函数是递归的：在极端的情况下，你也可以传入一个包含着一些数组的数组）。然而，这依赖于 getElementById， W3C 标准规定：如果指定的 ID 不存在，则返回 null，如果多个 DOM 节点具有同一个 ID，则返回的结果是不确定的。所以请不要为多个 DOM 元素指定同一个 ID。

该函数使用 Element.extend 扩展所有返回的元素，因此你可以在返回值上应用 Prototype 的 DOM 扩展方法。下面两行代码是等同的，但是第二种方式更具有面向对象的特性：

Element.hide('itemId'); // 注意：与完全的面向对象程序设计相似...
$('itemId').hide(); // 非常清晰的感觉，幸亏对 DOM 元素做了扩展

并且，在使用迭代器时，$ 函数让代码变得更优雅、更简捷、更有效：

['item1', 'item2', 'item3'].each(Element.hide); 
$('item1', 'item2', 'item3').invoke('hide');  //更好的方式

更多的信息请查看： How Prototype extends the DOM