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');