Prototype入门_chp2 - [Prototype/script.aculo.us]

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://dawnsolar.blogbus.com/logs/32736535.html

2. Prototype的选择器

2.1 Prototype v.s. JavaScript

在传统的JavaScript中,如果想获取某个DOM节点,可能需要好几个getElementById.如果你和我一样厌倦了这种繁杂的语法,那你一定会喜欢上Prototype简单直接的选择器.

2.2 元素选择器

$()是Prototype的元素选择器,相当于JavaScript的getElementById,而与后者不同的是,经过$()选择的元素,均可直接使用Prototype提供的众多DOM方法.

// JavaScript code:
document.getElementById('navBar');

// Prototype code:
$('navBar');

// 用Prototype一次选择多个元素
var item = $('navbar','adBar','footer');

2.3 创建数组

Prototype通过使用$w() ,可以简单的创建数组,各个值之间以空格分割.

// JavaScript code
// 夹杂着多个字符,很麻烦
var company = ['google','baidu','yahoo'];

// Prototype code
var company = $w('google baidu yahoo');

不能用Prototype的$w()创建有空格的数组,否则...

// JavaScript code
//-> person[0] = 'jack and lucy';
var person = ['jack and lucy'];

// Prototype
//-> person[0] = 'jack';
//-> person[1] = 'and';
//-> person[2] = 'luck';
var person = $w('jack and luck');

2.4 样式选择器

$$()允许你通过使用所有(甚至更多)css选择器(包括css3)规则来选择页面元素.

<!-html code->
<div id="demo">
<h1>这是一个Prototype demo</h1>
<ul>
<li class="first">test 1</li>
<li>test 2</li>
</ul>
</div>

// Prototype code
// 匹配名字为demo的div节点(#demo); 等同于$('demo');
$$('#demo');
// 匹配所有li; 等同于getElementByTagName;
$$('li');
// 匹配类为first的li
$$('li.first');

更多的选择器可以参考w3cshool的css3部分.

2.5 集合选择器

$A()允许你将任何类似于集合(有下标、有索引、或被数组所兼容)的东西转换成真正的Array对象.

转换规则如下:

null、undefine和false变为空数组
如果对象有toArray方法，则使用toArray方法来转换
以遍历的方式来构建数组

// JavaScript code
var p = document.getElementByTagName('p');
for (var i = 0; i < p.length; ++i) {
Element.hide(p.item[i]);
}

// Prototype code
var p = $A(document.getElementByTagName('p'));
p.each(Element.hide);

// 或者更简便的,使用上面介绍过的$$()选择器
var p = $$('p');
p.invok('hide');

2.6 表单选择器

$F()接受一个表单域(或其ID),返回域的值.

规则如下:

单选项,返回单个值
多选项,返回选中项值的数组
选项为空时,返回null
如果选项没有value值,则使用项的文本

2.7 散列

Prototype通过$H()来创建一个散列对象

2.8 Range(范围)

$R()是ObjectRange的一个别名

// Prototype code
//-> [1,2,3,4,5,6,7]
$A($R(1,7));