如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。
今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择HTML元素的方法。在许多方面,这是MooTools用得最多最基本的。毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中。
基本的方法
$();
$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。
.getElement();
.getElement();扩展了$方法,可以让你简化你的选择操作。例如,你可以通过$方法来选择ID为”body_wrap“的元素,然后选 择第一个子节点。.getElement();只选择一个元素,如果有多个符合要求的元素则返回第一个元素。如果你给.getElement();方法一 个CSS类名作为参数,你就会得到第一个有这个CSS类名的元素,而不是函数所有元素的数组。要选择多个元素,则可以使用下面 的.getElements();方法。
-
- $('body_wrap').getElement('a');
-
-
- $('body_wrap').getElement('#special_anchor');
-
-
- $('body_wrap').getElement('.special_anchor_class');
- "body_wrap">
- "#">anchor
- "#">another anchor
- "special_anchor" href="#">special anchor
- "special_anchor_class" href="#">special anchor
- "special_anchor_class" href="#">another special anchor
$$();
$$函数可以可以让你快速选择多个元素,并组成一个数组(一种你可以操作、获取和以任何方式重新排序的列表)。你可以通过标签名(如div、a、img等)、或者ID或者是他们的各种组合来选择多个元素。就像一个读者指出的那样,你可以用$$做很多事情,远远超出我们这里所介绍的。
-
- $$('div');
-
-
- $$('#id_name', 'div');
.getElements();
.getElements();和.getElement();非常类似,不过它返回所有符合要求的元素,并组成一个数组。你可以想使用.getElement();方法那样使用.getElements();。
-
- $('body_wrap').getElements('a');
-
-
- $('body_wrap').getElements('.special_anchor_class');
- "body_wrap">
- "#">anchor
- "#">another anchor
- "special_anchor_class" href="#">special anchor
- "special_anchor_class" href="#">another special anchor
用运算符包含和排除结果
运算符
MooTools 1.2支持几种运算符,可以让你进一步精简你的选择操作。你可以在.getElements();中使用这些运算符来包含或者排除特定的结果。MooTools支持4种运算符,每一种都可以用来通过名字(name)选择一个input元素。
-
- $('body_wrap').getElements('input[name=phone_number]');
-
- $('body_wrap').getElements('input[name^=phone]');
-
- $('body_wrap').getElements('input[name$=number]');
-
- $('body_wrap').getElements('input[name!=address]');
- "body_wrap">
- "address" type="text" />
- "phone_number" type="text" />
(Fdream注:input在这里只是作为一个例子,你同样可以使用这种方式选择其他元素,比如div、a等等。)
要使用运算符,你必须首先指定元素的类型(比如这里的input),然后指定你要过滤的属性(比如这里的name),再加上你的 运算符,最后选择你的过滤字符串。
基于元素顺序的选择器
even(偶数选择)
通过这个简单的选择器,你可以选择序号为偶数的元素。注意:这个选择器从0开始计数,因此第一个元素是偶数序的。
odd(奇数选择)
和even一样,只不过它选择序号为奇数的元素。
.getParent();
通过.getParent();方法,你可以得到一个元素的父元素(parent)。
-
- $('child_id').getParent();
- "parent_id">
- "child_id">Even
分享到:
相关推荐
一周学会Mootools 1.4中文教程(1)Dom选择器
如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——... $函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。 参考代码: 代码如下:// 选择ID为”body_wrap“的元素 $(‘body_wrap’);
DOM选择器 Class(类) 特效之滑动登录框 性感的滑动Menu Extending Objects and Classes with mootools Ajax Tutorial Drop Menu example Nav Bar iFishEye(模仿苹果的dock) Phatfusion(可伸缩的图片) TreeMenu(树...
和选择器类似,事件也是建立互动界面的一个重要部分。一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果。先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件。 左键单击事件 左键单击事件是...
在上一篇教程——《Mootools 1.2教程(2)——DOM选择器》中,我们介绍了一下选择器,其中有很多方法就会返回数组(一个你可以对其中内容进行多种操作的特殊列表)。
css2.1全部选择器和属性值速查.pdf css2速查表.pdf CSS2属性含义速查.pdf css快速参考向导.pdf css速记表.pdf HTML4字符标识.pdf HTML 速查表.pdf HTML 颜色表.pdf HTML速查.pdf JavaScript DOM 结构速查手册.pdf ...
Average improvement: 867% <br>下表为jQuery1.1.3与常用的一些JS库选择器的对比: Browser Prototype jQuery Mootools Ext Dojo IE 6 1476ms 661ms 1238ms 672ms 738ms Firefox 2 219ms 567ms ...
jQuery 1.3.2(2009年2月):这次小版本升级进一步提升了库的性能,例如改进了:visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外,也支持查询的元素按文档顺序返回。 jQuery 1.4(2010年1月14号...
所有代码都是与库无关的,并且主要由与DOM不直接相关的辅助方法组成,该库的目的不是代替Dojo,jQuery,YUI,Mootools等,而是为常见的问题提供模块化解决方案大多数人都无法解决。 将其视为跨浏览器JavaScript标准...