温故:

　　透过对上一节课的学习,相信大家对mt的选择器应该有了一定的认识了,我再放几个小示例让大家对选择器的复杂应用有所了解:

<!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">
<script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
</head>

<body id='a'>
    <h2 class='a'>Single images</h2>
    <p>
    <a class='b' title="T1" href="http://www.digitalia.be/images/25.jpg"><img src="img/map1.png"></a>
    <a class='c' title="B1" href="http://www.digitalia.be/images/24.jpg"><img src="img/map2.png"></a>
    <a class='d' href="#"><img src="img/map2.png"></a>
    </p>
<script type='text/javascript'>
    alert($$('*').get('html'));//显示当前文件的html源码
    alert($$('.b','.c').get('title'));//同时选择多个节点
    alert($$('a[title=B1]').get('href'));//title='B1'的a节点
    alert($$('[href^=http]').get('href'));//href以http开头的节点
    alert($$('p > a').get('href'));//p下的a节点
    alert($$('a:not(.c)').get('href'));//class不等于c的a节点
    alert($$('a:index(0)').get('href'));//索引是0的a节点
    alert($$("a[title][href$=jpg]").get('href'));//包含title属性,且href属性以jpg三个字母结尾的a节点
</script>
</body>
</html>

好了,我们今天的课程是函数,在今天的课程中我会把mt常常用到的一些函数讲解给大家:

set,setProperty:用来赋值,看例子:

$('a').set('value','123');
$('a').setProperty('class','abc');

get,getProperty:用来取值,看例子:

$('a').get('value');
$('a').getProperty('class');

hasClass,addClass,removeClass,toggleClass://判断是否有某样式,新增样式,移除样式,交换样式,看例子

alert($('a').hasClass('abc'));
$('a').addClass('abc');
$('a').removeClass('abc');
$('a').toggleClass:('bc');

setStyle,getStyle://设置或获取css样式,看例子

$('a').setStyle('display','none');
alert($('a').getStyle('display'));

getSize://得到宽度和高度,看例子

var size=$('a').getSize();
alert(size.x+'|'+size.y);

getPosition,setPosition://返回或设置偏移值,看例子

$('a').getPosition();//returns{x:100,y:500};
$('a').setPosition({x:10,y:100});

destroy://删除元素自身及所有子节点,然后内存清理

$('div').destroy();

store,retrieve://向元素存储区存放或读取值(与jq的data类似)

$('a').store('someProperty',someValue);
$('a').retrieve('someProperty');//returns someValue

inject://向元素指定位置插入

 _cut:function(el){//把Element剪切并粘贴到el内部所有内容之前,父子
        return this.inject($(el),'top');//$('t1')._cut($('t3'));
    },
    cut_:function(el){//把Element剪切并粘贴到el内部所有内容之后,父子
        return this.inject($(el));//$('t1').cut_($('t3'));
    },
    _move:function(el){//把el平移到Element之前,兄弟
        return el.inject(this,'before');//$('t1')._move($('t3'));
    },
    move_:function(el){//把el平移到Element之后,兄弟
        return el.inject(this,'after');//$('t1')._move($('t3'));
    },
    _xmove:function(el){//把Element平移到el之前,兄弟
        return this.inject($(el),'before');//$('t1')._xmove($('t3'));
    },
    xmove_:function(el){//把Element平移到el之后,兄弟
        return this.inject($(el),'after');//$('t1').xmove_($('t3'));
    },

adopt://向元素内部插入子元素

示例:
    var myFirstElement =new Element('div#first');
    var mySecondElement=new Element('p#second');
    var myThirdElement =new Element('ul#third');
    var myFourthElement=new Element('a#fourth');
    var myParentElement=new Element('div#parent');
    myFirstElement.adopt(mySecondElement);
    mySecondElement.adopt('third',myFourthElement);
    myThirdElement.adopt([myFirstElement,new Element('span#another')]);

    结果:
    <div id="parent">
        <p id="second">
            <ul id="third"></ul>
            <a id="fourth"></a>
        </p>
        <span id="another"></span>
    </div>

typeOf://返回类型
    返回的类型:
    'element' - (string) 单个节点
    'elements' - (string) 多个节点
    'textnode' - (string) 文本节点
    'whitespace' - (string) If object is a DOM whitespace node.
    'arguments' - (string) If object is an arguments object.
    'array' - (string) If object is an array.
    'object' - (string) If object is an object.
    'string' - (string) If object is a string.
    'number' - (string) If object is a number.
    'date' - (string) If object is a date.
    'boolean' - (string) If object is a boolean.
    'function' - (string) If object is a function.
    'regexp' - (string) If object is a regular expression.
    'class' - (string) If object is a Class (created with new Class or the extend of another class).
    'collection' - (string) If object is a native HTML elements collection,such as childNodes or getElementsByTagName.
    'window' - (string) If object is the window object.
    'document' - (string) If object is the document object.
    'domevent' - (string) If object is an event.
    'null' - (string) If object is undefined,null,NaN or none of the above.

    示例:
    var myString='hello';
    alert(typeOf(myString));

attempt://类似try

    Function.attempt(
        function(){
            alert('a');
        },
        function(){
            alert('b');
        },
        function(){
            alert('c');
        }
    );

delay://延时执行

    function LoadCook(){
        clearTimeout(timer);
        alert('a');
    }var timer=LoadCook.delay(2000);

trim://去除两端空格

    alert(' 啊 '.trim());

