Mootools 1.2教程(2)——DOM选择器

作者:Fdream 来源:Fdream博客 时间:2008-11-13 12:46:00 

原文地址:30 Days of Mootools 1.2 Tutorials - Day 2 - Selectors

如果你还没有准备好,请先阅读上一篇《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,教程,dom,选择器,库
0
投稿

猜你喜欢

  • python 实现图片特效处理

    2021-04-20 05:34:22
  • python复制文件到指定目录的实例

    2021-03-17 17:10:26
  • Python3中的f-Strings增强版字符串格式化方法

    2022-07-07 12:34:36
  • ASP.NET MVC实现区域或城市选择

    2023-07-13 17:50:00
  • 详解django2中关于时间处理策略

    2021-09-09 23:13:09
  • Python实现在PyPI上发布自定义软件包的方法详解

    2021-12-07 17:05:02
  • perl脚本实现限制ssh最大登录次数(支持白名单)

    2022-04-09 02:56:56
  • Python浮点型(float)运算结果不正确的解决方案

    2023-10-04 16:57:44
  • 基于Python实现下载网易音乐代码实例

    2023-05-25 01:05:51
  • 详解Node.js中的事件机制

    2024-05-03 15:58:52
  • 详解Go语言微服务开发框架之Go chassis

    2023-06-19 03:39:36
  • 苹果的“创新”

    2010-01-12 13:45:00
  • 详解css定位与定位应用

    2007-05-11 16:52:00
  • python实现截取屏幕保存文件,删除N天前截图的例子

    2021-09-19 18:13:49
  • python中string模块各属性以及函数的用法介绍

    2023-12-07 13:49:47
  • MySQL数据库索引原理及优化策略

    2024-01-20 00:35:42
  • python数据结构输入输出及控制和异常

    2022-08-26 10:27:47
  • bootstrap3 兼容IE8浏览器!

    2023-07-02 05:18:58
  • MySQL数据库用户权限管理

    2024-01-19 00:29:18
  • python通过nmap扫描在线设备并尝试AAA登录(实例代码)

    2021-08-06 23:23:42
  • asp之家 网络编程 m.aspxhome.com