首页 > 代码库 > MOOTOOLS简单操作应用知识

MOOTOOLS简单操作应用知识

在项目中我们经常需要用到全选/反选.等操作按钮.

基于mootools框架与jquery框架不一致.导致缓慢.

1     $(‘chkall‘).addEvent(‘click‘,function(){2         if($(‘chkall‘).getProperty(‘checked‘)){3             $$(".checkbox").setProperty(‘checked‘,‘checked‘);4         }else{5             $$(".checkbox").setProperty(‘checked‘,‘‘);6         }7     });

当页面代码执行完成时,此时会触发domready事件,这样可以在页面完全下载完成(包含图片,flash等下载完成)之前执行你的脚本

 1 window.addEvent(‘domready‘, function() { 2 exampleFunction(); 3 }); 

  • 对数組中的每個元素執行一段腳本 – .each();
  • 得到数组中的最後一個元素 – .getLast();
  • 每個x毫秒觸發一個事件 – .periodical();
  • 对小数取整 – .round();
  • 把rgb转换为十六进制(HEX) – .rgbToHex();
  • 选择所有有相同ID或者CSS類名的DOM元素 – .getElements();
  • 給一個元素添加一個CSS类 – .addClass();
  • 取得一個元素的属性值 – .getProperty();
  • 改变一個元素的属性值 – .setProperty();
  • 取得一個元素的样式属性值 – .getStyle();
  • 改变一個元素的样式属性值 – .setStyle();
  • 取得一個元素的坐标位置 – .getCoordinates();
 1 // 选择ID为」body_wrap「的元素下面的第一个链接 2 $(‘body_wrap‘).getElement(‘a‘); 3 // 选择ID为」body_wrap「的元素下面的ID为」special_anchor「的元素 4 $(‘body_wrap‘).getElement(‘#special_anchor‘); 5   6 // 选择ID为」body_wrap「的元素下面第一個CSS類名為」special_anchor_class「的元素 7 $(‘body_wrap‘).getElement(‘.special_anchor_class‘); 8   9 // 选择页面中的所有div10 $$(‘div‘);11  12 // 选择ID为」id_name的元素和所有的div13 $$(‘#id_name‘, ‘div‘);14  15 //选择name为」phone_number「的input元素16 $(‘body_wrap‘).getElements(‘input[name=phone_number]‘);17  18 // 选择name以」phone「开头的input元素19 $(‘body_wrap‘).getElements(‘input[name^=phone]‘);20  21 // 选择name以数字(number)結束的input元素22 $(‘body_wrap‘).getElements(‘input[name$=number]‘);23  24 // 选择名字不等于」address「的input元素25 $(‘body_wrap‘).getElements(‘input[name!=address]‘);26  27 // 选择ID为」child_id「的元素的父元素28 $(‘child_id‘).getParent();29  30 // 设置ID为body_wrap的元素下的所有CSS类名为.middle_spans的span的背景色為#eee31 $(‘body_wrap‘).getElements(‘.middle_spans‘).setStyle(‘background-color‘, ‘#eee‘);32  33 //改变ID为body_wrap的元素的value的值34 $(‘body_wrap‘).set(‘value‘, ‘eee‘);35  36 //选择ID为body_wrap的元素下面所有的div作为循环37 $(‘body_wrap‘).getElements(‘div‘).each(function() {38 alert(‘a div‘);39 });40  41 //从数组中随机取出一个元素42 var randomElement = myArray.getRandom();43  44 //通過.erase();方法,你可以清除一個元素的屬性值45 $(‘id_name‘).erase(‘href‘);

 

MOOTOOLS简单操作应用知识