toInt,toFloat://转为整数,转为小数

    '4em'.toInt();//returns 4
    '10px'.toInt();//returns 10
    '95.25%'.toFloat();//returns 95.25
    '10.848'.toFloat();//returns 10.848

toLowerCase,toUpperCase://转为小写,转为大写

    'AFD'.toLowerCase();
    'ffdsa'.toUpperCase();

延伸:
　　我上边所讲解的这些函数都是我们在日常开发中最常常用到的一些,当然了mt还有很多函数,大家如果感兴趣可以看一下那个我在第一课时为大家提供下载的素材文件,里边同时列出了其他一些不常用的函数.

一周学会Mootools 1.4中文教程:(2)函数的更多相关文章

  1. 一周学会Mootools 1.4中文教程:(7)汇总收尾

    转眼之间已经第七课了,这也将成为最后一课,如果这7课下来您感觉水平没有达到预想的水平,没关系您可以继续关注本站的博文,我会陆续发一些类似的文章帮您提升水平,另外我最近打算和群里的几个Mootools爱 ...

  2. 一周学会Mootools 1.4中文教程:序论

    刚才发了几篇Mootools(以后直接简称Moo或Mt,看到这两个名字的时候不要感到奇怪),有一位热心的朋友"追杀"告诉我说现在已经出到1.4了,就不要再纠结于1.2了,想象一下有 ...

  3. 一周学会Mootools 1.4中文教程:(1)Dom选择器

    利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...

  4. 一周学会Mootools 1.4中文教程:(6)动画

    先看一下动画的参数设置: 参数: fps - (number:默认是50) 每秒的帧数. unit - (string:默认是 false) 单位,可为 'px','em',或 '%'. link - ...

  5. 一周学会Mootools 1.4中文教程:(5)Ajax

    ajax在我们前台的开发中是非常重要的,所以我们单独拿出一节课来讲述,首先我们看一下mootools的ajax构成 语法: var myRequest=new Request([参数]); 参数: u ...

  6. 一周学会Mootools 1.4中文教程:(3)事件

    今天我們講解一下mt的事件部分,对于事件的讲解主要包含三部分,分别是:绑定,移除,和触发,我们首先来看一个例子 //jquery的事件绑定方式$('a').click(function){ alert ...

  7. 一周学会Mootools 1.4中文教程:(4)类型

    Mootools的类型主要包含下边几部分:String:字符串;Number:数字;Array:数组;Object:对象;Json:;Cookie:. 这也是我们今天的讲述重点.每一种数据类型Mt都为 ...

  8. Swift中文教程(四)--函数与闭包

    原文:Swift中文教程(四)--函数与闭包 Function 函数 Swift使用func关键字来声明变量,函数通过函数名加小括号内的参数列表来调用.使用->来区分参数名和返回值的类型: fu ...

  9. 一周学会go语言并应用 by王奇疏

    <一周学会go语言并应用> by王奇疏 ( 欢迎加入go语言群: 218160862 , 群内有实践) 点击加入 零.安装go语言,配置环境及IDE 这部分内容不多,请参考我的这篇安装环境 ...

随机推荐

  1. current imporant Posts

    CRUD是指在做计算处理时的增加(Create).读取(Retrieve)(重新得到数据).更新(Update)和删除(Delete) http://www.centos.org/docs/5/htm ...

  2. opencv 图像修复函数

    void cv::inpaint( const Mat& src, const Mat& mask, Mat& dst, double inpaintRange, int fl ...

  3. ArcMap制图_显示指定区域地图内容

    摘要:有一张完整的中国地图,有时仅要求针对某一特定区域制图,那么如何在不进行裁剪的情况下仅显示该区域范围的要素内容? 步骤: 1.打开ArcMap,加载完整的中国地图: 2.将要显示的区域范围制作成一 ...

  4. sql两表联合查询

    SELECT yt_fault_componentId FROM yt_fault_component a join yt_fault_assembly b on a.yt_fault_assembl ...

  5. Linux 文件内容转码

    文件内容的转换: iconv -f GB2312 -t UTF-8 gb1.txt >gb2.txt-f, –from-code=名称 原始文本编码-t, –to-code=名称 输出编码-o, ...

  6. [C#技术参考]Socket传输结构数据

    最近在做一个机器人项目,要实时的接收机器人传回的坐标信息,并在客户端显示当前的地图和机器人的位置.当然坐标的回传是用的Socket,用的是C++的结构体表示的坐标信息.但是C#不能像C++那样很eas ...

  7. 5.7.2.4 random() 方法

    Math.random()方法返回大于等于0小于1的一个随机数.对于某些站点来说,这个方法非常实用,因为可以利用它来随机显示一些名人名言和新闻事件.套用下面的公式,就可以利用Math.random() ...

  8. （转）深入浅出Java三大框架SSH与MVC的设计模式

    原址:http://www.educity.cn/java/1382738.html 现在许许多多的初学者和程序员,都在趋之若鹜地学习Web开发的宝典级框架:Struts2, Spring,Hiber ...

  9. Spring 装配Bean

    Spring 装配Bean 装配解释: 创建应用对象之间协作关系的的行为通常称为装配(wiring),这也是依赖注入的本质 依赖注入是Spring的基础要素 一 : 使用spring装配Bean基础介 ...

  10. ICT测试原理

    在线测试,ICT,In-Circuit Test,是通过对在线元器件的电性能及电气连接进行测试来检查生产制造缺陷及元器件不良的一种标准测试手段.它主要检查在线的单个元器件以及各电路网络的开.短路情况, ...