Mootools 1.2教程(6)——操纵HTML DOM元素

原文地址:30 Days of Mootools 1.2 Tutorials – Day 6 – Manipulating HTML

通过Mootools 1.2来操纵HTML DOM元素

请尊重个人劳动,转载请注明出处:http://fdream.net

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

我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2,你可以添加新元素到一个HTML页面中,也可以删除元素,以及改变任何样式或者元素参数,这些都非常容易。

基本方法

.get();

这个工具可以让你获取元素的属性(property)。元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单:

// 下面这行将返回id为“id_name”的元素的html标记名(div、a、span……)

Mootools 1.2系列教程目录

还是需要一个目录,那就做一个吧!

MooTools是近来仅次于jQuery流行的JavaScript框架,也是我一直比较喜欢的开发框架,最近也正在写MooTools 1.2的注释文档。本来自己也想写一些关于MooTools的教程来着,但是自己很懒,又担心自己写的不好,反倒误了初学者。正好今天无意在国外的论坛上看到这么一个blog,发现有这么一系列的教程,写的很好,很适合初学者和对MooTools完全不熟悉的人,于是决定全部中文化。

另外,此翻译版本已获得原作者支持,在其第一篇文章中已有本文链接。

JavaScript的弱类对象及继承实现方式

这篇文章是Yahoo!的一名资深开发人员写的,对于JavaScript的弱类对象及其继承方式讲得非常透彻,文章写得很好,而自己最近又很有点翻译欲望,于是也一并翻译过来了。另外,MooTools 1.2.1已经发布了,修复了一些bug。

原文地址:JavaScript’s class-less objects

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

Java和JavaScript是相差极大的两种语言,尽管他们的名字非常像,而且都有类C的语法风格,很多时候这让人们很迷惑。(Fdream注:曾有人在论坛上问Java和JavaScript是什么关系?我一师兄的回答非常经典:雷锋和雷峰塔的关系。)我们来看看两者最主要的区别——对象是怎样创建的。在Java中,你有类。然后是对象,又叫实例,都是基于那些类建立的。而在JavaScript中,没有类存在,对象更像是一个包含键值对(key-value…

Mootools 1.2教程(5)——事件处理

原文地址:30 Days of Mootools 1.2 Tutorials – Day 5 – Event Handling

MooTools 1.2中的事件处理

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

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

今天我们开始第五讲,在上一讲(《Mootools 1.2教程(4)——函数》)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式。下一步就是理解事件了。和选择器类似,事件也是建立互动界面的一个重要部分。一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果。先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件。

左键单击事件

左键单击事件是web开发中最常见的事件。超链接识别点击事件,然后把你带到另外一个URL地址。MooTools能够识别其他DOM元素上的点击事件,在设计和功能上给了你极大的灵活性。给一个元素添加一个点击事件的第一步:…

Mootools 1.2教程(4)——函数

原文地址:30 Days of Mootools 1.2 Tutorials – Day 4 – Functions

函数和MooTools 1.2

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

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

今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲,请先查看上一篇教程《Mootools 1.2教程(3)——数组使用简介》。今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识。

但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数。此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中。当我们需要把它放在domready的外面时,我们使用了函数(function)。在你在domready里面调用函数之前,函数并不会被执行。…

Mootools 1.2教程(3)——数组使用简介

数组使用简介

原文地址:30 Days of Mootools 1.2 Tutorials – Day 3 – Intro to Using Arrays

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

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

在上一篇教程——《Mootools 1.2教程(2)——DOM选择器》中,我们介绍了一下选择器,其中有很多方法就会返回数组(一个你可以对其中内容进行多种操作的特殊列表)。今天,我们在来看看如何使用数组来管理DOM元素。

基本方法

.each();

在处理数组时,.each();方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理。例如,我们可以假设你需要为页面中的每个div对象调用alert方法:

$$('div').each(function()

UL/OL的预设标记在IE和Firefox等浏览器下的差别

先说句题外话,昨天Silverlight 2.0发布了RTW(很多人都以为是RTM,这里的RTW是针对互联网版本的一个说法:Release to Web)版本。今天一大早的打开Google Reader,发现Flash Player 10和Flash CS4的文档已经发布了,中午吃完饭回来惊奇地发现Flash Player 10也跟着发布了。Flash Player和Silverlight的竞争是越来越白热化了,至少在新版本的发布上已经有这个意思了。

===========严肃的分割线============

好了,言归正传,回到我们的标题上来。UL的预设标记就是每个项目之前的那个原点或者方块或者数字之类的标记,就像我的blog侧栏里面“最新评论”或者“最新文章”那个地方的小原点一样。

很多时候,很多人不喜欢这个玩意儿,于是就想把它藏起来,这个也很好办,这么一行就搞定了:

ul{
    list-style-type:none;

Silverlight 2.0 RTW发布,等写完MooTools文档开始玩

上个星期Microsoft放出消息说北京时间昨天凌晨2点发布Silverlight 2.0 RTW,经典论坛Silverlight版版主nasawz很“敬业”地、很忠实地作为Silverlight的粉丝守在电脑前守到两点多,一直等到Silverlight 2.0正式发布,实在是令人佩服。有关Silverlight 2的各种工具的下载集合及更新说明,请参考这篇文章:Silverlight 2 正式版官方正式发布(更新下载地址)(感谢nasa的辛苦工作!)

最近开始抽空翻译MooTools的帮助文档,争取这个周末翻译完成,中文帮助文档发布地址在这里。准备翻译完成之后看看Silverlight,2.0了,终于可以再试试了。

另外,貌似Silverlight 2.0在可以在非安全连接中调用安全连接(SSL)服务了。这个以后再说,嗯~

还有,都说Silverlight 2.0支持Chrome,为什么不说是Chrom支持Silverlight…

Mootools 1.2教程(2)——DOM选择器

Mootools 1.2教程(2)——DOM选择器

原文地址:30 Days of Mootools 1.2 Tutorials – Day 2 – Selectors

请尊重个人劳动,转载请注明来源:http://fdream.net,译者:Fdream

这里是《MooTools 1.2系列教程目录》

如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。

今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择HTML元素的方法。在许多方面,这是MooTools用得最多最基本的。毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中。

基本的方法

$();

$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。

// 选择ID为”body_wrap“的元素

Mootools 1.2教程(1)——MooTools介绍

MooTools 1.2介绍

原文地址:30 Days of Mootools 1.2 Tutorials – Day 1 – Intro to the Library

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

这里是《MooTools 1.2系列教程目录》

有人最近要求我们写一个关于MooTools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始。在这些教程中,我们假设用户没有任何MooTools或者是JavaScript经验,但是至少有基本的HTML和CSS知识。

MooTools 1.2 JavaScript库介绍

MooTools 1.2是个强大的轻量级的JavaScript库,专门为减轻Web中交互性JavaScript开发。在某种程度上,你可以认为MooTools是CSS的扩展。例如,CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间(点击事件、鼠标悬停事件、键盘事件……),MooTools让这一切变得非常容易。…