博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
JS三教九流系列-Mootools.js-另一款非常优秀的js类库（一）
阅读量：5904 次
发布时间：2019-06-19

本文共 16310 字，大约阅读时间需要 54 分钟。

  hot3.png

相比于jq，mootools很多人是没有听说过得，他的api和对dom的操作没有jq的好，不容易上手。

设计也不如jq复杂，jq我们在使用时很容易上手，不得不承认，在容易上手的背后有着很复杂的原理，大神们都说过，能分析jq源码，几乎再去分析其他类库源码都没有压力了！

mootools其实也是非常优秀的js类库，对象的操作有着非常大的优势。我们开始学习和使用moootools开发项目！

mootools类库下载地址：

mootools中文api地址：   

一、了解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掌握

    
     
      mootools
      
       *{ padding:0; margin:0}html,body{ height: 100%; width: 100%;}/*code*/.demo{ width:100px; height:100px; background:#F93; margin:20px;}
       
        id
        
         id
         
          id
          
           id
           
            id
            
             id
             
              
               window.addEvent('domready', function() {//start //通过id获取元素    alert(document.id('myElement')); //获取html内容 alert(document.id('myElement1').get('html')); //设置元素的html内容 document.id('myElement2').set('html','
               
                我是新设置的标签
               
'); //获取文本内容 alert(document.id('myElement3').get('text')); //设置元素的文本内容 document.id('myElement4').set('text','我是新设置的内容'); //获取元素标签名（小写） alert(document.id('myElement5').get('tag'));  //end }); 

我们与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); 移除绑定事件

 我们运行下面代码：

    
     
      mootools
      
       *{ padding:0; margin:0}html,body{ height: 100%; width: 100%;}/*code*/.demo{ width:100px; height:100px; background:#F93; margin:20px;}
       
        id
        
         
          window.addEvent('domready', function() {//start $$('#myElement').addEvent('click', function(){  alert('clicked!'); }); //end }); 

其实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结构：

    
     id

点击id，下面的div插入span标签，给span添加事件处理；

$$('#box').addEvent('click:relay(span)', function(){ 
  alert(this.get('html'));
 }); //en		 $('#box').delegate('#children','click', function(){ 
  alert(1);
 }); //end		 给动态添加的元素绑定事件，利用冒泡原理

 对应的mootools代码：

 
    
     
      mootools
      
       *{ 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;}
       
        id
        
         
          
           window.addEvent('domready', function() {//start //start   $$('#myElement').addEvent('click', function(){    $$('#box').set('html','
           
            我是js添加的标签'); });  $$('#box').addEvent('click:relay(span)', function(){    alert(this.get('html'));  }); //end    //end }); 

对应的jq代码：

    
     
      jquery
      
       *{ 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;}
       
        id
        
         
          
           $(function(){//start $('#myElement').on('click', function(){    $('#box').html('
           
            我是js添加的标签'); });  $('#box').delegate('#children','click', function(){    alert(1);  }); //end //end});

不管是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编码

我们运行测试代码：

    
     
      mootools
      
       *{ 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;}
       
         
        
        
         
          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 }); 

我们假设一种处理，父元素添加事件和处理函数，他的子元素也添加相同事件和不同的处理函数，我们知道点击子元素的同时点击了父元素，我们看看执行哪个处理函数：

    
     
      mootools
      
       *{ 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;}
       
         
        
        
         
          window.addEvent('domready', function() {//start $$('#myElement').addEvent('click', function(event){    alert('父元素');   });   $$('#myElement p').addEvent('click', function(event){    alert('子元素');   });   //end }); 

这样就出现问题了，点击子元素我们只希望执行子元素处理，mootools对冒泡都提供了处理，

event.stopPropagation(); event.stopPropagation(); 阻止冒泡
event.preventDefault(); event.preventDefault(); 阻止默认行为

我们加入阻止冒泡代码：

    
     
      mootools
      
       *{ 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;}
       
         
        
        
         
          window.addEvent('domready', function() {//start $$('#myElement').addEvent('click', function(event){    alert('父元素');   });   $$('#myElement p').addEvent('click', function(event){    alert('子元素');  event.stopPropagation();    });   //end }); 

点击子元素，只触发一次处理函数，不在冒泡到父元素查找处理！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代码：

    
     
      mootools
      
       *{ 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;}
       
        scrollTop
        
         getSize
         
          getPosition
          
           
           
            
             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 }); 

jq的代码：

    
     
      jquery
      
       *{ 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;}
       
        scrollTop
        
         getSize
         
          getPosition
          
           
           
            
             $(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});

 

核心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值获取

我们运行测试代码：

    
     
      mootools
      
       *{ padding:0; margin:0}html,body{ height: 100%; width: 100%;}/*code*/.demo{ width:100px; height:100px; background:#F93; margin:20px;}
       
        id
        
         id
         
          id
          
           id
           
            
             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 }); 

这种添加需要在js里面定义样式，jq提供了addClass的添加处理，mootools也是一样：

$$('#myElement1').addClass('addcss'); $('#myElement1').addClass('addcss'); 添加类名追加css样式表的样式
$$('#myElement1').removeClass('addcss'); $('#myElement1').removeClass('addcss'); 删除类名

我们的测试代码：

    
     
      mootools
      
       *{ 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;}
       
        id
        
         
          window.addEvent('domready', function() {//start $$('#myElement1').addEvent('click', function(){  $$('#myElement1').addClass('addcss');  });   //end }); 

---属性处理

$$('#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') 返回多个

 我们测试代码：

    
     
      mootools
      
       *{ 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;}
       
        设置单个属性和获取
        
         设置多个属性和获取
         
          
           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 }); 

除了设置和获取，还可以删除属性：

$('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测试代码：

    
     
      mootools
      
       *{ 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;}
       
        true
        
         
          11
          
          
           
            window.addEvent('domready', function() {//start alert($$("#myElement").match("div")); alert($$("#myElement").hasClass("demo")); //alert($$("#myElement")[0].contains($$(".aa"))); alert($("myElement2").contains($("aa")));  //end }); 

 jq测试代码：

    
     
      jquery
      
       *{ 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;}
       
        true
        
         
          false
          
          
           
            $(function(){//start alert($("#myElement").is("div")); alert($("#myElement").hasClass("demo")); $("#myElement").has(".aa").click(function(){  alert("我有指定子元素，我可以添加事件") }); $("#myElement2").has(".aa").click(function(){  alert("我有指定子元素，我可以添加事件") }); //end});

---节点关系

$$(".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的代码：

    
     
      mootools
      
       *{ padding:0; margin:0}html,body{ height: 100%; width: 100%;}/*code*/.demo{ width:100px; height:100px; background:#F93; margin:20px;}
       
         
        
         1    
         
          2    
          
                
           3-1        
           3-2        
           3-3        
           
            4    
            
             5
             
              
               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 }); 

jq代码：

    
     
      jquery
      
       *{ padding:0; margin:0}html,body{ height: 100%; width: 100%;}/*code*/.demo{ width:100px; height:100px; background:#F93; margin:20px;}
       
         
        
         1    
         
          2    
          
                
           3-1        
           3-2        
           3-3        
           
            4    
            
             5
             
              
               $(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});

---节点处理

同jq一样，大家参考对应的手册就好了，我就不再列举了！

同样，mootools通过FX添加动画处理，也提供对cookie、json、flash的支持！！！

3.简单实例

tab切换处理：

    
     
      mootools
      
       *{ 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; }
       
            
        
                 
         
          111        
          222        
          333        
          
                   
           
            111111
           
        
           
            22222222222        
            
             33333333     
             
              
               window.addEvent('domready', function() {//start var tab=$$(".tab1 .tabnav span"); var tabbox=$$(".tab1 .tabbox div"); for(var i=0;i

mootools对dom的支持并不是很好，效果的实现相对jq很麻烦！

4.其他

上面的api介绍都是对dom的api处理，mootools不擅长的部分，和jq相比！

mootools对类型的处理还有其他动能都是非常优秀的，大家对照在线手册，详细阅读：

Types（各种数据类型的处理，遍历，迭代，转化等）

Utilities（cookie、json、flash、准备事件在页面开发中的介绍）

 

下一篇去学习mootools优势部分的api功能！！！

转载于:https://my.oschina.net/tbd/blog/496485

你可能感兴趣的文章
字符串最长回文子串
查看>>
Proxmox VE 安装、配置、使用之第七章 简单HA
查看>>
java.lang.ClassNotFoundException: org.springframework.web.util.IntrospectorCleanupListener
查看>>
Java实现最简单的在线打开保存Excel文件
查看>>
使用命令提示符（cmd）查找电脑中隐藏的“黑手
查看>>
我笔下的“名著”
查看>>
20181216文件查找
查看>>
rsync+inotify实现数据实时同步
查看>>
JavaScript eval() 函数
查看>>
可行性研究报告
查看>>
linux如何安装redhat as5 oracle10g 安装文档
查看>>
自动配置php、mysql、nginx的脚本
查看>>
配置Linux系统盘为软件更新源[超简单呢！]
查看>>
org.tinygroup.config-统一应用配置
查看>>
高性能的MySQL（5）索引策略-覆盖索引与索引排序
查看>>
MongoDB实战（3）固定集合与GridFS
查看>>
4.5-全栈Java笔记:垃圾回收机制
查看>>
10.7-全栈Java笔记:常见流详解（五）
查看>>
为什么公司用weblogic而不用tomcat
查看>>
（一） Web语言：开始了解HTML
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-12-27 03:31:57   当前IP: 18.191.192.250   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我