没有合适的资源？快使用搜索试试~ 我知道了~

首页"MooTools 1.2入门教程：上传核心库并链接HTML文档头部"

"MooTools 1.2入门教程：上传核心库并链接HTML文档头部"

javascript

html

需积分: 0 0 下载量 164 浏览量更新于2023-12-29 收藏 1.45MB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

试读

148页

MooTools 1.2 是一个强大的轻量级的JavaScript库，专门为减轻Web中交互性JavaScript开发而设计。在本教程中，我们将介绍MooTools 1.2的基本概念和用法，并且假设用户没有任何MooTools或者是JavaScript经验，但是至少有基本的HTML和CSS知识。在这个教程中，我们将逐步指导你了解如何使用MooTools 1.2，从上传核心库到你的服务器或者工作区，到在HTML文档头部head标记内链接MooTools 1.2核心库。 MooTools 1.2的功能非常丰富，它可以通过JavaScript实现一些CSS无法做到的效果，比如鼠标悬停事件、键盘事件等。MooTools可以让这一切变得非常容易，让开发者能够更加轻松地实现Web中的交互性功能。在这个30 Days of MooTools 1.2 Tutorials系列中，我们会逐步介绍MooTools 1.2的各种功能和用法，包括但不限于以下几个方面： 1. MooTools 1.2的基本概念介绍 2. 如何上传MooTools 1.2核心库到你的服务器或者工作区 3. 在HTML文档头部head标记内链接MooTools 1.2核心库 4. 如何使用MooTools 1.2实现鼠标悬停事件 5. 如何使用MooTools 1.2实现键盘事件 6. MooTools 1.2和CSS的结合运用 7. MooTools 1.2的高级功能介绍希望通过这个系列教程，你能够对MooTools 1.2有一个更深入的了解，并能够运用MooTools 1.2来完成更加丰富多彩的Web交互性开发。同时，我们也希望通过这个系列教程来帮助那些初学者能够更快地上手MooTools 1.2，从而提高他们在Web开发中的能力和技术水平。总的来说，MooTools 1.2是一个非常强大和实用的JavaScript库，它可以为Web开发者们带来更多的便利和创造空间。希望这个系列教程能够对你有所帮助，也希望你能够在学习MooTools 1.2的过程中有所收获。感谢你的阅读和支持。

资源详情

资源推荐

参考代码： [复制代码] [保存代码]

1. <div id="body_wrap">

2. <div>one</div>

3. <div>two</div>

4. <span class="class_name">add to array</span>

5. <span class="class_name">add to array, also</span>

6. <span class="class_name">add to array, too</span>

7. </div>

我们可以这样建立两个数组：

参考代码： [复制代码] [保存代码]

1. // 就像我们以前那样建立你的数组

2. var myArray= $('body_wrap').getElements('div');

4. // 然后建立一个所有 CSS 类名为.class_name 的元素数组

5. var newArrayToArray = $$('.class_name');

现在我们可以使用.combine();方法来合并两个数组，这个方法会自己处理重复

的元素，因此我们不需要处理：

参考代码： [复制代码] [保存代码]

1. // 把数组 newArrayToArray 合并到数组 myArray 中

2. myArray.combine(newArrayToArray );

现在 myArray 就包含了 newArraytoArray 中的所有元素。

代码示例

数组可以让你遍历包含所有项目的列表，并对每个元素执行相同的代码。在这个

例子中，注意变量”item“作为当前元素的替代符的使用。

参考代码： [复制代码] [保存代码]

1. // 创建一个数组，这个数组包含”body_wrap“里面所有 CSS 类名

为.class_name 的元素

2. var myArray = $('body_wrap').getElements('.class_name');

4. // 首先建立一个要添加到数组中的元素

5. var addSpan = $('addtoarray');

6. // 然后建立一个要合并的数组

7. var addMany = $$('.addMany');

