Mootools 1.2教程(2) DOM选择器


Posted in Javascript onSeptember 14, 2009

如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。
今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择HTML元素的方法。在许多方面,这是MooTools用得最多最基本的。毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中。
基本的方法
$();
$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。
参考代码:

// 选择ID为”body_wrap“的元素 
$('body_wrap');

参考代码:
<div id="body_wrap"> 
</div>

.getElement();
.getElement();扩展了$方法,可以让你简化你的选择操作。例如,你可以通过$方法来选择ID为”body_wrap“的元素,然后选择第一个子节点。.getElement();只选择一个元素,如果有多个符合要求的元素则返回第一个元素。如果你给.getElement();方法一个CSS类名作为参数,你就会得到第一个有这个CSS类名的元素,而不是函数所有元素的数组。要选择多个元素,则可以使用下面的.getElements();方法。
参考代码:
// 选择ID为”body_wrap“的元素下面的第一个链接 
$('body_wrap').getElement('a'); 
// 选择ID为”body_wrap“的元素下面的ID为”special_anchor“的元素 
$('body_wrap').getElement('#special_anchor'); 
// 选择ID为”body_wrap“的元素下面第一个CSS类名为”special_anchor_class“的元素 
$('body_wrap').getElement('.special_anchor_class');

参考代码:
<div id="body_wrap"> 
<a href="#">anchor</a> 
<a href="#">another anchor</a> 
<a id="special_anchor" href="#">special anchor</a> 
<a class="special_anchor_class" href="#">special anchor</a> 
<a class="special_anchor_class" href="#">another special anchor</a> 
</div>

$$();
$$函数可以可以让你快速选择多个元素,并组成一个数组(一种你可以操作、获取和以任何方式重新排序的列表)。你可以通过标签名(如div、a、img等)、或者ID或者是他们的各种组合来选择多个元素。就像一个读者指出的那样,你可以用$$做很多事情,远远超出我们这里所介绍的。
参考代码:
// 选择这个页面中的所有div 
$$('div'); 
// 选择ID为”id_name的元素和所有的div 
$$('#id_name', 'div');

参考代码:
<div> 
<div>a div</div> 
<span id="id_name">a span</span> 
</div>

.getElements();
.getElements();和.getElement();非常类似,不过它返回所有符合要求的元素,并组成一个数组。你可以想使用.getElement();方法那样使用.getElements();。
参考代码:
// 选择ID为”body_wrap“的元素下面的所有链接 
$('body_wrap').getElements('a'); 
// 选择ID为”body_wrap“的元素下面的所有CSS类名为”special_anchor_class“的子元素 
$('body_wrap').getElements('.special_anchor_class');

参考代码:
<div id="body_wrap"> 
<a href="#">anchor</a> 
<a href="#">another anchor</a> 
<a class="special_anchor_class" href="#">special anchor</a> 
<a class="special_anchor_class" href="#">another special anchor</a> 
</div>

