关于Mootools.js的学习笔记
浏览数：38 /
时间：2015年06月09日
经过几天的学习，今天学习完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上面几个方法的提供的数据
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
