mootools-1.2 学习笔记之基础操作

     在mootools中进行元素的获取，添加，清除等操作很方便，下面的js代码段演示了在指定的DOM元素的前后方向及
内部创建链接元素(a href)的用法（源码包中basic.htm文件中的“createElements()”方法）。   
      

var  alink  =   new  Element( ' a ' , {
             ' styles ' :
            {
                ' display ' :  ' block ' ,
                ' border ' :  ' 1px solid black '
            },
             ' events ' :
            {
                 ' click ' :  function (){
                },
                 ' mousedown ' :  function (){
                }
            },
            ' class ' :  ' myClass ' ,
            ' href ' :  ' http://www.cnblogs.com/ ' ,
            ' text ' :  ' 博客园 '
    });
    
     var  clone  =  alink.clone().injectAfter( ' myElement ' );
    alink.clone().injectInside( ' content ' );  // 插到content内
    alink.clone().injectBefore( ' myElement ' ); // 插到myElement前
    alink.clone().injectAfter( ' myElement ' ); // 插到myElement后

     而下面的代码是对上面的链接元素采用json格式设置相应属性的用法：    
   

var  newHTML  =  $( ' myElement ' ).setProperties({
        src:  ' images/logo.png ' ,
        alt:  ' logo.png '
    });  // 设置属性

       
    下面的代码演示的是如何获取页面中的dom元素（以id或其它查询条件）    
    

/* *********************元素获取操 作************************ */
    $$( ' a ' );          // 页面上所有的超链接标签元素a
    $$( ' a ' ,  ' b ' );      // 页面上所有的超链接标签元素a和粗体标签b
    $$( ' #content ' );      // 一组(array类型)id 为 content 的元 素. (需要包 含 <Element.Selectors.js>)
     // 一组id为content的元素下的class为"myClass"的超链接元素a (需要包 含 <Element.Selectors.js>)
    $$( ' #content a.myClass ' );     
    
    $$( ' #content a.myClass ' ).each( function (el)
    {
         // alert(el.href); //http://www.cnblogs.com/        
    });

   
    接下来的代码演示如何向指定的DOM元素中追加内容：    
   

$( ' msg ' ).appendText( ' 使用appendText方法追加内容 ' );  // myElement的innerHTML现在变 为"hey howdy"

    向指定的元素添加class属性，或设置其它属性值时：    
  

/* ************************样式操 作**************************** */
     // 为元素添加class样式(如果该class样式在本元素上还没有)
    $( ' msg ' ).addClass( ' msgClass ' );
     // 检查元素的class中是否有给出的class名称
    alert($( ' msg ' ).hasClass( ' msgClass ' ));  // 因为上面添加了该样式，所以返回true
     // 检查元素的class中是否有给出的class名称
    $( ' msg ' ).removeClass( ' msgClass ' );  // 移除上面添加了的样式
    alert($( ' msg ' ).hasClass( ' msgClass ' ));  // 因为上面移除了该样式，所以返回false
    
     // 添加/删除 元素上的class
    $( ' msg ' ).toggleClass( ' msgClass ' );           // 调用(1)
    alert($( ' msg ' ).hasClass( ' msgClass ' ));       // 返回true
    $( ' msg ' ).toggleClass( ' msgClass ' );          // 调用(2)
    alert($( ' msg ' ).hasClass( ' msgClass ' ));    // 返回false

    $( ' msg ' ).setStyle( ' width ' ,  ' 300px ' );     
    $( ' msg ' ).setStyle( ' width ' ,  300 );
    $( ' msg ' ).setStyles({
       border:  ' 1px solid #000 ' ,
       width:  300 ,
       height:  400
    });

    $( ' myElement ' ).getStyle( ' width ' );  // 获取myElement宽值
    $( ' myElement ' ).getStyles( ' width ' , ' height ' , ' padding ' );  // 返回一个包含形如下列属性值的对象:
     // {width: "10px", height: "10px", padding: "10px 0px 10px 0px"}

    $( ' myElement ' ).getParent().id;  // 获取父元素id
    $( ' myElement ' ).setOpacity( 0.5 );  // 设置元素的透明度。如果opacity 为0，则也设置visibility 为 “hidden” ；
     // 如果opacity > 0，则也设置 visibility 为 “visible”

    而清空指定元素下的所有内容使用下面的方法：    
   

$( ' myElement ' ).empty()  //  清空myElement中的所有内容并返回自身

        
    好的，上面是对Element的一些常用操作，下面要介绍一下字符串操作。请看如下代码（注：OutputString在此仅作输出，
相应内容参见注释）：
    

