当前位置: 首页 > 图文教程 > 网络编程 > Javascript > MooTools教程(2):DOM选择器

Javascript
动态改变图片尺寸（一）
JavaScript＋PHP 应用一：网页制作中双下拉菜单的动态实现
JavaScript + PHP 应用二：网页设计中树形菜单的动态实现
在Javascript中为String对象添加trim,ltrim,rtrim方法
纯JavaScript时钟
网页之定时器详解
为网页添加活动的背景音乐
Javascript Game
实用的检测分辨率的程序代码
【推荐】一个非常漂亮的列表框
绝对精彩：在网页里做类似window右键的弹出式菜单
怎样使网页中的元素可编辑??
JavaScript和Java的区别
怎样编写IE和NN6通用的闪烁(blank)效果
关于如何动态地在同一页面实现两个 < select > 互传 (s1 <==> s2)
ＣＯＯＫＩＥ欺骗
连串英文自动换行的方法
JavaScript中的正则表达式(1)
JavaScript中的正则表达式(2)
JavaScript窗口功能指南之定制新窗口

No. « 1 2 3 4 »

技术文章搜索

关键字

Javascript 中的 MooTools教程(2):DOM选择器

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 64 ::
收藏到网摘: n/a

今天开始本系列教程的第2讲。在这一讲中，我们会学习几种选择HTML元素的方法。在许多方面，这是MooTools用得最多最基本的。毕竟，要创建一个基于HTML元素的交互性用户体验，你必须首先把它们掌握在手中。

基本的方法

$();

$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。

参考代码： [复制代码] [保存代码]
  1. // 选择ID为”body_wrap“的元素
  2. $('body_wrap');
参考代码： [复制代码] [保存代码]
  1. <div id="body_wrap">
  2. </div>

.getElement();

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

参考代码： [复制代码] [保存代码]
  1. // 选择ID为”body_wrap“的元素下面的第一个链接
  2. $('body_wrap').getElement('a'); 
  3.  
  4. // 选择ID为”body_wrap“的元素下面的ID为”special_anchor“的元素
  5. $('body_wrap').getElement('#special_anchor'); 
  6.  
  7. // 选择ID为”body_wrap“的元素下面第一个CSS类名为”special_anchor_class“的元素
  8. $('body_wrap').getElement('.special_anchor_class');
参考代码： [复制代码] [保存代码]
  1. <div id="body_wrap">
  2.         <a href="#">anchor</a>
  3.         <a href="#">another anchor</a>
  4.         <a id="special_anchor" href="#">special anchor</a>
  5.         <a class="special_anchor_class" href="#">special anchor</a>
  6.         <a class="special_anchor_class" href="#">another special anchor</a>
  7. </div>

$$();

$$函数可以可以让你快速选择多个元素，并组成一个数组（一种你可以操作、获取和以任何方式重新排序的列表）。你可以通过标签名（如div、a、img等）、或者ID或者是他们的各种组合来选择多个元素。就像一个读者指出的那样，你可以用$$做很多事情，远远超出我们这里所介绍的。

参考代码： [复制代码] [保存代码]
  1. // 选择这个页面中的所有div
  2. $$('div'); 
  3.  
  4. // 选择ID为”id_name的元素和所有的div
  5. $$('#id_name', 'div');
参考代码： [复制代码] [保存代码]
  1. <div>
  2.     <div>a div</div>
  3.     <span id="id_name">a span</span>
  4. </div>

.getElements();

.getElements();和.getElement();非常类似，不过它返回所有符合要求的元素，并组成一个数组。你可以想使用.getElement();方法那样使用.getElements();。

参考代码： [复制代码] [保存代码]
  1. // 选择ID为”body_wrap“的元素下面的所有链接
  2. $('body_wrap').getElements('a'); 
  3.  
  4. // 选择ID为”body_wrap“的元素下面的所有CSS类名为”special_anchor_class“的子元素
  5. $('body_wrap').getElements('.special_anchor_class');
参考代码： [复制代码] [保存代码]
  1. <div id="body_wrap">
  2.         <a href="#">anchor</a>
  3.         <a href="#">another anchor</a>
  4.         <a class="special_anchor_class" href="#">special anchor</a>
  5.         <a class="special_anchor_class" href="#">another special anchor</a>
  6. </div>

