JS三教九流系列-Mootools.js-另一款非常优秀的js类库（一）
相比于jq，mootools很多人是没有听说过得，他的api和对dom的操作没有jq的好，不容易上手。
设计也不如jq复杂，jq我们在使用时很容易上手，不得不承认，在容易上手的背后有着很复杂的原理，大神们都说过，能分析jq源码，几乎再去分析其他类库源码都没有压力了！
mootools其实也是非常优秀的js类库，对象的操作有着非常大的优势。我们开始学习和使用moootools开发项目！
mootools类库下载地址：http://apps.bdimg.com/libs/mootools/1.4.5/mootools-yui-compressed.js
mootools中文api地址： http://www.chinamootools.com/core.html
一、了解mootools api
我们会将moootools的api与jq进行对比
1.类库运行代码的外部环境
| mootools | jq |
window.addEvent('domready', function() { alert(1);//代码位置 }); |
$(function(){ alert(1);//代码位置 }) |
jq的代码要包裹在document对象的ready事件内部，我们的是简写
mootools的是包裹在window对象的domready事件内部，准备事件是类库自定义的，
原生js为了正确处理我们是包裹在window对象的load事件内部
2.功能api
---学习前的基本api掌握
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
</style>
</head>
<body>
<div class="demo" id="myElement">id</div>
<div class="demo" id="myElement1">id</div>
<div class="demo" id="myElement2">id</div>
<div class="demo" id="myElement3">id</div>
<div class="demo" id="myElement4">id</div>
<div class="demo" id="myElement5">id</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
//通过id获取元素
alert(document.id('myElement'));
//获取html内容
alert(document.id('myElement1').get('html'));
//设置元素的html内容
document.id('myElement2').set('html','<div>我是新设置的标签</div>');
//获取文本内容
alert(document.id('myElement3').get('text'));
//设置元素的文本内容
document.id('myElement4').set('text','我是新设置的内容');
//获取元素标签名（小写）
alert(document.id('myElement5').get('tag'));
//end
});
</script>
</html>
我们与jq做出对比
| mootools | jq | 介绍 |
| document.id('myElement') | $('#myElement') | //通过id获取元素 |
| document.id('myElement1').get('html') | $('#myElement1').html() | //获取html内容 |
| document.id('myElement2').set('html','<div>我是新设置的标签</div>'); | $('#myElement2').html('<div>我是新设置的标签</div>'); | //设置元素的html内容 |
| document.id('myElement3').get('text') | $('#myElement3').text() | //获取文本内容 |
| document.id('myElement4').set('text','我是新设置的内容'); | $('#myElement4').text('我是新设置的内容'); | //设置元素的文本内容 |
| document.id('myElement5').get('tag') | $('#myElement5')[0].tagName | //获取元素标签名 |
我们发现，mootools对html和text的设置和获取是分开的，已经说过了，mootools对dom的支持和jq相差很多，对比jq大家也就能使用了！
---选择器
通过id获取，mootools还提供了另一种简单写法：
$('myElement').get('html') 等同于 document.id('myElement')
我们在开发中，肯定希望像选择css一样选择到元素，jq提供了强大的选择器处理，同时mootools也提供了类似方法：
| $$('#myElement').get('html') | $('#myElement').html() | //获取指定id元素 |
| $$(".eleclass").get('html') | $(".eleclass").html() | //获取指定类名元素 |
| $$(".eleclass2 #id1").get('html') | $(".eleclass2 #id1").html() | //获取指定类名下的指定id元素 |
| $$(".eleclass2 .cl1").get('html') | $(".eleclass2 .cl1").html() | //获取指定类名下的指定类名元素 |
| $$(".eleclass2 span").get('html') | $(".eleclass2 span").html() | //获取指定类名下的指定标签元素 |
当然，css的写法很多，我就简单列举，与jq的不用就是$$做开始！
---事件
我们的页面操作就是对象+事件+方法；选择器选择到了对象，我们紧接着做事件的绑定！
$$('#myElement').addEvent('click', function(){ |
$('#myElement').on('click', function(){ alert('clicked!'); }); |
绑定事件处理 |
| $('myElement').removeEvent('click', destroy); | $('#myElement').off('click', destroy); | 移除绑定事件 |
我们运行下面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
</style>
</head>
<body>
<div class="demo" id="myElement">id</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
$$('#myElement').addEvent('click', function(){
alert('clicked!');
});
//end
});
</script>
</html>
其实jq提供的绑定和删除有bind和unbind；on和off。
mootools多个事件的绑定api是：
myElement.addEvents(events);
myElements.removeEvents([events]);
$('myElement').addEvents(
{
mouseover: function(){ alert('mouseover'); },
click: function(){ alert('click'); }
}
);
多个放在花括号内，逗号分隔！
事件this
mootools添加事件，this作为指针指向添加事件的元素，与jq的$(this)区别
我们执行代码：
window.addEvent('domready', function() {
//start
//start
$$('#myElement').addEvent('click', function(){
alert(this.get('html'));
}); //end
//end
});
如果我们是动态添加的元素，还要绑定事件，需要delagate去处理
html结构：
<div class="demo" id="myElement">id</div> <div class="demo" id="box"></div>
点击id，下面的div插入span标签，给span添加事件处理；
| $$('#box').addEvent('click:relay(span)', function(){ alert(this.get('html')); }); //en |
$('#box').delegate('#children','click', function(){ alert(1); }); //end |
给动态添加的元素绑定事件，利用冒泡原理 |
对应的mootools代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.addcss{ border:#0F9 1px solid;}
</style>
</head>
<body>
<div class="demo" id="myElement">id</div>
<div class="demo" id="box"></div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
//start
$$('#myElement').addEvent('click', function(){
$$('#box').set('html','<span id="children">我是js添加的标签</span>');
});
$$('#box').addEvent('click:relay(span)', function(){
alert(this.get('html'));
}); //end
//end
});
</script>
</html>
对应的jq代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.addcss{ border:#0F9 1px solid;}
</style>
</head>
<body>
<div class="demo" id="myElement">id</div>
<div class="demo" id="box"></div>
</body>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
$('#myElement').on('click', function(){
$('#box').html('<span id="children">我是js添加的标签</span>');
});
$('#box').delegate('#children','click', function(){
alert(1);
}); //end
//end
});
</script>
</html>
不管是mootools还是jq都是先找到已有的dom元素，然后通过冒泡处理的，需要结构已有父元素、动态添加子元素、事件、方法四部分！
mootools是在事件后面 :relay(动态后代元素)
jq是delegate的第一个参数 选择动态后代元素
---事件对象event
| event.page.x | event.pageX | 获取触发事件对象相对页面水平位置 |
| event.page.y | event.pageY | 获取触发事件对象相对页面垂直位置 |
| event.target | event.target | 返回最小触发事件的元素 |
| event.code | event.which | 返回键盘事件的ascll编码 |
我们运行测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.demo p{ height:50px; width:50px; background:#06F;}
</style>
</head>
<body>
<div class="demo" id="myElement">
<p></p>
</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
$$('#myElement').addEvent('click', function(event){
alert(event.page.x);
alert(event.page.y);
alert(event.target.get("tag"))
});
window.addEvent('keydown', function(event){
alert(event.code)
});
//end
});
</script>
</html>
我们假设一种处理，父元素添加事件和处理函数，他的子元素也添加相同事件和不同的处理函数，我们知道点击子元素的同时点击了父元素，我们看看执行哪个处理函数：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.demo p{ height:50px; width:50px; background:#06F;}
</style>
</head>
<body>
<div class="demo" id="myElement">
<p></p>
</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
$$('#myElement').addEvent('click', function(event){
alert('父元素');
});
$$('#myElement p').addEvent('click', function(event){
alert('子元素');
});
//end
});
</script>
</html>
这样就出现问题了，点击子元素我们只希望执行子元素处理，mootools对冒泡都提供了处理，
| event.stopPropagation(); | event.stopPropagation(); | 阻止冒泡 |
| event.preventDefault(); | event.preventDefault(); | 阻止默认行为 |
我们加入阻止冒泡代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.demo p{ height:50px; width:50px; background:#06F;}
</style>
</head>
<body>
<div class="demo" id="myElement">
<p></p>
</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
$$('#myElement').addEvent('click', function(event){
alert('父元素');
});
$$('#myElement p').addEvent('click', function(event){
alert('子元素');
event.stopPropagation();
});
//end
});
</script>
</html>
点击子元素，只触发一次处理函数，不在冒泡到父元素查找处理！jq同
---css处理
我们先列举常规css处理：
| window.scrollTo(0, 500); | $(window).scrollTop(500) $(window).scrollLeft(500) |
设置元素滚动条到哪个位置，可以使window对象 |
this.getSize().x this.getSize().y |
$(this).outerWidth() $(this).outerHeight() |
获取元素包含maring、padding的值 |
window.getScroll().y window.getScroll().x |
$(window).scrollTop() $(window).scrollLeft() |
获取元素滚动条的位置，jq同设置方法 |
this.getPosition().x this.getPosition().y |
$(this).position().left $(this).position().top |
获取元素相对有定位属性的父容器元素的位置，没有相对body对象 |
我们测试mootools代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.addcss{ border:#0F9 1px solid;}
#demo2{ padding:50px; margin:50px;}
</style>
</head>
<body>
<div class="demo" id="myElement">scrollTop</div>
<div class="demo" id="demo2">getSize</div>
<div class="demo" id="demo3">getPosition</div>
<p style="height:2000px;"></p>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
//start
$$('#myElement').addEvent('click', function(){
window.scrollTo(0, 500);
});
$$('#demo2').addEvent('click', function(){
alert(this.getSize().x);
alert(this.getSize().y)
});
alert(window.getScroll().y)
$$('#demo3').addEvent('click', function(){
alert(this.getPosition().x);
alert(this.getPosition().y)
});
//end
});
</script>
</html>
jq的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.addcss{ border:#0F9 1px solid;}
#demo2{ padding:50px; margin:50px;}
</style>
</head>
<body>
<div class="demo" id="myElement">scrollTop</div>
<div class="demo" id="demo2">getSize</div>
<div class="demo" id="demo3">getPosition</div>
<p style="height:2000px;"></p>
</body>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
$('#myElement').on('click', function(){
$(window).scrollTop(500)
});
$('#demo2').on('click', function(){
alert($(this).outerWidth());
alert($(this).outerHeight())
});
alert($(window).scrollTop());
$('#demo3').on('click', function(){
alert($(this).position().left);
alert($(this).position().top)
});
//end
});
</script>
</html>
核心css处理：
| $$('#myElement1').setStyle('width', '300px'); | $('#myElement1').css('width', '300'); | 设置css值 |
| $$('#myElement2').getStyle('width') | $('#myElement2').css('width') | 获取css值 |
| $$('#myElement3').setStyles({ width: 300,height: 400}); | $('#myElement3').css({ width: 300,height: 400}); | 多个css值设置 |
| $$('#myElement4').getStyles('width', 'height') | $('#myElement4').css('width', 'height') | 多个css值获取 |
我们运行测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
</style>
</head>
<body>
<div class="demo" id="myElement1">id</div>
<div class="demo" id="myElement2">id</div>
<div class="demo" id="myElement3">id</div>
<div class="demo" id="myElement4">id</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
$$('#myElement1').addEvent('click', function(){
$$('#myElement1').setStyle('width', '300px');
});
$$('#myElement2').addEvent('click', function(){
alert($$('#myElement2').getStyle('width'));
});
$$('#myElement3').addEvent('click', function(){
$$('#myElement3').setStyles({ width: 300,height: 400});
});
$$('#myElement4').addEvent('click', function(){
alert($$('#myElement4').getStyles('width', 'height'));
});
//end
});
</script>
</html>
这种添加需要在js里面定义样式，jq提供了addClass的添加处理，mootools也是一样：
| $$('#myElement1').addClass('addcss'); | $('#myElement1').addClass('addcss'); | 添加类名追加css样式表的样式 |
| $$('#myElement1').removeClass('addcss'); | $('#myElement1').removeClass('addcss'); | 删除类名 |
我们的测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.addcss{ border:#0F9 1px solid;}
</style>
</head>
<body>
<div class="demo" id="myElement1">id</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
$$('#myElement1').addEvent('click', function(){
$$('#myElement1').addClass('addcss');
});
//end
});
</script>
</html>
---属性处理
| $$('#myElement').setProperty('del', '1'); | $('#myElement').attr('del', '1'); | 设置单个属性 |
| this.getProperty('del') | $(this).attr('del') | 返回单个属性 |
| $$('#myElement2').setProperties({'del':1,'tt':"a"}); | $('#myElement2').prop({'del':1,'tt':"a"}); | 多个属性设置 |
| this.getProperties('del','tt').tt | $(this).prop('tt') | 返回多个 |
我们测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.demo p{ height:50px; width:50px; background:#06F;}
</style>
</head>
<body>
<div class="demo" id="myElement">设置单个属性和获取</div>
<div class="demo" id="myElement2">设置多个属性和获取</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
$$('#myElement').setProperty('del', '1');
$$('#myElement').addEvent('click', function(event){
alert(this.getProperty('del'));
});
$$('#myElement2').setProperties({'del':1,'tt':"a"});
$$('#myElement2').addEvent('click', function(event){
alert(this.getProperties('del','tt').tt);
});
//end
});
</script>
</html>
除了设置和获取，还可以删除属性：
| $('myAnchor').removeProperty('onmousedown'); | $("img").removeAttr("src"); | 单个属性删除 |
| $('myAnchor').removeProperties('id', 'href', 'title'); | $("img").removeProp("src"); | 多个删除 |
不做演示处理了，大家自己对照设置就可以了！
---判断处理
| $$("#myElement").match("div") | $("#myElement").is("div") | 判断是不是is方法指定的内容，当前判定元素标签名是否为div，也可传入类名等判断 |
| $$("#myElement").hasClass("demo") | $("#myElement").hasClass("demo") | 判断当前元素的类名是否有指定内容 |
| $("myElement2").contains($("aa")) | $("#myElement").has(".aa") | 判断当前元素的子孙元素是否含有指定内容，jq返回含有指定内容的当前元素，参数可以使类名，标签名，id等 |
mootools测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.demo p{ height:50px; width:50px; background:#06F;}
</style>
</head>
<body>
<div class="demo" id="myElement">true</div>
<div class="demo" id="myElement2"><p id="aa">11</p></div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
alert($$("#myElement").match("div"));
alert($$("#myElement").hasClass("demo"));
//alert($$("#myElement")[0].contains($$(".aa")));
alert($("myElement2").contains($("aa")));
//end
});
</script>
</html>
jq测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.demo p{ height:50px; width:50px; background:#06F;}
</style>
</head>
<body>
<div class="demo" id="myElement">true</div>
<div class="demo" id="myElement2"><p class="aa">false</p></div>
</body>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
alert($("#myElement").is("div"));
alert($("#myElement").hasClass("demo"));
$("#myElement").has(".aa").click(function(){
alert("我有指定子元素，我可以添加事件")
});
$("#myElement2").has(".aa").click(function(){
alert("我有指定子元素，我可以添加事件")
});
//end
});
</script>
</html>
---节点关系
| $$(".a3").getParent() | $(".a3").parent() | 返回父节点 |
| $$(".a3").getChildren() | $(".a3").children() | 获取子节点 |
| $$(".a3").getFirst() | $(".a3").children().first() | 返回第一个子元素 |
| $$(".a3").getLast() | $(".a3").children().last() | 返回最后一个子元素 |
| $$(".a3").getPrevious() | $(".a3").prev() | 获取上一个节点 |
| $$(".a3").getNext() | $(".a3").next() | 获取下一个节点 |
| ---------- | $(".demo").find(".a4") | 查找指定子孙节点 |
| ---------- | $(".a3").children().first().closest(".demo") | 返回指定祖先元素 |
| $$(".a3").getAllPrevious() | $(".a3").prevAll( | 返回上面所有节点 |
| ---------- | $(".a3").nextAll() | 返回下面所有节点 |
| ---------- | $(".a3").siblings() | 获取所有兄弟元素 |
| ---------- | $(".a3").children().eq(2) | 获取指定索引位置的元素 |
| ---------- | $(".a3").index() | 获取元素的索引值，相对兄弟元素 |
motools没有链式处理，对元素的选择能力比较差！
motools的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
</style>
</head>
<body>
<div class="demo">
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">
<span>3-1</span>
<span>3-2</span>
<span>3-3</span>
</div>
<div class="a4">4</div>
<div class="a5">5</div>
</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
alert($$(".a3").getPrevious().get('html'));
alert($$(".a3").getAllPrevious().length);
alert($$(".a3").getNext().get('html'));
alert($$(".a3").getAllNext().length);
alert($$(".a3").getParent().get('tag'));
alert($$(".a3").getSiblings().length);
alert($$(".a3").getChildren().length);
alert($$(".a3").getFirst().get('html'));
alert($$(".a3").getLast().get('html'));
//end
});
</script>
</html>
jq代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
</style>
</head>
<body>
<div class="demo">
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">
<span>3-1</span>
<span>3-2</span>
<span>3-3</span>
</div>
<div class="a4">4</div>
<div class="a5">5</div>
</div>
</body>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
alert("返回父节点的类名"+$(".a3").parent().attr('class'));
alert("获取子节点长度"+$(".a3").children().length);
alert("返回第一个子元素内容"+$(".a3").children().first().html());
alert("返回最后一个子元素内容"+$(".a3").children().last().html());
alert("获取上一个节点内容"+$(".a3").prev().html());
alert("获取下一个节点内容"+$(".a3").next().html());
alert("查找指定节点"+$(".demo").find(".a4").html());
alert("返回指定祖先元素"+$(".a3").children().first().closest(".demo")[0].tagName);
alert("返回上面所有节点长度"+$(".a3").prevAll().length);
alert("返回下面所有节点长度"+$(".a3").nextAll().length);
alert("获取所有兄弟元素"+$(".a3").siblings().length);
alert("获取指定索引位置的元素"+$(".a3").children().eq(2).html());
alert("获取元素的索引值，在兄弟元素中位于"+$(".a3").index());
//end
});
</script>
</html>
---节点处理
同jq一样，大家参考对应的手册就好了，我就不再列举了！
同样，mootools通过FX添加动画处理，也提供对cookie、json、flash的支持！！！
3.简单实例
tab切换处理：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools</title>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
/*code*/
.demo{ width:100px; height:100px; background:#F93; margin:20px;}
.tab1{height:400px; width:400px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px; }
</style>
</head>
<body>
<div class="tab1">
<div class="tabnav">
<span class="fou">111</span>
<span>222</span>
<span>333</span>
</div>
<div class="tabbox">
<div>111111</div>
<div style="display:none;">22222222222</div>
<div style="display:none;">33333333</div>
</div>
</div>
</body>
<script src="mootools.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//start
var tab=$$(".tab1 .tabnav span");
var tabbox=$$(".tab1 .tabbox div");
for(var i=0;i<tab.length;i++){
tab[i].addEvent('click',function(){
for(var i=0;i<tab.length;i++){
if(tab[i]==this){
tab[i].addClass("fou");
tabbox[i].setStyle('display','block');
}else{
tab[i].removeClass("fou");
tabbox[i].setStyle('display','none');
};
};
});
};
//end
});
</script>
</html>
mootools对dom的支持并不是很好，效果的实现相对jq很麻烦！
4.其他
上面的api介绍都是对dom的api处理，mootools不擅长的部分，和jq相比！
mootools对类型的处理还有其他动能都是非常优秀的，大家对照在线手册，详细阅读：
Types（各种数据类型的处理，遍历，迭代，转化等）
Utilities（cookie、json、flash、准备事件在页面开发中的介绍）
下一篇去学习mootools优势部分的api功能！！！