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对象.

    转换规则如下:

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

    // 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),返回域的值.

    规则如下:

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

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

  2.8 Range(范围)

    $R()是ObjectRange的一个别名
   
    // Prototype code
    //-> [1,2,3,4,5,6,7]
    $A($R(1,7));