目录:

为什么选择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



收藏
0个人 收藏

关注Joomla中国微信公众号,随时获得最新的Joomla新闻资讯!