function  stringSample()
{
    $( ' StringOutput ' ).innerHTML  =   '' ;

    OutputString( " '10px'.toInt() " ,
                   ' 10px ' .toInt()  //  10
                );
    OutputString( " '10.848'.toFloat() " ,
                   ' 10.848 ' .toFloat()  //  10.848
                );

     // test 把当前字符串用一个正则表达式做匹配测试
    OutputString( " 'I like cookies'.test('cookie') " ,
                  ' I like cookies ' .test( ' cookie ' )  //  返回 true
                 );     
    OutputString( " 'I like cookies'.test('COOKIE', 'i') " ,
                  ' I like cookies ' .test( ' COOKIE ' ,  ' i ' )  //  (忽略大小写) 返 回 true
                 );    
    OutputString( " 'I like cookies'.test('cake') " ,
                  ' I like cookies ' .test( ' cake ' )  //  返回 false
                 );         
    
     // camelCase 把横线分割字符串转换成大小写分隔字符串(即骆驼 型)
    OutputString( " 'I-like-cookies'.camelCase() " ,
                  ' I-like-cookies ' .camelCase()  //  "ILikeCookies"
                 );
    
     // tophyphenate  把大小写分隔字符串转换成横线分隔字符 串
    OutputString( " 'ILikeCookies'.hyphenate() " ,
                  ' ILikeCookies ' .hyphenate()  //  "I-like-cookies"
                 );

     // topcapitalize 把字符串中每个单词的第一个字母变为大 写
    OutputString( " 'i like cookies'.capitalize() " ,
                  ' i like cookies ' .capitalize()  //  "I Like Cookies"
                 );
                 
     // toptrim 去除字符串两端的空白字符
    OutputString( " '    i like cookies     '.trim() " ,
                  '     i like cookies      ' .trim()  //  "i like cookies"
                 );
    
     // clean 去除字符串两端的空白字符，并且把其他地方的两个以上相连的空白字符变为一个空白字 符
    OutputString( " ' i      like     cookies       "" n "" n'.clean() " ,
                  '  i      like     cookies      "n"n ' .clean()  //  "i like cookies"
                 );

     /*
      rgbToHex  把RGB颜色值转换为十六进制颜色值 。字符串的格式必须是如这样：“#ffffff”或 “rgba(255,255,255,1)”;
       参数: array  布尔值,默认为false.  如 果你需要数组形式的结果（如 [‘FF’,’33’,’00’]） 而不是字符串形式的结果
                    (如“#FF3300”）， 则设为true
       返回值: 十六进制或数组形式颜色值。如果给出的字符串形式的rgba值中的第四个参数为0， 如"rgba(255,1,1, 0)"，则返回
             “transparent” 。
     */
    OutputString( " '#112233'.rgbToHex() " ,
                  ' #112233 ' .rgbToHex()  // "#112233"
                 );     
    OutputString( " 'rgba(17,34,51,0)'.rgbToHex() " ,
                  ' rgba(17,34,51,0) ' .rgbToHex()  // "transparent"
                 );     
    OutputString( " '#112233'.rgbToHex(true) " ,
                  ' #112233 ' .rgbToHex( true )  // ['11','22','33']
                 );
    
    
     /* hexToRgb 把十六进制颜色值转换为RGB颜色值 。输入的字符串必须是代表一个 十六进制颜色值的字符串(带#或不带#). 也可
                以是三位的颜色值(如：‘333’);
       参数:array  布尔值，默认为false。如果你需要数组形式的结果（如：  [255,255,255] ）而不是字符串形式的结果（如：
               “#ffffff”）， 则设为true  
      返回值:rgb 字符串或数组
     */
    OutputString( " '#112233'.hexToRgb() " ,
                  ' #112233 ' .hexToRgb()  // "#112233"
                 );         
    OutputString( " '#112233'.hexToRgb(true) " ,
                  ' #112233 ' .hexToRgb( true )  // [17,34,51]
                 );     

     // topcontains 检查指定的字符串是否在本字符串中存在(即是否是子串) 。可 以指定第二个参数，它的作用是：以这个给出的
     // 字符或字符串来把当前字符串分割成一个列表，然后在这个列表项中查找是否含有和目标字符串匹配的 项
    OutputString( " 'a b c'.contains('c', ' ') " ,
                  ' a b c ' .contains( ' c ' ,  '   ' )  // true
                 );     
    OutputString( " 'a bc'.contains('bc') " ,
                  ' a bc ' .contains( ' bc ' )  // true
                 );         
    OutputString( " 'a bc'.contains('b', ' ') " ,
                  ' a bc ' .contains( ' b ' ,  '   ' )  // false
                 );     
    
     // topescapeRegExp 转义掉字符串中属于正则表达式专有符号的字 符
    OutputString( " 'animals.sheeps[1]'.escapeRegExp() " ,
                  ' animals.sheeps[1] ' .escapeRegExp()  //  'animals".sheeps"[1"]'
                 );
}

