速成Mootools 1.4中文教程：函数篇与选择器应用实例

需积分: 3 68 浏览量更新于2024-09-16 1 收藏 6KB TXT 举报

在Mootools 1.4中文教程的第二部分，我们将深入探讨函数的使用，这对于理解并灵活运用这一强大的JavaScript库至关重要。Mootools是基于Prototype.js的JavaScript框架，它提供了丰富的类库，简化了前端开发工作，包括选择器、事件处理、DOM操作和动画等。在本节中，作者首先强调了在前一课中学到的选择器基础的重要性，如`$$('*')`可以选取页面上的所有元素，`$$('.b, .c')`则用于同时选择类名为'.b'和'.c'的元素。通过这些选择器，开发者可以高效地定位和操作DOM中的元素。接下来，教程演示了如何使用Mootools的高级功能获取元素属性。例如，`$$('*').get('html')`会返回整个文档的HTML源代码，展示了获取元素文本内容的能力。选择多个节点时，可以像这样组合选择器，如`$$('.b,.c').get('title')`，这将获取所有`.b`和`.c`元素的`title`属性。另一个例子展示了如何根据元素属性筛选：`$$('a[title=B1]').get('href')`，它只选取`title`属性值为'B1'的`<a>`元素，并提取其`href`属性。这在处理具有特定条件的元素时非常有用。通过学习这些函数，开发者可以更加熟练地在Mootools环境中进行精确的元素操作，无论是选择、遍历还是获取属性，都能提高代码的效率和可读性。此外，理解这些基本操作对于构建更复杂的Mootools应用，如响应式设计、AJAX交互或动态用户界面至关重要。本教程系列的目标是帮助读者在短时间内掌握Mootools 1.4的核心概念和用法，从而快速融入到实际项目开发中。通过逐步实践和理解函数的使用，读者能够构建出功能强大的Web应用，提升开发技能。如果你希望进一步深入学习Mootools，这个系列教程是一个不错的选择。

此文来自:http://www.cnblogs.com/see7di/archive/2011/11/12/2246350.html
插件和图片都可以通过上边的网址下载到

温故:

　　透过对上一节课的学习,相信大家对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节点

剩余6页未读，继续阅读

www_7di_net

粉丝: 328
资源: 109

速成Mootools 1.4中文教程：函数篇与选择器应用实例

一周学会Mootools 1.4中文教程(7)汇总收尾

一周学会Mootools 1.4中文教程(6)动画

一周学会Mootools 1.4中文教程(5)Ajax

一周学会Mootools 1.4中文教程(4)类型

一周学会Mootools 1.4中文教程(3)事件

一周学会Mootools 1.4中文教程序章

一周掌握Mootools 1.4：中文教程

Mootools 1.4中文教程(4): 数据类型与常用方法详解

Mootools 1.4 Ajax 教程：核心概念与用法

Mootools 1.4 动画教程：详细参数与事件解析

最新资源