关于Mootools.js的学习笔记

经过几天的学习，今天学习完Mootools.js框架，感觉和jquery差不多，也有他自己的长处，对dom元素，Event事件有更多的扩展，他的简写可能会和jquery有冲突。
但是还是有些不懂的地方，里面好像有几个别的js库但是网上下载不到例如：Dom.js ,Color.js,Window.Base.js这些，希望知道的朋友告诉下！
http://mootools.net/core/docs/1.5.1/Request/Request.HTML--文档
1.mootools.js可以代替prototype.js它是个纯OO的javascript 框架。
2.能写出容易扩展且兼容性搞的前台代码。

----------
3.$type();//这个方法是对js原型方法typeof()的一个扩展。
4.$chk("abc")//true,除了null,undefined都返回true
5.$pick("")//如果第一个参数对象存在，则返回这个对象；否则返回第二个参数对象
  var x = $pick("openfdc","zarknight");//openfdc
  var y = $pick(null,"zarknight");//zarknight
6.var x = $random(1,100);//产生一个1~100之间的随机整数

7.对Array的扩展
  a.copy(); a.copy(2,2);
  a.remove(4);//按值删除不是索引
  a.test(11)//查看数组中是否存在11这个值
  var a = [1,2,3,4];var b = [1,11,12];a.extend(b);//1,2,3,4,1,11,12
8.associate()把另一个数组中的值作为key,另一个数组中的值做为值，组成一个键值对的数组。
9.$A()==Copy();//复制数组
10.$each();//$each(a,function(e){alert(e);});//循环数组，等同于js的ForEach();
11.Array.filter();//对数组元素进行筛选过滤，return e > 3;
12.Array.map();//对数组的每个元素进行一次操作，return e+"px";
13.Array.every();//是否每个元素都通过了条件判断如果是则返回true如果有一个不是，则立马返回false
14.Array.map();//是否有一个或以上元素通过了如果有则立马返回true,如果一个都没有，则返回false

------------下面对string的扩展
15.test();//对字符串执行正则表达式匹配
16.toint();//转换为整数
17.toFloat();//转换为浮点数
18.camelCase()把以"-"分隔的字符串如"my-work"转换成"myWork"这样的形式
19.hyphenate把形如"myNotePad"形式的字符串，转换成"my-note-pad"这样的形式
20.var x = "hello world".capitalize();//Hello World首字母大写
21.trim()去除字符串首尾的所有空格
22.clean去除字符串中所有多余空格(收尾全部去除，单词之间留一个空格)
23.var myInput = new Element(‘input‘);//创建一个表单元素