用运算符包含和排除结果

运算符

MooTools 1.2支持几种运算符，可以让你进一步精简你的选择操作。你可以在.getElements();中使用这些运算符来包含或者排除特定的结果。MooTools支持4种运算符，每一种都可以用来通过名字（name）选择一个input元素。

  • = : 等于
参考代码： [复制代码] [保存代码]
  1. //选择name为”phone_number“的input元素
  2. $('body_wrap').getElements('input[name=phone_number]');
     
参考代码： [复制代码] [保存代码]
  1. // 选择name以”phone“开头的input元素
  2. $('body_wrap').getElements('input[name^=phone]');
  • $= : 以……结束
参考代码： [复制代码] [保存代码]
  1. // 选择name以数字（number）结束的input元素
  2. $('body_wrap').getElements('input[name$=number]');
  • != : 不等于
参考代码： [复制代码] [保存代码]
  1. // 选择名字不等于”address“的input元素
  2. $('body_wrap').getElements('input[name!=address]');
参考代码： [复制代码] [保存代码]
  1. <div id="body_wrap">
  2.     <input name="address" type="text" />
  3.     <input name="phone_number" type="text" /> <!-- 上面的所有示例代码都将选中这个元素 -->
  4. </div>

（Fdream注：input在这里只是作为一个例子，你同样可以使用这种方式选择其他元素，比如div、a等等。）

要使用运算符，你必须首先指定元素的类型（比如这里的input），然后指定你要过滤的属性（比如这里的name），再加上你的 运算符，最后选择你的过滤字符串。

基于元素顺序的选择器

even（偶数选择）

通过这个简单的选择器，你可以选择序号为偶数的元素。注意：这个选择器从0开始计数，因此第一个元素是偶数序的。

参考代码： [复制代码] [保存代码]
  1. // 选择序号为偶数的div
  2. $$('div:even');
参考代码： [复制代码] [保存代码]
  1. <div>Even</div><!-- 上面的代码将选中这个元素 -->
  2. <div>Odd</div>
  3. <div>Even</div><!-- 上面的代码将选中这个元素 -->
  4. <div>Odd</div>

odd（奇数选择）

和even一样，只不过它选择序号为奇数的元素。

参考代码： [复制代码] [保存代码]
  1. // 选择所有序号为奇数的div
  2. $$('div:odd');
参考代码： [复制代码] [保存代码]
  1. <div>Even</div>
  2. <div>Odd</div><!-- 上面的代码将选中这个元素 -->
  3. <div>Even</div>
  4. <div>Odd</div><!-- 上面的代码将选中这个元素 -->

.getParent();

通过.getParent();方法，你可以得到一个元素的父元素（parent）。

参考代码： [复制代码] [保存代码]
  1. // 选择ID为”child_id“的元素的父元素
  2. $('child_id').getParent();
参考代码： [复制代码] [保存代码]
  1. <div id="parent_id"> <!-- 上面的脚本将返回这个元素-->
  2.     <div id="child_id">Even</div>
  3. </div>

代码举例

任何MooTools UI开发都是从选择器开始的。这里是一些非常简单的例子，演示了怎么去使用选择器操作DOM元素。

参考代码： [复制代码] [保存代码]
  1. // 设置所有span的背景颜色为#eee
  2. $$('span').setStyle('background-color', '#eee');
  3. // 设置所有序号为奇数的span的背景色为#eee
  4. $$('span:odd').setStyle('background-color', '#eee'); 
  5.  
  6. // 设置ID为body_wrap的元素下的所有CSS类名为.middle_spans的span的背景色为#eee
  7. $('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
参考代码： [复制代码] [保存代码]
  1. <div id="body_wrap">
  2.     <span>Even</span>
  3.     <span class="middle_spans">Odd</span>
  4.     <span class="middle_spans">Even</span>
  5.     <span>Odd</span>
  6. </div>

下载zip包并尝试一下

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

更多学习……

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

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

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

Slickspeed选择器

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

W3C选择器

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