用运算符包含和排除结果
运算符
MooTools 1.2支持几种运算符,可以让你进一步精简你的选择操作。你可以在.getElements();中使用这些运算符来包含或者排除特定的结果。MooTools支持4种运算符,每一种都可以用来通过名字(name)选择一个input元素。
= : 等于
参考代码:
//选择name为”phone_number“的input元素
$('body_wrap').getElements('input[name=phone_number]');
^= : 以……开始
参考代码:
// 选择name以”phone“开头的input元素
$('body_wrap').getElements('input[name^=phone]');
$= : 以……结束
参考代码:
// 选择name以数字(number)结束的input元素
$('body_wrap').getElements('input[name$=number]');
!= : 不等于
参考代码:
// 选择名字不等于”address“的input元素
$('body_wrap').getElements('input[name!=address]');
参考代码:
<div id="body_wrap">
<input name="address" type="text" />
<input name="phone_number" type="text" /> <!-- 上面的所有示例代码都将选中这个元素 -->
</div>
(Fdream注:input在这里只是作为一个例子,你同样可以使用这种方式选择其他元素,比如div、a等等。)
要使用运算符,你必须首先指定元素的类型(比如这里的input),然后指定你要过滤的属性(比如这里的name),再加上你的 运算符,最后选择你的过滤字符串。
基于元素顺序的选择器
even(偶数选择)
通过这个简单的选择器,你可以选择序号为偶数的元素。注意:这个选择器从0开始计数,因此第一个元素是偶数序的。
参考代码:
// 选择序号为偶数的div
$$('div:even');
参考代码:
<div>Even</div><!-- 上面的代码将选中这个元素 -->
<div>Odd</div>
<div>Even</div><!-- 上面的代码将选中这个元素 -->
<div>Odd</div>
odd(奇数选择)
和even一样,只不过它选择序号为奇数的元素。
参考代码:
// 选择所有序号为奇数的div
$$('div:odd');
参考代码:
<div>Even</div>
<div>Odd</div><!-- 上面的代码将选中这个元素 -->
<div>Even</div>
<div>Odd</div><!-- 上面的代码将选中这个元素 -->
.getParent();
通过.getParent();方法,你可以得到一个元素的父元素(parent)。
参考代码:
// 选择ID为”child_id“的元素的父元素
$('child_id').getParent();
参考代码:
<div id="parent_id"> <!-- 上面的脚本将返回这个元素-->
<div id="child_id">Even</div>
</div>
代码举例
任何MooTools UI开发都是从选择器开始的。这里是一些非常简单的例子,演示了怎么去使用选择器操作DOM元素。
参考代码:
// 设置所有span的背景颜色为#eee
$$('span').setStyle('background-color', '#eee');
// 设置所有序号为奇数的span的背景色为#eee
$$('span:odd').setStyle('background-color', '#eee');
// 设置ID为body_wrap的元素下的所有CSS类名为.middle_spans的span的背景色为#eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
参考代码:
<div id="body_wrap"> 
<span>Even</span> 
<span class="middle_spans">Odd</span> 
<span class="middle_spans">Even</span> 
<span>Odd</span> 
</div>

下载zip包并尝试一下
这个zip包中包含了一个简单的html文件、MooTools 1.2核心库、一个外部js文件和上面你所看到的例子。

更多学习……

这并不意味着这是MooTools 1.2的选择器的全部功能列表,这仅仅只是帮助你入门,告诉你MooTools给你提供了什么功能。要学习有关选择器的更多东西,请参考下面的文档:

  • 这里有非常多的有关元素(Element)选择器的文档
  • 顺便也可以看一下选择器(Selectors)

MooTools Blog上有关$$选择器的文章

这是mootools.net上非常好的一篇有关$$选择器和介绍它的变化多端的blog文章。通过这个选择器你可以做多到你无法相信的事情,这篇文章很值得一读。

Slickspeed选择器

这里有别人针对MooTools做的一个实验,测量不同的库在选择元素时到底有多快。这对于它本身来说很cool,不过这些选择器的例子非常有价值。这里所有的选择器特性都可以通过$$方法实现。

W3C选择器

MooTools也可以让你利用伪选择器的力量(就像上面的Slickspeed所证明的)。这里是W3C的一篇关于选择器的文章,一定值得读一遍(如果只有选择器的列表对你有用的话)。我不确定MooTools的$$选择器是不是支持这个页面上的每一个单独选择器,但是至少是绝大部分。欢迎大家告诉我有关这方面的更多消息。

Javascript 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
MooTools 1.2介绍
Sep 14 #Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 #Javascript
JavaScript 函数调用规则
Sep 14 #Javascript
prototype与jquery下Ajax实现的差别
Sep 13 #Javascript
JS 参数传递的实际应用代码分析
Sep 13 #Javascript
javascript类继承机制的原理分析
Sep 12 #Javascript
javascript 类定义的4种方法
Sep 12 #Javascript
You might like
数字转英文
2006/12/06 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
简单JS代码压缩器
2006/10/12 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
Python中的下划线详解
2015/06/24 Python
python感知机实现代码
2019/01/18 Python
基于python实现高速视频传输程序
2019/05/05 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
什么是类的返射机制
2016/02/06 面试题
顶碗少年教学反思
2014/02/21 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技