------------关于选择器，mootools.js中也有类似jquery的选择器
   $(‘my_div‘)    //获取一个id为my_div的元素，注意不要#。
   $$(‘a‘);       //获取页面上所有超链接<a>标签对象
   $$(‘a‘,‘b‘);   //获取页面上所有超链接<a>标签和粗体<b>标签
   $$(‘#my_div‘); //获取id为my_div的元素
   $$(‘#my_div a.myClass‘);  //获取id为my_div的元素子元素，并且这些自元素是的所有class="myClass"的<a>标签
   
----------对Element元素操作的扩展
24.inject()方法 参数：将指定元素放在规定元素，之前(before)，之中(inside)，之后(after);
   $(‘myDiv3‘).inject($(‘myDiv1‘),‘before‘);//把myDiv3插入到myDiv1之前
25. injectBefore()即相当于参数为‘before‘的inject方法,injectInside(),injectAfter();
26.setStyle(property, value);//类似jquery的css();
27.clone();//克隆元素$(‘myDiv‘).clone(false);//只复制myDiv本身不复制其content和子元素
28.replaceWith();//用其他元素替换当前元素
29.$(‘myDiv1‘).appendText(‘world‘);//向元素添加文本节点
30.$(‘myDiv1‘).hasClass(‘clazz_1‘);//判断元素的class属性中是否包含指定的样式名
31.$(‘myDiv1‘).addClass(‘clazz_1‘);//向指定元素上添加样式class
32.$(‘myDiv1‘).removeClass(‘clazz_1‘);//删除指定的样式class
33.toggleClass();//在addClass和removeClass的功能之间切换
34.setStyles向元素设置多个style属性
   $(‘myDiv‘).setStyles({
      border: ‘1px solid #000‘,
      width: ‘300px‘,
      height: ‘400px‘
   });
   
35.$(‘myDiv‘).setOpacity(0.5);//透明度设置为50%
36.var w = $(‘myDiv‘).getStyle(‘width‘); //获取宽度
37.addEvent//绑定事件
   $(‘myDiv‘).addEvent(‘click‘, function(){
       alert(‘haha,clicked!‘);
   });
   
38.addEvents//同时绑定多个事件
  $(‘myBtn‘).addEvents({
    ‘click‘: function(e){alert(‘clicked!!!‘);},
    ‘mouseout‘: function(e){alert(‘mouseouted!!!‘);}
 });
 
39.$(‘myBtn‘).removeEvent(‘click‘，fun);//删除指定的一个方法
40.$(‘myBtn‘).removeEvents(‘click‘);//不指定方法名将删除所有的方法
41.$(‘myBtn‘).fireEvent(‘click‘);//触发元素的所有单击事件
42.$(‘myDiv‘).getFirst();//获取该元素中的第一个子元素
43.$(‘myDiv‘).getLast();//获取最后一个子元素
44.$(‘first‘).getParent();//获取父元素
45.$(‘myDiv‘).getChildren();//获取所有子元素
46.$(‘myImage‘).setProperty(‘src‘, ‘whatever.gif‘); //设置元素的属性值
47.setProperties//设置元素的多个属性
  $(‘myElement‘).setProperties({
   src: ‘whatever.gif‘,
   alt:  ‘whatever dude‘
  });
48.$(‘myElement‘).setHTML(newHTML);//相当于设置元素的innerHTML
49.$(‘myImage‘).getProperty(‘src‘);//获取属性值
50.getTag()//获取HTML标签元素的标签名称
51.window.scrollTo(0,200);//相当于把滚动条滚动到指定的状态$(‘myDiv1‘).scrollTo(0,200)
52.GetValue();//相当于jquery的val();
53.getSize();//获取元素width,height返回值为对象
54.$(‘element‘).getPosition();//获取元素的位置，XY轴，getTop(),getLeft();
55.var myValues = $(‘myElement‘).getCoordinates();//获取元素的当前width, height, left, right, top, bottom值
   {
   width:  200,
   height: 300,
   left:   100,
   top:    50,
   right:  300,
   bottom: 350
  }
  
--------------------事件Evant
56.var event = new Event(event);alert(event.shift);//如果按下的按键是shift,则alert结果为true[control,alt,meta用法和shift相同]。
   alert(event.page.y + "||" + event.client.y);
   page.x - 鼠标事件触发时，鼠标相对于整个窗体的x
   page.y - 鼠标事件触发时，鼠标相对于整个窗体的y
   client.x - 鼠标事件触发时，鼠标相对于当前视野的y
   client.y - 鼠标事件触发时，鼠标相对于当前视野的y
   evant.key;//按键的值 keydown
   evant.target;//发生事件的元素
 57.stop();//停止事件的执行
 58.stopPropagation();//停止事件的冒泡传递
 59.preventDefault();//停止事件的默认动作
 
 ---------------------OOP
 61.Chain//类，这里Chain类把function组织成一个链式结构 
    .chain();//方法添加一个函数到链中
    .callChain();//执行链中第一个函数，然后删除(原来链中第二个函数将变为新的链首)
    .clearChain();//清除链中所有函数
    var c = new Chain().chain(function(){
                                alert(‘Func A!‘);
                             }).chain(function(){
                                alert(‘Func B!‘);
                             }).chain(function(){
                                alert(‘Func C!‘);
                             });
       c.callChain();//"Func A!"
       c.callChain();//"Func B!"
       c.callChain();//"Func C!"
       
62.Events//类，事件管理器
   addEvent()//向管理器中添加指定事件的监听器
   fireEvent()//触发执行指定事件下的所有监听器方法
   removeEvent()//删除 
   var evts = new Events();
   var fa = function(e){
      alert(‘aaaaaaa‘);
     };
   var fb = function(e){
      alert(‘bbbbbbb‘);
     };
   evts.addEvent(‘onMyEvent‘, fa).addEvent(‘myEvent‘, fb);
   evts.fireEvent(‘onMyEvent‘);//先alert出"aaaaaaa",然后alert出"bbbbbbb"
   evts.removeEvent(‘onMyEvent‘,fa);//删除方法fa
   evts.fireEvent(‘onMyEvent‘);//alert 出"bbbbbbb"
   
63.类Options//作用：为实现该类的类提供一个可选参数管理器
64.类Group;//为事件分组
    <!--<a href="#" id="link1" >AAA</a>-->
    <!--<a href="#" id="link2" >BBB</a>-->
    <!--<a href="#" id="link3" >CCC</a>-->
     $(‘link1‘).addEvent(‘click‘,function(){alert(‘AAA‘);});
     $(‘link2‘).addEvent(‘click‘,function(){alert(‘BBB‘);});
     $(‘link3‘).addEvent(‘click‘,function(){alert(‘CCC‘);});
     var g = new Group($(‘link1‘),$(‘link2‘),$(‘link3‘));
     g.addEvent(‘click‘, function(){
          alert(‘group event‘);
     });
    //当你按照类似如下规律点击链接：
      先点击link1：alert出"AAA"
      再点击link2：alert出"BBB"
      最后点击link3：先alert出"group event"，再alert出"CCC"

--------------------mootools：Css查询支持之Dom.js
65.$E();//方法，获取【第一个】符合规则的元素$E(‘a‘,‘myDiv‘);获取的是id为link1的超链接元素
66.$ES(‘a‘,‘myDiv‘);//获取所有3个链接元素数组

对Element的扩展方法
67.$(‘myDiv‘).getElements(‘a‘);   //获取myDiv下的3个链接
68.$(‘myDiv‘).getElementById(‘link2‘);//再当前元素之下的范围内查找,如同$E();
69.$(‘myDiv‘).getElementsBySelector(‘#link1,#link2‘);//和getElements大致相同，并且支持css选择器中的逗号
70.document.getElementsByClassName(‘my_clazz‘);//扩展的新方法
71.$(‘myDiv‘).getElementsByTagName(‘a‘);//新扩展,每个Element元素可以使用getElementsByTagName方法

-------------------------mootools工具类Hash和Color
72.Hash类，创建一个键值对的数据结构
   get();//按键取值
   hasKey();//判断是否有指定的键
   set(key,val)把键值对存放入Hash
   remove(key);//删除指定键的键值对
   each();//用法和Array的each相似，每个键值对的通过each中指定的函数的第一个参数(值)和第二个参数(键)传入。
   extend();//把一个包含键值对的对象合并到当前Hash中，相同键的值将被新的值覆盖。
   empty();//这个方法的功能在mootools1.0和1.1dev版本中是完全不一样的，1.0中是判断Hash中是否已经没有键值对，而在1.1dev中是清空Hash中的所有键值对，请注意区别。
   keys();//获取Hash中的所有键
   values();//获取Hash中的所有值
   
var hash = new Hash({
         one: 1,
         two: 2,
         three: 3
 });  
 var one = hash.get(‘one‘);
 var hk  = hash.hasKey(‘three‘);
 hash.set(‘four‘,4);
  hash.each(function(v,k){
         alert(k+‘-‘+v);
 });
//创建Hash的快捷方法：
$H
$H({a:1,b:2})

73.Color类//颜色对象，包含了很多颜色管理方法，帮助对颜色的计算，调色更方便
   var black = new Color(‘#000‘);///////////////////////////这个对象报错，可能需要其他js文件  Color.js
   var purple = new Color([255,0,255]);
   方法：mix();//把多种颜色和当前颜色混合
   var darkpurple = black.mix(‘#fff‘, purple, 10);
   $(‘myDiv‘).setStyle(‘background-color‘, darkpurple);
74.方法：invert
   作用：取当前颜色的反色
   var c = new Color(‘#FF9900‘).invert();
   $(‘myDiv‘).setStyle(‘background-color‘,c);
75.方法：setHue
   作用：设置颜色的色相
   var c = new Color(‘#FF9900‘).setHue(10);
   $(‘myDiv‘).setStyle(‘background-color‘,c);
76.方法：setSaturation
   作用：设置色饱和度
   var c = new Color(‘#FF9900‘).setSaturation(50);
   $(‘myDiv‘).setStyle(‘background-color‘,c);
77.方法：setBrightness
   作用：设置色彩亮度
   var c = new Color(‘#FF9900‘).setBrightness(10);
   $(‘myDiv‘).setStyle(‘background-color‘,c);
78.创建Color的两个快捷工具方法：
   $RGB(r, g, b) - 建立RGB模式的Color
   $HSB(h, s, b) - 建立HSB模式的Color
-------------------------------------------mootools.js //对浏览器对象的扩展Window.Base.js
79.window.onDomReady(function(e){
         alert(‘dom is ready!!!‘);
 });//加载时执行

80.mootools的Window.Size.js中呢，提供了一系列和浏览器window的尺寸有关的工具方法，
   window的扩展方法：
        方法：getWidth - 获取window的当前高度(不包含滚动条的滚动量，即当前能见视野高度)
        方法：getHeight - 获取window的当前宽度(不包含滚动条的滚动量，即当前能见视野宽度)
        方法：getScrollWidth - 获取window的当前高度(包含了整个内容区域，即可滚动部分也计算在内)
        方法：getScrollHeight - 获取window的当前宽度(包含了整个内容区域，即可滚动部分也计算在内)
        方法：getScrollLeft - 获取window滚动的水平偏移量
        方法：getScrollTop - 获取window滚动的垂直偏移量
        方法：getSize - 获取window上面几个方法的提供的数据