`
zarknight
  • 浏览: 147912 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mootools【五】 - Element篇

阅读更多

Ajax开发中,做的最多的就是对DOM的操作, 增删节点,设置样式等等等等,如果按照常规的javascript开发的话,工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫,对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题),让我们的开发事半功倍。

mootools也提供了一套非常出色的解决方案,并且更OO。

首先,之前,通常我们创建DOM节点,都使用document.createElement()方法,而我们看mootools式的创建方法:

js 代码
 
  1. var myInput = new Element('input');  

非常的优雅啊。

 

方法:  $

美元,又见美元!

$基本上成了javascript框架中的标志性建筑了,短小精悍的语法使我们的代码看起来舒服不少,也使我们的js文件瘦了下身。

时下,各大javascript框架中都会提供$这个方法,基本上它都有按照id来获取DOM元素的功能,但各个框架在具体诠释它的时候各有不同的手法,功能的强弱上也不一样。比如prototype.js中的$可以根据给出的一个或多个id来获取这些DOM元素,而jQuery里的$更是非常强,可以按照CSS选择器的语法来获取DOM元素(其实mootools和prototype也是可以的,只不过是$$这个方法)。

这是mootools中的$()的最常用用法,它返回id为my_div的元素,并且这个元素被加上了所有mootools所进行的扩展。

js 代码
 
  1. var mydiv = $('my_div');  

如果你使用document.getElmentById来获取的元素,则此时这个元素将没有包含mootools的任何扩展,你可以把这个元素对象作为参数调用$方法,之后返回的元素将被加上mootools的扩展。

js 代码
 
  1. var mydiv_noextend = document.getElementById('my_div');  
  2.    
  3. var mydiv_extended = $(mydiv_noextend);  

 

方法: $$

功能:通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的支持)

js 代码
 
  1. $$('a');                       //获取页面上所有超链接标签对象  
  2. $$('a','b');                  //获取页面上所有超链接标签和粗体标签  
  3. $$('#my_div');                //获取id为my_div的元素  
  4. $$('#my_div a.myClass');      //获取id为my_div的元素子元素,并且这些自元素是的所有class="myClass"的标签  

 

=================================Element扩展方法=====================================

方法: inject

作用:可以用来把当前元素插入到指定元素之前(before),之中(inside),之后(after)。

 
java 代码
 
  1. $('myDiv3').inject($('myDiv1'),'before');      //把myDiv3插入到myDiv1之前  

 

方法: injectBefore

作用:可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的inject方法)

js 代码
  1. $('myDiv3').injectBefore($('myDiv1'));   

 

方法:injectAfter

作用:可以用来把当前元素插入到指定元素之后 (即相当于参数为'after'的inject方法)

js 代码
  1. $('myDiv3').injectAfter($('myDiv1'));   

 

方法:injectInside

作用:可以用来把当前元素插入到指定元素之中 (即相当于参数为'inside'的inject方法)

js 代码
  1. $('myDiv3').injectInside($('myDiv1'));   

 

方法:adopt

作用:可以在当前元素中插入指定元素(参数可以是元素id,元素引用,html元素tag名)

js 代码
  1. $('myDiv').adopt($('myDiv1'));   
  2. $('myDiv').adopt('myDiv1');   
  3. $('myDiv').adopt('button');   

 

方法:remove

作用:删除元素

js 代码
  1. $('myDiv').remove();  

 

 

方法:clone

参数列表:

contents - 是否连带节点的内容进行复制(deep clone),如果不指定,则连带。

作用:复制元素

js 代码
 
  1. $('myDiv').clone();       
  2. $('myDiv').clone(false);     //只复制myDiv本身,不复制其content和子元素  

 

方法:replaceWith

作用:用其他元素替换当前元素

js 代码
 
  1. var a = new Element('button');  
  2. a.value = 'test';  
  3. $('myDiv1').replaceWith($(a));  

 

方法:appendText

作用:向元素添加文本节点

js 代码
  1. $('myDiv1').appendText('world');  

 

方法:hasClass

作用:判断元素的class属性中是否包含指定的样式名

js 代码
 
  1. var x = $('myDiv1').hasClass('clazz_1');    

 

方法:addClass

作用:向指定元素上添加样式class

js 代码
  1. $('myDiv1').addClass('clazz_1');  

 

方法:removeClass

作用:在指定元素上删除指定的样式class

js 代码
  1. $('myDiv1').removeClass('clazz_1');  

 

方法:toggleClass

作用:在addClass和removeClass的功能之间切换

 

方法:setStyle

作用:向元素设置一个style属性

js 代码
  1. $('myDiv').setStyle('width','100px');  

 

方法:setStyles

作用:向元素设置多个style属性

js 代码
  1. $('myDiv').setStyles({    
  2.     border: '1px solid #000',    
  3.    width: '300px',    
  4.     height: '400px'    
  5. });    
  6.      
  7. 或者(不推荐在这种方式下设置opacity属性):    
  8.      
  9. $('myDiv').setStyles('border: 1px solid #000; width: 300px; height: 400px;');    

方法:setOpacity

作用:设置元素的透明度

js 代码
 
  1. $('myDiv').setOpacity(0.5);       //透明度设置为50%  

 

方法:getStyle

作用:获取style中指定属性的值

js 代码
 
  1. var w = $('myDiv').getStyle('width');   

 

方法:addEvent

作用:为元素增加事件监听器

js 代码
 
  1. $('myDiv').addEvent('click', function(){  
  2.        alert('haha,clicked!');  
  3. });  

 

方法:addEvents

作用:为元素增加多个事件监听器(不过,在mootools1.0.0版本中,这个方法是有BUG的,推荐不要使用;mootools1.1开发版中,已经修复了BUG)

js 代码
 
  1. $('myBtn').addEvents({  
  2.     'click': function(e){alert('clicked!!!');},  
  3.     'mouseout': function(e){alert('mouseouted!!!');}  
  4.  });  

 

方法:removeEvent

作用:从元素上删除指定的监听器方法

js 代码
 
  1. var fa = function(e){alert('aaaaaaaaaaaaaa');};  
  2. var fb = function(e){alert('bbbbbbbbbbbbbb');};  
  3.   
  4. $('myBtn').addEvent('click',fa);  
  5. $('myBtn').addEvent('click',fb);  
  6.   
  7. $('myBtn').removeEvent('click',fa);  

 

方法:removeEvents

作用:从元素上删除指定事件的监听器,如果不指定事件,则将删除所有事件的监听器(和addEvents方法一样,该方法再1.0.0版本中也存在BUG,在1.1开发版本中已修复)

js 代码
 
  1. var fa = function(e){alert('aaaaaaaaaaaaaa');};  
  2. var fb = function(e){alert('bbbbbbbbbbbbbb');};  
  3.   
  4. $('myBtn').addEvent('click',fa);  
  5. $('myBtn').addEvent('click',fb);  
  6.   
  7. $('myBtn').removeEvents('click');  

 

方法:fireEvent

作用:触发元素的指定事件上的所有监听器方法

js 代码
 
  1. var fa = function(e){alert('aaaaaaaaaaaaaa');};  
  2. var fb = function(e){alert('bbbbbbbbbbbbbb');};  
  3.   
  4. $('myBtn').addEvent('click',fa);  
  5. $('myBtn').addEvent('click',fb);  
  6.   
  7. $('myBtn').fireEvent('click');      //fa和fb将立即被执行  

 

 方法:getFirst

作用:获取当前元素的第一个子元素节点

js 代码
 
  1. var f = $('myDiv').getFirst();  

 

 方法:getLast

作用:获取当前元素的最后一个子元素节点

js 代码
 
  1. var l = $('myDiv').getLast();  

 

方法:getParent

作用:获取当前元素的父元素节点

js 代码
 
  1. var par = $('first').getParent();  

 

方法:getChildren

作用:获取当前元素所有子元素节点

js 代码
 
  1. var cs = $('myDiv').getChildren();  

 

方法:setProperty

作用:设置元素的属性

js 代码
  1. $('myImage').setProperty('src', 'whatever.gif');  

 

方法:setProperties

作用:设置元素的多个属性

js 代码
  1. $('myElement').setProperties({  
  2.    src: 'whatever.gif',  
  3.    alt:  'whatever dude'  
  4. });  

 

 方法:setHTML

作用:相当于设置元素的innerHTML

js 代码
  1. $('myElement').setHTML(newHTML);  

 

方法:getProperty

作用:获取元素的指定属性

js 代码
  1. $('myImage').getProperty('src')  

 

方法:getTag

作用:获取HTML标签元素的标签名称

js 代码
 
  1. $('myImage').getTag();         //img  

 

方法:scrollTo

作用:相当于把滚动条滚动到指定的状态(窗口或元素在overflow的情况下)

js 代码
  1. window.scrollTo(0,200);  

 

方法:getValue

作用:获取tag为textarea, select 或 input这三个元素的value属性值。但select多选状态下取值不支持。

    js 代码


方法:getSizze

作用:获取元素对象当前的size/scoll值

返回值格式如下:

{
   'scroll': {'x': 100,  'y': 100},
   'size':   {'x': 200,  'y': 400},
   'scrollSize': {'x': 300,  'y': 500}
  }

js 代码
  1. $('myElement').getSize();  

 

方法:getPosition

作用:获取元素的offset位置

返回值格式:

{x: 100, y:500}

js 代码
  1. $('element').getPosition();  

 

方法:getTop

作用:相当与getPosition返回的y值

js 代码
  1. $('element').getTop();  

 

方法:getLeft

作用:相当与getPosition返回的x值

js 代码
  1. $('element').getLeft();  

 

方法:getCoordinates

作用:获取元素的当前width, height, left, right, top, bottom值

返回值格式:

{
   width:  200,
   height: 300,
   left:       100,
   top:       50,
   right:     300,
   bottom: 350
  }

js 代码
 
  1. var myValues = $('myElement').getCoordinates();  

 

 

mootools提供了一个“垃圾收集器”Garbage。

一般情况下,使用$方法获取到的对象都会被这个“垃圾收集器”登记下来,然后在窗体关闭(unload)的时候,销毁这些登记过的对象。也可以调用Garbage.collect方法来登记,然后在你必要的时候调用Garbage.trash方法来销毁。

 

 



 

分享到:
评论

相关推荐

    mootools详细教程

    mootools框架【一】-Element篇: 方法完全解析 mootools框架【一】-Element篇: 高级应用举例 mootools框架【二】-Core篇: 方法完全解析 mootools框架【二】-Core篇: 主要方法测试实例 mootools框架【三】-Array篇: ...

    mootools-中文教程

    #### 五、Element篇 Mootools提供了一套强大的DOM操作API,让开发者能够轻松地操作网页元素。 ##### DOM操作方法 - **addClass() / removeClass() / toggleClass()**:操作元素的CSS类。 - **setStyle() / getStyle...

    mootools框架入门教程

    下面将对mootools框架的Element篇进行详细的介绍。 Element篇 Element篇是mootools框架中最基础的部分,它封装了一些常用的DOM操作,例如操作元素、添加文本节点、创建DOM节点等。 $方法 $方法是mootools框架中...

    mootools教程

    这篇教程将深入讲解MooTools中的Element类及其相关方法。 1. **Element方法完全解析** - `$(selector)`:这个方法相当于`document.getElementById`,用于根据ID获取元素。例如,`$('myElement')`将返回ID为'...

    mootools 弹出框

    本篇文章将深入探讨如何在MooTools框架下创建和使用弹出框。 **一、MooTools 的基础** MooTools遵循一个模块化的结构,通过引入核心库和其他可选模块,可以轻松扩展功能。在创建弹出框之前,我们需要确保页面已经...

    mootools中文教程.doc

    总的来说,MooTools的Element篇提供了一套完善的DOM操作解决方案,它不仅封装了基本的DOM查找和操作,还引入了CSS选择器支持和一系列增强的DOM操作方法,提高了代码的可读性和开发效率。通过学习并熟练运用这些方法...

    mootools详细教程pdf版.pdf

    ### Mootools框架详解——Element篇 Mootools是一个简洁且功能强大的JavaScript库,它旨在简化Web开发过程中涉及的DOM操作、Ajax交互以及动画效果等内容。本篇文章将深入解析Mootools框架中的Element部分,帮助读者...

    mootools实现同页面不同日期选择效果

    本篇文章将深入探讨如何使用MooTools在同一页面上实现多种不同的日期选择效果。 首先,我们要理解MooTools的核心理念。MooTools基于Prototype设计模式,通过Class系统提供了面向对象的编程支持,同时它的Selector ...

    mootools版无限级纵向下拉菜单

    本篇文章将深入探讨如何使用MooTools实现一个无限级的纵向下拉菜单。 ### 一、MooTools简介 MooTools是一个轻量级且模块化的JavaScript库,其设计目标是提供简洁的API和高效的代码。MooTools的核心理念是"Write ...

    prototype1.6和mootools1.2.3在本人目前工作中比较常用的方法比较

    MooTools包含了`Element`, `Events`, `Fx`等核心模块。`Element`同样提供了对DOM元素的操作,而`Events`模块则处理事件绑定,`Fx`模块则包含了一系列动画效果。 在MooTools中,上面的动画效果可以这样实现: ```...

    mootools demo打包_mootools.svn.js_中文手册.zip

    本篇将围绕"Mootools demo打包_mootools.svn.js_中文手册.zip"这一资源展开,深入探讨MooTools的核心概念、主要特性以及在实际开发中的应用。 1. **MooTools核心概念** - **模块化设计**:MooTools遵循CommonJS...

    mootools实现的动态菜单

    本篇将深入探讨如何使用MooTools实现动态菜单,并兼容Firefox和Internet Explorer 8。 1. **MooTools简介** MooTools是一个轻量级且模块化的JavaScript框架,其设计理念是提供简洁的API和强大的功能,以简化Web...

    MooTools学习笔记(一)

    在本篇学习笔记中,我们将探讨MooTools的核心概念、主要功能以及如何在实际项目中应用。 1. **核心概念** - **类与对象**:MooTools基于原型的面向对象系统,允许开发者创建自定义类并实例化对象。通过`new Class`...

    mootools1.2.1 drag and drop 拖拽

    本篇文章将详细探讨如何利用MooTools 1.2.1版本实现拖拽效果。 **一、MooTools 1.2.1 概述** MooTools 是一个遵循MIT许可证的JavaScript框架,它的设计目标是提供模块化、可扩展和高性能的开发环境。1.2.1版本在...

    (二) mootools的DOM操作

    在本篇文章中,我们将深入探讨MooTools的DOM操作,包括元素选择、创建、属性操作、事件处理以及动画效果。 首先,MooTools提供了多种方法来选取DOM元素。`$$`函数是MooTools中最常用的元素选择器,它可以接受CSS...

    mootools做QQ图片查看

    1. **MooTools的基本使用**:理解MooTools的核心概念,如Element对象、Selectors、事件处理等,这是构建任何MooTools应用的基础。 2. **图片加载与显示**:利用JavaScript动态加载图片,根据需求可能需要使用Ajax...

    ToolTip_mootools

    本篇文章将深入探讨如何利用 MooTools 实现 Tooltip 效果,以及它在实际应用中的价值。 1. **什么是 Tooltip 和 MooTools?** - Tooltip 是一种网页元素,当用户将鼠标悬停在某个元素上时,会显示一个包含附加信息...

Global site tag (gtag.js) - Google Analytics