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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
动态添加js事件实现代码
Mar 12 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
js实现验证码干扰(动态)
Feb 23 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/10/09 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
13个PHP函数超实用
2015/10/21 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
微信小程序文章详情页面实现代码
2018/09/10 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
vue+element tabs选项卡分页效果
2020/06/29 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
Python上下文管理器和with块详解
2017/09/09 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
Linux常见面试题
2013/03/18 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
大四本科生的自我评价
2013/12/30 职场文书
项目采购员岗位职责
2014/04/15 职场文书
师德承诺书
2015/01/20 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
运动会广播稿300字
2015/08/19 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python