JS三教九流系列-Mootools.js-另外一款很是優秀的js類庫（一）

時間  2019-11-08
標籤 三教九流 系列 mootools.js mootools 另外 一款 很是 優秀 欄目 JavaScript 简体版
原文   原文鏈接

相比於jq，mootools不少人是沒有據說過得，他的api和對dom的操做沒有jq的好，不容易上手。javascript

設計也不如jq複雜，jq咱們在使用時很容易上手，不得不認可，在容易上手的背後有着很複雜的原理，大神們都說過，能分析jq源碼，幾乎再去分析其餘類庫源碼都沒有壓力了！css

mootools其實也是很是優秀的js類庫，對象的操做有着很是大的優點。咱們開始學習和使用moootools開發項目！html

mootools類庫下載地址：http://apps.bdimg.com/libs/mootools/1.4.5/mootools-yui-compressed.jsjava

mootools中文api地址：  http://www.chinamootools.com/core.html jquery

1、瞭解mootools apijson

咱們會將moootools的api與jq進行對比api

1.類庫運行代碼的外部環境cookie

mootools jq

window.addEvent('domready', function() {app

    alert(1);//代碼位置dom

});

$(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(){
  alert('clicked!');
 });

 $('#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功能！！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程