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 相关文章推荐
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
vue构建单页面应用实战
Apr 10 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 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
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
光盘行动倡议书
2014/02/02 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
《日月潭》教学反思
2016/02/20 职场文书