9. // 现在我们把元素 addSpan 加入到数组中

10.myArray.include(addSpan);

11.// 然后合并数组 addMany 到 myArray 中

12.myArray.combine(addMany);

13.

14.// 建立一个需要对数组中的每个元素都要执行的函数

15.var myArrayFunction = function(item) {

16.// item 现在指向数组中的当前元素

17.item.setStyle('background-color', '#eee');

18.}

19.

20.// 现在对数组中的每个项目调用 myArrayFunction 函数

21.myArray.each(myArrayFunction);

参考代码： [复制代码] [保存代码]

1. <div id="body_wrap">

2. <div class="class_name">one</div><!-- this has gray backgro

und -->

3. <div>two</div>

4. <div class="class_name">three</div><!-- this has gray backg

round -->

5. <span id="addtoarray">add to array</span> <!-- this has gr

ay background -->

6. <br /><span class="addMany">one of many</span> <!-- this h

as gray background -->

7. <br /><span class="addMany">two of many</span> <!-- this h

as gray background -->

8. </div>

延伸学习

这个教程并没有打算涵盖你能对数组做的全部事情，但是希望能够给你一个参

考，告诉你 MooTools 提供了一些什么功能。要学习更多关于数组的东西，请仔

细阅读这些内容：

 文档中的数组部分

 这个页面中有许多关于 JavaScript 数组的信息

下载一个包含你开始所需要的所有东西的 zip 包

包括一个简单的 html 文件、MooTools 1.2 核心库、一个外部 JavaScript 文件、

一个 css 文件和上面的所有例子。

函数和 MooTools 1.2

请尊重个人劳动，转载请注明出处：http://ooboy.net，译者：Fdream

如果你还没有准备好，请阅读以前的教程，这里是《MooTools 1.2 系列教程目

录》。

今天开始 MooTools 系列教程的第 4 讲。如果你还没有看过上一讲，请先查看上

一篇教程《Mootools 1.2 教程(3)——数组使用简介》。今天我们先不讲 MooTools，

而是讲一讲 JavaScript 中的函数（function）的基本知识。

但是，为了符合 MooTools 这个主题，你需要知道在哪里该使用 MooTools 的函

数。此前，我们已经在我们的所有示例代码中，把代码都放在 domready 方法中。

当我们需要把它放在 domready 的外面时，我们使用了函数（function）。在你

在 domready 里面调用函数之前，函数并不会被执行。

一般来说，一种比较好的方式是尽可能地把你的函数代码都放在页面之外的某一

个地方，然后通过 JavaScript 应用来调用它们。当你只是写代码玩玩，可能把

所有的东西写在一个页面上更容易一些。在这个教程中，我们使用下面的约定：

参考代码： [复制代码] [保存代码]

1. <script type="text/javascript">

2. /*

3. * 函数定义写在这里

4. */

6. window.addEvent('domready', function() {

7. /*

8. * 函数调用写在这里

9. */

10.});

11.</script>

所有的例子都遵循这个格式，当页面载入的时候（load）执行函数代码。在每个

函数的下面，都有一个相应的按钮，你可以点击它们，然后看到结果。这是通过

使用 MooTools 的事件处理来完成的，明天我们将会讲到这个。

函数基础

在 JavaScript 中，有几种方式来定义函数，由于我们的主题是讲解 MooTools，

因此我们将选择 MooTools 的首选方式。下面的示例是一个函数定义的开始。我

们什么了一个变量，并命名为 simple_function，并吧这个变量定义为一个函数：

参考代码： [复制代码] [保存代码]

1. var simple_function = function(){

然后我们给这个函数增加了一个 alert 语句，当函数被调用的时候就会执行：

参考代码： [复制代码] [保存代码]

1. alert('This is a simple function');

最后，我们以一个花括号结束这个函数的定义：

参考代码： [复制代码] [保存代码]

1. }

