mootools(1)-基础

很多人听过jQuery,可能很少用到mootools.js这个类库，mootools符合oo的思想，代码强健，灵活的模块化框架，多数用在大型的电商网站中，比如：shopEx模板，ecstore，今天来开始学习js中的另一款优秀的js类库。
当jq和mootools冲突时，使用jq自带的方法：

var jq = jQuery.noConflict(); 

api地址：http://shouce.qdfuns.com/api/jsLib/mootools/v1.11/index.htm

选择器

1.ID
单个$符一般在获取ID时使用

var myDemo1 = $('id');var myDemo2 = $$('#id');var myDemo3 = document.id('id'); 

2.获取类、标签使用双$和jq类似的方法

var myClass = $$('.class');var myTag = $$('div');var myA = $$('.class a'); $('myElement').getElements('input[name$=log]');   //获取所有在myElement内的name属性值以'log'结尾的input元素=   :  等于^=  : 开始于$=  : 结束于!=  : 不等于

方法

1.内容
一般方法分获取操作和设置操作，set和get。

$$('.class').get('text');   //获取内容$$('.class').set('text','我是新内容！');  //设置$$('.class').get('html');//html可以设置标签$$('.class').set('html','<p>我是一段文字！<p/>');$$('.class').get('tag');    //获取标签名

2.扩展方法
inject :
可以用来把当前元素插入到指定元素之前(before),之中(inside),之后（after）

$('mydiv3').inject($('mydiv1'),'before');   //把mydiv3插入到mydiv1之前

injectBefore injectAfter injectInside :
用来把当前元素插入到指定元素之前、之后、之中（相当于参数”before”的inject方法）

$('mydiv3').injectBefore($('mydiv1'));

adopt ：
可以在当前元素中插入指定元素(元素嵌套);

$('myDiv').adopt($('myDiv1'));$('myDiv').adopt('myDiv1');$('myDiv').adopt('button');

remove ：
删除元素

$('mydiv').remove()   

clone ：
复制元素，contents:是连带节点的内容进行复制(deepclone),如果不指定，则连带

$('myDiv').clone(false); //只复制myDiv本身，不复制其content和子元素

appendText :
向元素添加文本节点

$('mydiv').appendText('文本内容');

replaceWith :
用其他元素替换当前元素

$('myDiv1').replaceWith($(a));

class类名操作 ：

$('mybtn').hasClass('r')　　//是否包含此类名 true 或false$('mybtn').addClass('r')   //添加class$('mybtn').removeClass('r')  //删除class$('mybtn').toggleClass('r')  //在addClass和removeClass之间切换

setOpacity :
设置元素的透明度

$('mybtn').setOpacity(0.5);

getValue ：
获取input、textarea、select中的value值

<input type='text' value='132' id='a'><input>$('a').getValue();    //132

属性操作 ：

通过style添加的CSS样式属性 ：getStyle  获取指定的属性getStyles 获取多个属性值setStyle  设置单个属性setStyles 设置多个属性$('mybtn').getStyle('color');$('mybtn').setStyles('color','width');$('mybtn').setStyle('color','red');$('mybtn').setStyles({    fontSize:'20px',    color:'orange'});元素自带属性 ：setProperty 设置单个属性setProperties 设置多个属性$('img').setProperty('src','');$('img').setProperties({    src: '',    alt: ''});getProperty  获取属性$('img').getProperty('src');

方位大小操作 ：

getPosition 获取定位坐标相当于 offset返回 ： {x:10,y:20}getTop 相当于getPosition返回的y值getLeft 相当于getPosition返回的x值scroll 滚动到指定位置window.scroll(0,500);

事件

1、addEvent 添加事件监听

var a = function (e) {alert('事件a：'+'clicked');};$('mybtn').addEvent('click',a);

添加多个事件监听

$('mybtn').addEvents({    'click':function (e) {alert('clicked!!!');},    'mouseover':function (e) {        alert('mouseover');    }});

2、removeEvent 删除事件监听
removeEvents 如果指定事件名，则全部删除

$('mybtn').removeEvent('click',a);$('mybtn').removeEvents('click');

3.fireEvent
直接触发事件上的监听方法

$('mybtn').fireEvent('click');