MooTools教程

当前位置:首页>Mootools>MooTools教程>mootools框架教程(1) -Element完全解析及高级应用

mootools框架教程(1) -Element完全解析及高级应用

时间:2015-07-13 14:28来源:网络整理 作者:KKWL 点击:
导言:mootools框架教程(1) -Element篇:方法完全解析。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候

 

  • 导言:mootools框架教程(1) -Element篇:方法完全解析。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

    --内容:封装一些常用的DOM操作

    (1).直接可以在xhtml中进行操作元素.而不用嵌套在<script>标签中使用javascript操作.

    (2).用$代替javascript中document.getElmentById方法.操作元素只需要使用$('myElement')即可.

    (3).增加了很多方便实用的方法,这些方法使对元素的各种复杂的操作变得容易,摈弃(应该是封装)了原来繁琐的DOM操作.以appendText为例:

    方法:appendText

    作用:向元素添加文本节点

    例子:

    div>hello </div>
    $('myDiv1').appendText('world');
    //结果为:
    <div>hello world</div>

    Ajax开发中,做的最多的就是对DOM的操作,增删节点,设置样式等等等等,如果按照常规的javascript开发的话,工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花

    比较大的功夫,对我们使用频率最频繁的作用操作进行封装(其中包括修正各个浏览器之间的方法差异问题)。mootools提供了一套非常出色的解决方案,并且更OO。

    创建DOM节点

    例子:
    var myInput=new Element('input');

    1.方法:$

    作用:按照id取元素,如同document.getElmentById来获取的元素

    即: 这里的$相当于document.getElmentById,两者功能是相同的.

    例子:

    //获取元素
    var myDiv=$("myDiv");
    //将用getElementById获取的元素进行扩展成使用$方法获取的元素
    //这样可以具备一些特殊的方法
    var mydiv_noextend=document.getElementById("mydiv");
    var mydiv_extended = $(mydiv_noextend);

    2.方法:$$

    作用:通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的

    支持)

    例子:

    $$('a'); //获取页面上所有超链接<a>标签对象
    $$('a','b'); //获取页面上所有超链接<a>标签和粗体<b>标签
    $$('#my_div'); //获取id为my_div的元素
    $$('#my_div a.myClass'); //获取id为my_div的元素子元素,并且这些
    自元素是的所有class="myClass"的<a>标签

    ----------------------------------------Element扩展方法------------------------------------

    3.方法:inject

    作用:可以用来把当前元素插入到指定元素之前(before),之中(inside),之后

    (after)。

    例子:

    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    $('myDiv3').inject($('myDiv1'),'before'); //把myDiv3插入到myDiv1之前
    //结果:
    <div>ccc</div>
    <div>bbb</div>
    <div>aaa</div>

    4.方法:injectBefore

    作用:可以用来把当前元素插入到指定元素之前(即相当于参数为'before'的

    inject方法)

    例子:

    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    $('myDiv3').injectBefore($('myDiv1'));

    5.方法:injectAfter

    作用:可以用来把当前元素插入到指定元素之后(即相当于参数为'after'的inject

    方法)

    例子:

    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    $('myDiv3').injectAfter($('myDiv1'));

    6.方法:injectInside

    作用:可以用来把当前元素插入到指定元素之中(即相当于参数为'inside'的

    inject方法)

    例子:

    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    $('myDiv3').injectInside($('myDiv1'));

    7.方法:adopt

    作用:可以在当前元素中插入指定元素(元素嵌套)

    (参数可以是元素id,元素引用,html元素tag名)

    例子:

    $('myDiv').adopt($('myDiv1'));
     $('myDiv').adopt('myDiv1');
     $('myDiv').adopt('button');

    8.方法:remove

    作用:删除元素

    例子:
    $('myDiv').remove();

    9.方法:clone

    参数列表:

    contents:是否连带节点的内容进行复制(deepclone),如果不指定,则连带。

    作用:复制元素

    例子:

    $('myDiv').clone();

    $('myDiv').clone(false);//只复制myDiv本身,不复制其content和子s

    10.方法:replaceWith

    作用:用其他元素替换当前元素

    例子:

    <div>abc</div>
    var a = new Element('button');
    a.value = 'test';
    $('myDiv1').replaceWith($(a));

    11.方法:appendText

    作用:向元素添加文本节点

    例子:

    <div>hello </div>
    $('myDiv1').appendText('world');
    //结果:
    <div>hello world</div>

    12.方法:hasClass

    作用:判断元素的class属性中是否包含指定的样式名

    例子:

    <div>hello </div>
    var x = $('myDiv1').hasClass('clazz_1'); //true

    13.方法:addClass

    作用:向指定元素上添加样式class

    例子:
    $('myDiv1').addClass('clazz_1');

    14.方法:removeClass

    作用:在指定元素上删除指定的样式class

    例子:
    $('myDiv1').removeClass('clazz_1');

    15.方法:toggleClass

    作用:在addClass和removeClass的功能之间切换

    例子:

    <div></div>
    $('myElement').toggleClass('myClass');
    //结果为:
    <div></div>
    //再次:
    $('myElement').toggleClass('myClass');
    //结果为:
    <div></div>

    16.方法:setStyle

    作用:向元素设置一个style属性

    例子:
    $('myDiv').setStyle('width','100px');

    17.方法:setStyles

    作业:向元素设置多个style属性

    例子:

    $('myDiv').setStyles({    border: '1px solid #000',    width: '300px',    height: '400px'});或者(不推荐在这种方式下设置opacity属性):

    $('myDiv').setStyles('border:1px solid #000; width: 300px; ');

    18.方法:setOpacity

    作用:设置元素的透明度

    例子:
    $('myDiv').setOpacity(0.5); //透明度设置为50%

    19.方法:getStyle

    作用:获取style中指定属性的值

    例子:
    var w=$('myDiv').getStyle('width');

    20.方法:addEvent

    作用:为元素增加事件监听器

    例子:

    $('myDiv').addEvent('click',function(){
       alert('haha,clicked!');
    });

    说明:1.这里把定义事件与添加事件结合起来写是可以的,可以提高书写效率.建议初学者先定义事件,然后再添加事件到元素中.方法见22:removeEvent

    2.结合写的顺序是:$('..').addEvent('触发方式',function(e){行为});

    3.事件的行为可为空,本例行为为:单击弹出框

    21.方法:addEvents

    作用:为元素增加多个事件监听器

    例子:

    $('myBtn').addEvents({
      'click':function(e){alert('clicked!!!');},
      'mouseout':function(e){alert('mouseouted!!!');}
     });

    注意:每一个事件都需要使用大括号括起来.相当于事件数组.

    22.方法:removeEvent

    作用:从元素上删除指定的监听器方法

    例子:

    //先定义两个事件, 同时给事件定义行为.
    var fa = function(e){alert('aaaaaaaaaaaaaa');};
    var fb = function(e){alert('bbbbbbbbbbbbbb');};
    //添加事件. 触发方式为单击(click).
    $('myBtn').addEvent('click',fa);
    $('myBtn').addEvent('click',fb);
    //删除事件, 名为 fa, 触发方式为 单击
    //(因为一个事件可能有多个触发行为)
    $('myBtn').removeEvent('click',fa);

    23.方法:removeEvents

    作用:从元素上删除指定事件的监听器,如果不指定事件,则将删除所有事件的

    监听器

    例子:

    var fa = function(e){alert('aaaaaaaaaaaaaa');};
    var fb = function(e){alert('bbbbbbbbbbbbbb');};
    $('myBtn').addEvent('click',fa);
    $('myBtn').addEvent('click',fb);
    $('myBtn').removeEvents('click');

    24.方法:fireEvent

    作用:触发元素的指定事件上的所有监听器方法

    例子:

    var fa = function(e){alert('aaaaaaaaaaaaaa');};
    var fb = function(e){alert('bbbbbbbbbbbbbb');};
    $('myBtn').addEvent('click',fa);
    $('myBtn').addEvent('click',fb);
    $('myBtn').fireEvent('click'); //fa和fb将立即被执行

    25.方法:getFirst

    作用:获取当前元素的第一个子元素节点

    例子:

    <div>   <div>first</div>   <div>second</div>   <div>last</div></div>var f = $('myDiv').getFirst();alert(f.id);    //alert "first"26.

    方法:getLast

    作用:获取当前元素的最后一个子元素节点

    例子:

    <div>   <div>first</div>   <div>second</div>   <div>last</div></div>var l = $('myDiv').getLast();alert(l.id);  //alert "last"27.方法

    :getParent

    作用:获取当前元素的父元素节点

    例子:

    <div>   <div>first</div>   <div>second</div>   <div>last</div></div>var par = $('first').getParent();alert(par.id);   //alert

    "myDiv"28.方法:getChildren

    作用:获取当前元素所有子元素节点

    例子:

    <div>   <div>first</div>   <div>second</div>   <div>last</div></div>var cs = $('myDiv').getChildren();alert(cs.length);  //alert 329.

    方法:setProperty

    作用:设置元素的属性

    例子:
    $('myImage').setProperty('src','whatever.gif');

    30.方法:setProperties

    作用:设置元素的多个属性

    例子:

    $('myElement').setProperties({
     src:'whatever.gif',
     alt: 'whateverdude'
    });

    31.方法:setHTML

    作用:相当于设置元素的innerHTML

    例子:
    $('myElement').setHTML(newHTML);

    32.方法:getProperty

    作用:获取元素的指定属性

    例子:
    $('myImage').getProperty('src')

    33.方法:getTag

    作用:获取HTML标签元素的标签名称

    例子:

    <img src="xx.gif" />
    $('myImage').getTag(); //img

    34.方法:scrollTo

    作用:相当于把滚动条滚动到指定的状态(窗口或元素在overflow的情况下)

    例子:
    window.scrollTo(0,200);

    35.方法:getValue

    作用:获取tag为textarea,select或input这三个元素的value属性值。但select多选状态下取值不支持。

    例子:

    <input type="text" value="abcd"/>
    var v = $('myInput').getValue();
    alert(v); //alert "abcd"

    36.方法:getSize

    作用:获取元素对象当前的size/scoll值

    例子:

    返回值格式如下:

    {
     'scroll':{'x':100, 'y':100},
     'size': {'x':200, 'y':400},
     'scrollSize':{'x':300, 'y':500}
    }
    $('myElement').getSize();

     

    37.方法:getPosition

    作用:获取元素的offset位置

    例子:

    返回值格式:

    {x:100,y:500}
    $('element').getPosition();

    38.方法:getTop

    作用:相当与getPosition返回的y值

    例子:
    $('element').getTop();

    39.方法:getLeft

    作用:相当与getPosition返回的x值

    例子:
    $('element').getLeft();

    40.方法:getCoordinates

    作用:获取元素的当前width,height,left,right,top,bottom值

    例子:

    返回值格式:

    {
     width:200,
     height:300,
     left:100,
     top:50,
     right:300,
     bottom:350
    }
    varmyValues=$('myElement').getCoordinates();

    补充说明:

    mootools提供了一个“垃圾收集器”Garbage。

    一般情况下,使用$方法获取到的对象都会被这个“垃圾收集器”登记下来,然后在窗体关闭(unload)的时候,销毁这些登记过的对象。也可以调用Garbage.collect方法来登记,然后在你必要的时候调

    用Garbage.trash方法来销毁。

     

    • 导言:mootools框架教程(1) -Element篇:高级应用举例。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

      前台:

      <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
      <!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 runat="server">
        <title>mootools [一]--Element篇高级应用举例</title>
         <script type="text/javascript" language="javascript" src="mootools-1.2-core-jm.js"></script>
        <script type="text/javascript">
        //为页添加操作事件-domready.
         window.addEvent("domready",function(){
        //为 btnSent 添加 单击事件 .
        $('btnSent').addEvent('click',function(){
          if($('txtContent').innerText==''){
            alert('发送内容不能空!');
            return;
          }
          //Default2.aspx虚构一个页面, 其实是将数据暂存, 然后提取并显示在 messageBox中.
          var url='Default2.aspx';
          var postData=$("postMessage").toQueryString();
          new Ajax(url,{method:'post',onComplete:function(){
            $('messageBox').innerHTML += this.response.text;
            //这里的 innerHTML 方法可以用 setHTML 代替, 因为 innerHTML 是DOM操作中用到的, setHTML是mootools框架中新定义的.
            }
          }).request(postData);
        });
         });
      </script>
      </head>
      <body>
         <div>
          <div>
            <div></div>
            <hr />
            <form method="post" runat="server">
            <div>
              <ul>
                <li>请输入您的网名:&nbsp;&nbsp;&nbsp;&nbsp;<input runat="server" value="填写网名"/>
                </li>
              </ul>
              <ul>
                <li>请输入要发送的内容:<textarea runat="server" cols="20" rows="4"></textarea></li>
              </ul>
              <ul>
                <li><input type="button" runat="server" value="发送" onserverclick="btnSent_ServerClick" /></li>
              </ul>
            </div>
            </form>
          </div>
        </div>
      </body>
      </html>
      后台:
      using System;
      using System.Data;
      using System.Configuration;
      using System.Web;
      using System.Web.Security;
      using System.Web.UI;
      using System.Web.UI.WebControls;
      using System.Web.UI.WebControls.WebParts;
      using System.Web.UI.HtmlControls;
      public partial class _Default : System.Web.UI.Page
      {
        protected void Page_Load(object sender, EventArgs e)
        {
          if (IsPostBack)
          {
            if (!String.IsNullOrEmpty(txtName.Value) && !String.IsNullOrEmpty(txtContent.Value.Trim()))
            {
              string name = txtName.Value.Trim();
              string content = txtContent.Value.Trim();
              string msg = "<div><ul><li>" + name + "说:" + content + "</li></ul></div>";
              Response.Clear();
              Response.Write(msg);
              Response.End();
            }
            else if (!String.IsNullOrEmpty(txtContent.Value.Trim()) && String.IsNullOrEmpty(txtName.Value))
            {
              string name = "游客";
              string content = txtContent.Value.Trim();
              string msg = "<div><ul><li>" + name + "说:" + content + "</li></ul></div>";
              Response.Clear();
              Response.Write(msg);
              Response.End();
            }
          }
        }
      }

------分隔线----------------------------