这个关闭花括号看起来是一件非常简单的事情，但是很多时候要追踪这个问题却

是一件很痛苦的事情。因此，适度地强迫对函数定义的关闭符号进行检查是个不

错的主意。

在下面的例子中，我们把它们组合起来了。在声明这个函数之后，我们在页面加

载后的 domready 事件里面添加了对这个函数的调用。可以点击例子下面的按钮

查看调用函数 simple_function();后的结果。

参考代码： [复制代码] [保存代码]

1. // 定义 simple_function 为一个函数

2. var simple_function = function(){

3. alert('This is a simple function');

4. }

6. window.addEvent('domready', function() {

7. // 当页面加载后调用 simple_function

8. simple_function();

9. });

单个参数

虽然你有很多代码可以轻松地随时调用，这已经很有用了，但是如果你可以给它

传递参数（信息）进行处理，这将会更有用。要在函数中使用参数，你需要在

function 后面的括号中添加一个变量，就像这样：

参考代码： [复制代码] [保存代码]

1. var name_of_function = function(name_of_the_parameter){

2. /* 函数代码写在这里 */

3. }

一旦你这样做了，在这个函数内部就可以使用这个变量了。尽管你可以给参数

取任何你想要的名字，但是让参数名更有意义是个不错的选择。举个例子来说，

如果你要传递一个小镇的名字，可能你把参数命名为 town_name 比其他更模糊

的名字要好一些（比如 user_input）。

在下面的例子中，我们定义了一个只带有一个参数的函数，并在弹出对话框中显

示这个变量。请注意，信息的第一部分被单引号包含起来了，而参数没有。当你

要把参数和硬编码的字符串连接在一起，你需要用加号（+）运算符把他们连接

起来，就像下面一样：

参考代码： [复制代码] [保存代码]

1. var single_parameter_function = function(parameter){

2. alert('the parameter is : ' + parameter);

3. }

5. window.addEvent('domready', function(){

6. single_parameter_function('this is a parameter');

7. });

多个参数

JavaScript 没有限制在一个函数中可以定义的参数的个数。一般来说，要让传

给函数的参数个数尽可能地少，这会使代码更具可读性。函数中定义的多个参

数使用逗号分割，其它行为这和单个参数函数一样。下面的示例中的函数带有两

个数字，并把它们的和赋值给第三个数字，就像这样：

参考代码： [复制代码] [保存代码]

1. var third_number = first_number + second_number;

这里加号（+）运算符的使用和把这些结果连接成字符串略有一些不同：

参考代码： [复制代码] [保存代码]

1. alert(first_number + " plus " + second_number + " equals " + th

ird_number);

剩余147页未读，继续阅读

粉丝: 26
资源: 283

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

"MooTools 1.2入门教程：上传核心库并链接HTML文档头部"

mootools 教程

mootools教程

(一) mootools介绍

js基础库具体有哪些详细点

jquery使用不了的原因

ajax向服务端发送请求的方法有哪些

该对象没有hasEventListener

mootools框架入门教程

mootools入门教程.rar

mootools详细教程

光纤课程设计.doc

新媒体环境下汉语言文学教学优化策略.pdf

基于Python爬虫技术的海量电影数据分析系统源码

2022爱奇亿研发工程师笔试资料2022爱奇亿研发工程师笔试资料

师范院校汉语言文学专业民俗学课程的开设与教学模式.pdf

ISO 15118-20-2022中文翻译+英文原版.zip

高频注入全套方案 仿真模型生成代码 simulink matlab 效果优于某驱动 代码生成烧录到开发板，mdb，HFI 清单

GDAL-3.0.4-cp38-cp38-win32.whl

基于数字化驱动的公共管理模式创新研究.pdf

EXCEL进行CRC码计算演示

最新资源

高频注入全套方案仿真模型生成代码 simulink matlab 效果优于某驱动代码生成烧录到开发板，mdb，HFI 清单