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