目录:
为什么选择MooTools?
Mootools
设计思想 :面向对象的设计思想
有点: 模块化,各个模块代码非常的独立,最小的核心只有8K,最大的优点是可选择使用哪些模块,用的时候只导入使用的模块即可。语法简洁直观,代码优美,易于阅读和修改。
特效:这一点比jQuery稍强,现在也正在开发Mootools UI(这应该是Ajax框架开发的一个趋势)。
缺点:修改了底层的一些类:如Array ,String等,这也是设计思想的不同。
2,介绍JavaScript基础
简单的数据类型:
undefined boolean number string.简单类型都不是对象,JavaScript没有将对象化的能力赋予这些简单的类型。直接被赋予类型常量值的标识符、变量和参数都不是一个对象。
所谓的对象化,就是可以将数据和代码组织成复杂结构的能力。JavaScript中只有object类型和functionl类型提供了对象化的能力。
没有类,object就是对象的类型。在JavaScript中不管多么复杂的数据和代码,都可因组织成Object形式的对象。但是JavaScript却没有类的概念
JavaScript 的代码就只有function一种形式。function就是函数的类型。也许其他编程语言还有proceduce或者method等代码 概念,但是JavaScript里只有function一种形式。当我们写一个函数的时候,只不过是建立一个function类型的实体而已。
3,MooTools的DOM先择器
$()函数是最基本的选择器。你可以通过它来根据一个ID选择DOM元素
.getElement()方法,扩展了$方法,你可以简化你的操作。你可以通过$方法选择ID,然后利用getElement()来选中其中的一个元素。如果有多个元素则返回第一个元素。
.getElements()方法,会同时选中多个,得到一个元素数组。
$$()函数可以让你快速的选中多个元素,并且组成一个数组,你可以通过标签名(div a img等)或者ID或者他们的各种组合来选择多个元素
可以运用运算符包含和排除结果
=:等于
//选择name为“phone number”的input元素
$('body wrap').getElements('input[name = phone number]');
^=:以…开始
$=:以…结束
!= :不等于
要使用运算符,你必须首先指定元素的类型(比如这里的input),然后指定你要过滤的属性。
(比如这里的name),再加上你的运算符,最后选择你的过滤字符串。
基于元素顺序的选择器
eve(偶数选择器)
通过这个简单的选择器,你可以选择序号为偶数的元素。注意:这个选择器从0开始计数,因此第一个元素是偶数序的。
//选择需要为偶数的DIV
$$('div:even');
odd(奇数选择器)
.getParent()方法,你可以得到一个元素的父元素。
5,数组使用简介
.each()
在处理数组时,each()方法提供了一种很容易的方法来遍历数组中的每一个元素。如果有需要还可以对其中的元素进行任何逻辑处理。
.each()方法不需要你使用$$方法,创建一个数组的另一种方法是使用.getElements()方法。
还有另一种方法来完成这个相同的任务,就是把这个数组赋值给一个变量,然后对那个变量使用.each()方法。
//首先你需要通过语句"var VARIABLE_NAME"来声明一个变量。
//然后用等于运算符“=”来给这个变量赋值。
// 在这个例子中,是一个包含div元素的数组。
var myArray = $('body wrap').getElements('div');
//现在你就可以把这个变量当作数组选择器来使用了。
myArray.each(function(){
alert('a div');
})
最后,如果你可能想把你的函数从选择器中独立出来。创建一个非常简单的实例:
var myArray = $('body_wrap').getElements('div');
//要创建一个函数,你可以像刚才那样申明一个变量。然后给它命名。
//在等号后面使用function()来声明这个变量为一个函数
//最后,在{}之间写入你的函数代码
var myFunction = function (){
alert('a div');
}
//现在你就可以在.each()方法里面调用刚才的函数了。
myArray.each(myFuction);
注意:当你像刚才那样在.each()方法里面调用函数时,你不需要给函数名加上引号。
$A复制一个数组。
MooTools提供了一个很简单的方式--通过$A函数来复制一个数组,
var myArray = $('body_wrap').getElements('div');
复制一个数组 创建该数组的副本
var myCopy = $A(myArray);
从数组中获得指定的元素。
.getLast()方法返回数组中最后一个元素
.getRandom()方法返回数组中随机取得的一个元素。
.include()方法向数组中添加一个元素。只需要把元素选择器传给.include()方法,他就会包含到你的数组中。
.combine()方法和.include()方法一样,不过它可以让你把一个数组添加到一个已存在的数组中,而不用担心有重复的内容。
6.MooTools中的事件处理。
//通过$('id_name')取得一个元素
//用.addEvent添加事件。
// (‘click’)定义了事件的类型。
$('id_name').addEvent('click',function(){
})
7操作DOM元素
你可以添加新元素到一个HTML页面中,也可以删除元素,以及改变任何样式或者元素参数。
.get()这个工具可以让你获取元素的属性(property)
.set()设置一个值。
.inject()要移动页面上一个已存在的元素,你可以使用.inject()方法。和我们看到的其他方法类似,
现在,要改变元素的顺序,我们可以通过四种方式来使用.inject()方法。我们可以把元素注入到
底部(bottom,默认)
顶部(top)
在某个元素的前面(before)
在某个元素的后面(after)
创建一个新的元素
new Element
//首先 命名一个变量并声明一个“new Element”
//然后定义元素的类型(div ,a,span……)
var newElementVar = new Element('div' {
//在这里设置元素的所有属性
‘id’:'id_name',
‘text’:'dddddd',
'styles':{
'width':'200px'}
})
有了一个元素之后,你就可以通过inject()方法把这个元素放到页面上的某一个位子上了。
.setStyle
.getStyle