- 浏览: 148259 次
- 性别:
- 来自: 上海
最新评论
-
pobing:
总结的很全
Ruby中的数字【一】 -
sinkzephyr:
引用 %Y 本地时间,如 16:43:49本地时间应该是 ...
Ruby中处理时间和日期 -
zarknight:
呵呵,没有的部分可以去参考下我翻译的文档吧
mootools【二】 - Array篇 -
engineer:
我今天看好几篇了,但是有些没有,比如mootools的plug ...
mootools【二】 - Array篇 -
engineer:
挺不错的,呵呵,希望能有更多的例子
mootools【二】 - Array篇
Ajax开发中,做的最多的就是对DOM的操作, 增删节点,设置样式等等等等,如果按照常规的javascript开发的话,工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫,对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题),让我们的开发事半功倍。
mootools也提供了一套非常出色的解决方案,并且更OO。
首先,之前,通常我们创建DOM节点,都使用document.createElement()方法,而我们看mootools式的创建方法:
- var myInput = new Element('input');
非常的优雅啊。
方法: $
美元,又见美元!
$基本上成了javascript框架中的标志性建筑了,短小精悍的语法使我们的代码看起来舒服不少,也使我们的js文件瘦了下身。
时下,各大javascript框架中都会提供$这个方法,基本上它都有按照id来获取DOM元素的功能,但各个框架在具体诠释它的时候各有不同的手法,功能的强弱上也不一样。比如prototype.js中的$可以根据给出的一个或多个id来获取这些DOM元素,而jQuery里的$更是非常强,可以按照CSS选择器的语法来获取DOM元素(其实mootools和prototype也是可以的,只不过是$$这个方法)。
这是mootools中的$()的最常用用法,它返回id为my_div的元素,并且这个元素被加上了所有mootools所进行的扩展。
- var mydiv = $('my_div');
如果你使用document.getElmentById来获取的元素,则此时这个元素将没有包含mootools的任何扩展,你可以把这个元素对象作为参数调用$方法,之后返回的元素将被加上mootools的扩展。
- var mydiv_noextend = document.getElementById('my_div');
- var mydiv_extended = $(mydiv_noextend);
方法: $$
功能:通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的支持)
- $$('a'); //获取页面上所有超链接标签对象
- $$('a','b'); //获取页面上所有超链接标签和粗体标签
- $$('#my_div'); //获取id为my_div的元素
- $$('#my_div a.myClass'); //获取id为my_div的元素子元素,并且这些自元素是的所有class="myClass"的标签
=================================Element扩展方法=====================================
作用:可以用来把当前元素插入到指定元素之前(before),之中(inside),之后(after)。
- $('myDiv3').inject($('myDiv1'),'before'); //把myDiv3插入到myDiv1之前
作用:可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的inject方法)
- $('myDiv3').injectBefore($('myDiv1'));
作用:可以用来把当前元素插入到指定元素之后 (即相当于参数为'after'的inject方法)
- $('myDiv3').injectAfter($('myDiv1'));
作用:可以用来把当前元素插入到指定元素之中 (即相当于参数为'inside'的inject方法)
- $('myDiv3').injectInside($('myDiv1'));
作用:可以在当前元素中插入指定元素(参数可以是元素id,元素引用,html元素tag名)
- $('myDiv').adopt($('myDiv1'));
- $('myDiv').adopt('myDiv1');
- $('myDiv').adopt('button');
- $('myDiv').remove();
contents - 是否连带节点的内容进行复制(deep clone),如果不指定,则连带。
- $('myDiv').clone();
- $('myDiv').clone(false); //只复制myDiv本身,不复制其content和子元素
- var a = new Element('button');
- a.value = 'test';
- $('myDiv1').replaceWith($(a));
- $('myDiv1').appendText('world');
- var x = $('myDiv1').hasClass('clazz_1');
- $('myDiv1').addClass('clazz_1');
- $('myDiv1').removeClass('clazz_1');
作用:在addClass和removeClass的功能之间切换
- $('myDiv').setStyle('width','100px');
- $('myDiv').setStyles({
- border: '1px solid #000',
- width: '300px',
- height: '400px'
- });
- 或者(不推荐在这种方式下设置opacity属性):
- $('myDiv').setStyles('border: 1px solid #000; width: 300px; height: 400px;');
- $('myDiv').setOpacity(0.5); //透明度设置为50%
- var w = $('myDiv').getStyle('width');
- $('myDiv').addEvent('click', function(){
- alert('haha,clicked!');
- });
作用:为元素增加多个事件监听器(不过,在mootools1.0.0版本中,这个方法是有BUG的,推荐不要使用;mootools1.1开发版中,已经修复了BUG)
- $('myBtn').addEvents({
- 'click': function(e){alert('clicked!!!');},
- 'mouseout': function(e){alert('mouseouted!!!');}
- });
- var fa = function(e){alert('aaaaaaaaaaaaaa');};
- var fb = function(e){alert('bbbbbbbbbbbbbb');};
- $('myBtn').addEvent('click',fa);
- $('myBtn').addEvent('click',fb);
- $('myBtn').removeEvent('click',fa);
作用:从元素上删除指定事件的监听器,如果不指定事件,则将删除所有事件的监听器(和addEvents方法一样,该方法再1.0.0版本中也存在BUG,在1.1开发版本中已修复)
- var fa = function(e){alert('aaaaaaaaaaaaaa');};
- var fb = function(e){alert('bbbbbbbbbbbbbb');};
- $('myBtn').addEvent('click',fa);
- $('myBtn').addEvent('click',fb);
- $('myBtn').removeEvents('click');
- var fa = function(e){alert('aaaaaaaaaaaaaa');};
- var fb = function(e){alert('bbbbbbbbbbbbbb');};
- $('myBtn').addEvent('click',fa);
- $('myBtn').addEvent('click',fb);
- $('myBtn').fireEvent('click'); //fa和fb将立即被执行
- var f = $('myDiv').getFirst();
- var l = $('myDiv').getLast();
- var par = $('first').getParent();
- var cs = $('myDiv').getChildren();
- $('myImage').setProperty('src', 'whatever.gif');
- $('myElement').setProperties({
- src: 'whatever.gif',
- alt: 'whatever dude'
- });
- $('myElement').setHTML(newHTML);
- $('myImage').getProperty('src')
- $('myImage').getTag(); //img
作用:相当于把滚动条滚动到指定的状态(窗口或元素在overflow的情况下)
- window.scrollTo(0,200);
作用:获取tag为textarea, select 或 input这三个元素的value属性值。但select多选状态下取值不支持。
{
'scroll': {'x': 100, 'y': 100},
'size': {'x': 200, 'y': 400},
'scrollSize': {'x': 300, 'y': 500}
}
- $('myElement').getSize();
- $('element').getPosition();
- $('element').getTop();
- $('element').getLeft();
作用:获取元素的当前width, height, left, right, top, bottom值
{
width: 200,
height: 300,
left: 100,
top: 50,
right: 300,
bottom: 350
}
- var myValues = $('myElement').getCoordinates();
发表评论
-
Mootools Essentials
2009-03-01 12:03 1922Mootools精华,系统介绍Mootools使用的书籍。 -
mootools 1.2 中文参考文档(HTML格式)
2008-07-20 13:34 3956参考文档翻译成中文, 虽然觉得不是非常必要, 但是还是能帮助不 ... -
关于Mootools的一点消息
2007-09-29 17:04 2781Mootools v1.2的正式发布日期mootools de ... -
mootools【一】- 起步篇
2007-04-08 12:02 2947以前一直在用prototype.js,最近发现了mootool ... -
mootools【二】 - Array篇
2007-04-08 16:34 2511由于JavaScript1.5对Array增加了一些比较好用的 ... -
mootools【三】- String篇
2007-04-09 01:16 2080String大概是我们使用频率最高的数据类型了,在各个java ... -
mootools【四】- Function篇
2007-04-10 15:50 2433闭包是javascript中非常强大的工具, 在实际应用开发中 ... -
mootools【六】- Event篇
2007-04-12 18:42 2548mootools中定义了一个Event ... -
mootools的学习资源
2007-04-13 01:29 3986网上看到有朋友搜集了很多关于mootools的资料链接,非常好 ... -
mootools版本的lightbox实现
2007-04-13 13:54 2037最近对mootools非常感兴趣。如别人评价它一样:轻盈,又不 ... -
mootools【七】- mootools的构造应用的基础设施Common.js
2007-04-13 16:52 2275正因为mootools是基于OO的思想,所以,在mootool ... -
mootools【八】 - Css查询支持之Dom.js
2007-04-14 00:10 2498mootools支持通过Css选择器语法来获取元素节点,以最少 ... -
mootools【九】- 工具类Hash和Color
2007-04-14 12:53 1638Hash数据结构,我们通常用来存放键值对。在java ... -
mootools【十】- window的扩展
2007-04-18 02:37 1579浏览器的window对象本身就提供了我们很多的 ... -
mootools【十一】- 多彩的开始
2007-04-22 14:23 1369mootools中集成了一些非常好用的界面组件 ... -
mootools【十二】- 多彩的开始2
2007-04-30 01:29 2029这些天有点事情比较忙,几天没更新了Blog了 ... -
mootools1.1正式发布了,新特性一览
2007-05-12 15:07 1357今天上了下mootools的主站,发现1.1 released ... -
mootools 1.11 中文参考文档(CHM和PDF格式)
2007-09-23 14:14 13702看着网上还没有完整的mootools的中文文档,所以自个花了点 ...
相关推荐
mootools框架【一】-Element篇: 方法完全解析 mootools框架【一】-Element篇: 高级应用举例 mootools框架【二】-Core篇: 方法完全解析 mootools框架【二】-Core篇: 主要方法测试实例 mootools框架【三】-Array篇: ...
#### 五、Element篇 Mootools提供了一套强大的DOM操作API,让开发者能够轻松地操作网页元素。 ##### DOM操作方法 - **addClass() / removeClass() / toggleClass()**:操作元素的CSS类。 - **setStyle() / getStyle...
下面将对mootools框架的Element篇进行详细的介绍。 Element篇 Element篇是mootools框架中最基础的部分,它封装了一些常用的DOM操作,例如操作元素、添加文本节点、创建DOM节点等。 $方法 $方法是mootools框架中...
这篇教程将深入讲解MooTools中的Element类及其相关方法。 1. **Element方法完全解析** - `$(selector)`:这个方法相当于`document.getElementById`,用于根据ID获取元素。例如,`$('myElement')`将返回ID为'...
本篇文章将深入探讨如何在MooTools框架下创建和使用弹出框。 **一、MooTools 的基础** MooTools遵循一个模块化的结构,通过引入核心库和其他可选模块,可以轻松扩展功能。在创建弹出框之前,我们需要确保页面已经...
总的来说,MooTools的Element篇提供了一套完善的DOM操作解决方案,它不仅封装了基本的DOM查找和操作,还引入了CSS选择器支持和一系列增强的DOM操作方法,提高了代码的可读性和开发效率。通过学习并熟练运用这些方法...
### Mootools框架详解——Element篇 Mootools是一个简洁且功能强大的JavaScript库,它旨在简化Web开发过程中涉及的DOM操作、Ajax交互以及动画效果等内容。本篇文章将深入解析Mootools框架中的Element部分,帮助读者...
本篇文章将深入探讨如何使用MooTools在同一页面上实现多种不同的日期选择效果。 首先,我们要理解MooTools的核心理念。MooTools基于Prototype设计模式,通过Class系统提供了面向对象的编程支持,同时它的Selector ...
本篇文章将深入探讨如何使用MooTools实现一个无限级的纵向下拉菜单。 ### 一、MooTools简介 MooTools是一个轻量级且模块化的JavaScript库,其设计目标是提供简洁的API和高效的代码。MooTools的核心理念是"Write ...
MooTools包含了`Element`, `Events`, `Fx`等核心模块。`Element`同样提供了对DOM元素的操作,而`Events`模块则处理事件绑定,`Fx`模块则包含了一系列动画效果。 在MooTools中,上面的动画效果可以这样实现: ```...
本篇将围绕"Mootools demo打包_mootools.svn.js_中文手册.zip"这一资源展开,深入探讨MooTools的核心概念、主要特性以及在实际开发中的应用。 1. **MooTools核心概念** - **模块化设计**:MooTools遵循CommonJS...
本篇将深入探讨如何使用MooTools实现动态菜单,并兼容Firefox和Internet Explorer 8。 1. **MooTools简介** MooTools是一个轻量级且模块化的JavaScript框架,其设计理念是提供简洁的API和强大的功能,以简化Web...
在本篇学习笔记中,我们将探讨MooTools的核心概念、主要功能以及如何在实际项目中应用。 1. **核心概念** - **类与对象**:MooTools基于原型的面向对象系统,允许开发者创建自定义类并实例化对象。通过`new Class`...
本篇文章将详细探讨如何利用MooTools 1.2.1版本实现拖拽效果。 **一、MooTools 1.2.1 概述** MooTools 是一个遵循MIT许可证的JavaScript框架,它的设计目标是提供模块化、可扩展和高性能的开发环境。1.2.1版本在...
在本篇文章中,我们将深入探讨MooTools的DOM操作,包括元素选择、创建、属性操作、事件处理以及动画效果。 首先,MooTools提供了多种方法来选取DOM元素。`$$`函数是MooTools中最常用的元素选择器,它可以接受CSS...
1. **MooTools的基本使用**:理解MooTools的核心概念,如Element对象、Selectors、事件处理等,这是构建任何MooTools应用的基础。 2. **图片加载与显示**:利用JavaScript动态加载图片,根据需求可能需要使用Ajax...
本篇文章将深入探讨如何利用 MooTools 实现 Tooltip 效果,以及它在实际应用中的价值。 1. **什么是 Tooltip 和 MooTools?** - Tooltip 是一种网页元素,当用户将鼠标悬停在某个元素上时,会显示一个包含附加信息...