function  OutputString(source, transferObj)
{
    $( ' StringOutput ' ).innerHTML  +=   ' <font color=red> '   +  source  +   ' </font>:  '   +  transferObj  +   ' <br /> ' ;
}

    下面的代码是对数字的一些常用操作（相关内容见注释）：
    

function  numberSample()
{
     /*
       toplimit: 给数值设置限制范围
        参数: min  数值, 最小 值  
             max   数值, 最大值  
       返回值: 符合给定范围的值
     */
    OutputNumber( " (12).limit(2, 6.5) " ,
                 ( 12 ).limit( 2 ,  6.5 )   //  返回 6.5
                );
    OutputNumber( " (-4).limit(2, 6.5) " ,
                 ( - 4 ).limit( 2 ,  6.5 )   //  返回 2
                );
    OutputNumber( " (4.3).limit(2, 6.5) " ,
                 ( 4.3 ).limit( 2 ,  6.5 )  //  返回4.3
                );             
                
     /*             
       topround: 返回经过取舍后的数值
        参数: precision  整数, 小数点后的位数。可以为负数或者为 0 (默认).   
     */
    OutputNumber( " 12.45.round() " ,
                   12.45 .round()    //  返回 12
                );
    OutputNumber( " 12.45.round(1) " ,
                   12.45 .round( 1 )   //  返回 12.5
                );
    OutputNumber( " 12.45.round(-1) " ,
                   12.45 .round( - 1 )  //  返回 10
                );    
     /*             
       toptimes: 传入一个函数，执行这个函数，该数值表示的次数
        参数: function  要执行的函数
     */
    ( 4 ).times( function  Alert(){alert( 1 );});
                   
}

function  OutputNumber(source, transferObj)
{
    $( ' NumberOutput ' ).innerHTML  +=   ' <font color=red> '   +  source  +   ' </font>:  '   +  transferObj  +   ' <br /> ' ;
}

    下面示例是对数组操作的例子，mootools操作了强大的数组操作功能（包括过滤，合并，比较，查找，移除，扩展等），这也是
我最喜欢的一部分内容：
    

