您当前位置：首页 > web前端 > jscript > 一周学会Mootools 1.4中文教程:(2)函数

一周学会Mootools 1.4中文教程:(2)函数

来源：程序员人生发布时间：2014-03-09 04:59:23 阅读次数：3220次

透过对上一节课的学习,相信大家对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);
myParent3.adopt([myFirstElement,new Element('font#another')]);

结果:
<div id="parent">
<p id="second">
<ul id="third"></ul>
<a id="fourth"></a>
</p>
<font id="another"></font>
</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.