同等完美学会Mootools 1.4国语课:(2)函数

温故:

  透过对达成同样节约课的上学,相信大家对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.jpg"><img src="img/map1.png"></a>
    <a class='c' title="B1" href="http://www.digitalia.be.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>

    </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中文课:序论
一如既往圆学会Mootools
1.4汉语课:(1)Dom选择器
如出一辙两全学会Mootools
1.4国语课:(2)函数
相同健全学会Mootools
1.4汉语课:(3)事件
同样完美学会Mootools
1.4华语课:(4)类型
一样宏观学会Mootools
1.4中文课:(5)Ajax
一律全面学会Mootools
1.4华语课:(6)动画
同等周学会Mootools
1.4中文课:(7)汇总了

其它关于Mootools 1.4之章Ajax:
自身写的Lightbox效果插件,基于MooTools
1.4
自我写的万年历插件(含天干地支,农历,阳历,节气,各种节日等),基于MooTools
1.4
自己写的切近本站首页左上角的菜谱的意义插件,基于MooTools
1.4
Mootools中delay这个延迟函数的高等用法
Mootools中动用bind给函数绑定对象
Mootools中使用extend和implement给你的函数扩展功能还是方式
和谐写单扩大把Mootools的语法改之跟Jquery的语法一模一样
Mootools1.4受到起定义事件
故此Mootools1.4描写了一个趁鼠标移动如果背景图也随后走的东西

相关文章