function  arraySample()
{
     /*
    forEach:  迭代一个数组。这个方法使各个浏览器都能使用forEach这个方法而不需要浏览器原生的对 forEach 的支 持。
              更多详情请参见： http://developer.mozilla.org/en/docs /Core_JavaScript_1.5_Reference:Global_Objects:Array:forEach
             forEach  迭代数组中的项并执行一个回调函数，回调函数只针对数组项中有值的项执行。如果数组中的项已经被删除或
              则没有被赋值，则回调函数不会执行。
     参数: fn  回调函数。数组的当前迭代项和index将被传 入。  
          bind   回调函数中this所要引用的对象  
     */
    [ ' apple ' , ' banana ' , ' lemon ' ].each( function (item, index){
    alert(index  +   "  =  "   +  item);
    },  null );  // bindObj);
    

     /*
    filter: 实现非原生支持filter的浏览器的filter方法。
             更多详情请参见： http://developer.mozilla.org/en/docs /Core_JavaScript_1.5_Reference:Objects:Array:filter
            filter  迭代数组中的项并执行一个回调函数。 并以回调函数返回true的那些项来构造一个新的数组. 回调函数只针 对
             数组项中有值的项执行。如果数组中的项已经被删除或则没有被赋值，则回调函数不会执行。
     参数: fn  回调函数。数组的当前迭代项和index将被传 入。  
          bind   回调函数中this所要引用的对象  
     */
     var  biggerThanTwenty  =  [ 10 , 3 , 25 , 100 ].filter( function (item, index){
         return  item  >   20 ;
    });    // 结果： biggerThanTwenty = [25,100]& lt;/span>

    /*
    map: 实现非原生支持 map 的浏览器的filter方法。
          更多详情请参见： http://developer.mozilla.org/en/docs /Core_JavaScript_1.5_Reference:Global_Objects:Array:map
         map  迭代数组中的项并执行一个回调函数, 并根据回调函数返回的值来构造一个新数组。 回调函数只针对数组项中有值 的
          项执行。如果数组中的项已经被删除或则没有被赋值，则回调函数不会执行。
     参数: fn  回调函数。数组的当前迭代项和index将被传 入。  
          bind   回调函数中this所要引用的对象  
    */
    var timesTwo = [1,2,3].map(function(item, index){
         return item * 2;
    });  //结果: timesTwo = [2,4,6];< /span>

    /*
    every: 实现非原生支持every 的浏览器的filter方法 。
            更多详情请参见： http://developer.mozilla.org/en/docs /Core_JavaScript_1.5_Reference:Global_Objects:Array:every
           every   迭代数组中的项并执行一个回调函数直到某个回调函数返回false。回调函数只针对数组项中有值的项执行。如
            果数组中的项已经被删除或则没有被赋值，则回调函数不会执行。
     参数:  fn  回调函数。数组的当前迭代项和index将被传 入。  
           bind   回调函数中this所要引用的对象  
    */  
    var areAllBigEnough = [10,4,25,100].every(function(item, index){
         return item > 20;
    });  //结果： areAllBigEnough = false< /span>

    /*
    some: 实现非原生支持 some 的浏览器的filter方法。
           更多详情请参见：http://developer.mozilla.org/en/docs /Core_JavaScript_1.5_Reference:Global_Objects:Array:some
          some  迭代数组中的项并执行一个回调函数直到某个回调函数返回true。回调函数只针对数组项中有值的项执行。如果数
           组中的项已经被删除或则没有被赋值，则回调函数不会执行。
     参数:  fn  回调函数。数组的当前迭代项和index将被传 入。  
           bind   回调函数中this所要引用的对象  
    */
    var isAnyBigEnough = [10,4,25,100].some(function(item, index){
     return item > 20;
    });//isAnyBigEnough = true


    /*
    indexOf:  实现非原生支持 indexOf 的浏览器的filter方 法。  
              更多详情请参见： http://developer.mozilla.org/en/docs /Core_JavaScript_1.5_Reference:Global_Objects:Array:indexOf
             indexOf  查找给出项在数组中的索引。
    参数: item  要在数组中定位的元素  
          from   整数; 可选; 查找的起始位置(默认 为 0)  
    */  
    ['apple','lemon','banana'].indexOf('lemon');     //returns 1
    ['apple','lemon'].indexOf('banana');         //returns -1

    /*
    each  和 Array.forEach方法等同
     参数: fn  回调函数。数组的当前迭代项和index将被传 入。  
          bind   回调函数中this所要引用的对象  
    */
    var Animals = ['Cat', 'Dog', 'Coala'];
    Animals.each(function(animal){
       alert(animal)
    });

    /*
    remove: 移除在数组中的和给出值相等的项
    参数: item  要从数组中移除的项  
    返回值: 移除项后的数组
    */
    // ["1","2","3","2"].remove("2");     // 结果： ["1","3"];
    

    /*
    contains:   测试数组中是否含有所给出的项
    参数: item  要在数组中查找的项  
          from   整数; 可选; 开始查找的起始索引, 默认为 0。如果为负数，则从数组的 结尾的偏移量开始。  

    返回值: true  找到  
            false   未找到  
    */
    ["a","b","c"].contains("a"); // true
    ["a","b","c"].contains("d"); // false

    /*
    associate 传入一个作为键的数组，然后和本数组的值结合产生一个键值对。
    参数: keys  一个其中的项将用来作为键的数组  
    */  
    var Animals = ['Cat', 'Dog', 'Coala', 'Lizard'];
    var Speech = ['Miao', 'Bau', 'Fruuu', 'Mute'];
    var Speeches = Animals.associate(Speech);
    //Speeches['Miao'] 的值 为 Cat.
    //Speeches['Bau']  的值 为 Dog.

    /*
    extend 接纳另外一个数组
    参数: array  将要纳入的数组  
    */
    var Animals = ['Cat', 'Dog', 'Coala'];
    Animals.extend(['Lizard']);
    //Animals 变为:  ['Cat', 'Dog', 'Coala', 'Lizard'];

    /*combine 和另一个数组合并，重复的项将被替 代。  merge已被换成了combine
    参数: array  将要合并的数组  
    */
    alert(['Cat','Dog'].combine(['Dog','Coala']));  //返回： ['Cat','Dog','Coala']
    
    /*
    include 把给出的元素纳入本数组。
    参数: item  将要纳入数组的项  
    */
    ['Cat','Dog'].include('Dog');   //返回： ['Cat','Dog']
    ['Cat','Dog'].include('Coala'); //返回： ['Cat','Dog','Coala']
    
    
    /*
    $each  可用来对非常规数组进行迭代, 比如内建的getElementsByTagName的返回值, 函数的 arguments对象, 或者是一个object
    参数: iterable  一个可迭代的元素或对象  
          function   迭代中所调用的回调函数
          bind   可选。回调函数中this将要引用的对象  

    回调函数的参数: item  当前正在迭代处理中的项
                    index   整数; 项在数组中的索引, 或是键(如果迭代的是对象)  
    */
    $each(['Sun','Mon','Tue'], function(day, index){
    alert('name:' + day + ', index: ' + index);
    });

    $each({first: "Sunday", second: "Monday", third: "Tuesday"},function(value, key){
        alert("the " + key + " day of the week is " + value);
    });
}

    下面图片演示了其输出的结果： 

 

          

    好了，今天的内容就到这里了。
        
    下载DEMO，请 点击这里。
    
    tag:mootools, 1.2    
    作者：代震军, daizhj
    原文链接http://www.cnblogs.com/daizhj/articles/1291583.html