mootools框架【一】-Element篇:方法完全解析

--内容:封装一些常用的DOM操作

(1).直接可以在xhtml中进行操作元素.而不用嵌套在<script>标签中使用javascript操作.

(2).用$代替javascript中document.getElmentById方法.操作元素只需要使用$('myElement')即可.

(3).增加了很多方便实用的方法,这些方法使对元素的各种复杂的操作变得容易,摈弃(应该是封装)了原来繁琐的DOM操作.以appendText为例:

方法:appendText

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

例子:

div id="myDiv1">hello </div>
$('myDiv1').appendText('world');
//结果为:
<div id="myDiv1">hello world</div>

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

创建DOM节点

例子:var myInput=new Element('input');

1.方法:$

作用:按照id取元素,如同document.getElmentById来获取的元素

即: 这里的$相当于document.getElmentById,两者功能是相同的.

例子:

//获取元素
var myDiv=$("myDiv");
//将用getElementById获取的元素进行扩展成使用$方法获取的元素
//这样可以具备一些特殊的方法
var mydiv_noextend=document.getElementById("mydiv");
var mydiv_extended = $(mydiv_noextend);

2.方法:$$

作用:通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的

支持)

例子:

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

----------------------------------------Element扩展方法------------------------------------

3.方法:inject

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

(after)。

例子:

<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
$('myDiv3').inject($('myDiv1'),'before'); //把myDiv3插入到myDiv1之前
//结果:
<div id="myDiv3">ccc</div>
<div id="myDiv2">bbb</div>
<div id="myDiv1">aaa</div>

4.方法:injectBefore

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

inject方法)

例子:

<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
$('myDiv3').injectBefore($('myDiv1'));

时间: 2016-04-22

mootools框架【一】-Element篇:方法完全解析的相关文章

mootools框架【一】-Element篇:高级应用举例

前台: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

thinkPHP5.0框架配置格式、加载解析与读取方法

本文实例讲述了thinkPHP5.0框架配置格式.加载解析与读取方法.分享给大家供大家参考,具体如下: ThinkPHP支持多种格式的配置格式,但最终都是解析为PHP数组的方式. PHP数组定义 返回PHP数组的方式是默认的配置定义格式,例如: //项目配置文件 return [ // 默认模块名 'default_module' => 'index', // 默认控制器名 'default_controller' => 'Index', // 默认操作名 'default_action' =

iOS对UIViewController生命周期和属性方法的解析

iOS对UIViewController生命周期和属性方法的解析 一.引言         作为MVC设计模式中的C,Controller一直扮演着项目开发中最重要的角色,它是视图和数据的桥梁,通过它的管理,将数据有条有理的展示在我们的View层上.iOS中的UIViewController是UIKit框架中最基本的一个类.从第一个UI视图到复杂完整项目,都离不开UIViewController作为基础.基于UIViewController的封装和扩展,也能够出色的完成各种复杂界面逻辑.这篇博客

OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据

OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的分析,探索OkHttp这个框架的使用和封装 一.追其原理 Android系统提供了两种HTTP通信类 HttpURLConnection HttpClient Google推荐使用HttpURLConnection,这个没必要多说,事实上,我这篇写的应该算是比较晚了,很多优秀的博文都已经提出了这些观

[WebKit] JavaScriptCore解析--基础篇(四) 页面解析与JavaScript元素的执行

很多地方都已经介绍了JavaScript在浏览器是如何被执行的,这里介绍一下WebKit是如何实现的.主要涉及JS的async,defer及普通脚本的解析与执行过程的代码实现. 1. 概要说明 先概要说明一下浏览器如何执行JavaScript的. 首先浏览器的页面解析器(Document Parser)遇到<script>就会发起下载(脚本内容在页面内的就不用下载了).然后针对不同情况执行的方式有所不同:   . async (在script标签中启用了async属性)       这是异步执

CI框架集成Smarty的方法分析_php实例

本文实例讲述了CI框架集成Smarty的方法.分享给大家供大家参考,具体如下: 因为CI自带的模板功能不是很方便,所以大家普遍采用集成Smarty的方式来弥补CI这方面的不足. 本人在网上看了不少CI集成Smarty的教程,包括咱们CI论坛里面的一个精华帖子 http://codeigniter.org.cn/forums/forum.php?mod=viewthread&tid=10345. 自己对比了一下这些教程,我认为下面这个方案是所有里面最优秀的,强烈推荐给大家(当然也是我自己采取的方案

java object 之clone方法全面解析_java

 1 protected native Object clone() throws CloneNotSupportedException;  1.方法由native关键字修饰 java中的native关键字表示这个方法是个本地方法,[java native说明].而且native修饰的方法执行效率比非native修饰的高. 2.方法由protected修饰 一个类在覆盖clone()方法时候,需要修改成public访问修饰符,这样才能保证其他所有的类都能够访问这个类的这个方法. 3.方法抛出Cl

你中招没?Photoshop 9个错误的使用方法详细解析

  对于一些Photoshop的初学者,往往会有许多错误的使用方法,甚至是一些老手,都很有可能存在一些使用上的错误习惯.在这里,小编就给大家带来了9个使用Photoshop时应该注意的地方.同时,如果你也知道其它应该注意的地方的话,不妨也和大家分享一下吧. 1.使用错误的图像颜色模式 有时候,当你在Photoshop上看到的照片偏灰时,那么很有可能是因为转换了图片的颜色模式.打开图像>模式,看一下选择了哪个颜色模式,正确的应该是在RGB模式.在大多数的情况下,需要用到的都是RGB模式,就像相机拍

javaee-java框架spring的execute方法的区别

问题描述 java框架spring的execute方法的区别 spring的execute(String callString CallableStatementCallback action)和execute(PreparedStatementCreator psc PreparedStatementCallback action)的区别是什么,用法上有哪些特别之处呢?在官方文档可以找到吗,我怎么都找不出区别来!还有,用这个两个方法调用存储过程时,如果有多个out参数,又该如何返回呢? 解决方