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>
猜你喜欢
- google前不久推出了Google Ajax Library API,说白了就是提供几个知名js库的host,目前有:jQueryprot
- 很多年前,我们就可以轻易的从很多国营商场、火车车厢、饭馆旅馆中看到墙上挂的那个小本本-意见薄,作为经营方与顾客沟通的
- 此文刊登在《程序员》三月期,有删改提到安全问题,首先想到应付这些问题的应该是系统管理员以及后台开发工程师们,而前端开发工程师似乎离这些问题很
- 近日,被同事问及一个产品列表的做法怎么实现?一个产品列表,每个产品列表后面跟一个button,这些button居右对齐。其实这个效果跟新闻列
- 下面是BeforeInitialBind事件过程:<SCRIPT language=vbscript event=
- 【先锋缓存类】Ver2004作者:孙立宇、apollosun、ezhonghua官方网站:http://www.lkstar.com 技术支
- 很早就在这里看到过解决方案,与嗷嗷讨论后发现这个方案还是很可靠的。当然,唯一的缺点就是每一个属性都要去Hack,但我在很多实践中,只用‘修正
- 在讲这个问题之前让我们来先看一段代码: dim sql_injdata,SQL_inj,SQL_Get,SQL_Data,Sql_
- 14个超酷的js显示时间效果,一定有你想要的。正常时间显示运行效果图:<title>正常显示的时钟 - asp之家 - http
- 原则:1. 我们测试的是产品可用性,不是使用者的个人能力2. 尽量不要打断用户的操作3. &
- PERCONA PERFORMANCE CONFERENCE 2009上,来自雅虎的几位工程师带来了一篇”Efficient Paginat
- 保护你的ASP页面的两种办法 有时候你只想让人们从你的站点来访问你的某些页面, 而不允许他们从其它站点的非法链接中到达这些页面。在你想保护的
- 在编程时你一定碰到过时间触发的事件,在VB中有timer控件,而asp中没有, 假如你要不停地查询数据库来等待一个返回结果的话,我想你一定知
- asp中我们可以利用ERR对象来判断sql语句执行是否成功:SQL="Insert INTO TABLE(F1,F2) value
- 经过了上个星期的努力学习,对处理html又有了新的发现感觉真的很不错可以说js的威力在处理html代码方面我又有所领悟了1、截取特定长度字符
- 从前有三只小猪,长大自立了分别造房子住。老大搬来草堆堆出草屋,老二搬来木头搭出木屋,老三搬来砖头,砌墙,造烟囱,造出了坚固的砖房。一天晚上大
- 以图像处理见长的微软Live实验室,最近发布了一款新作:Pivot。装完启动后的第一印象就是一款浏览器,和IE、FF、Chrome又不太一样
- 首先得抛出个重要的前提观点,大屏幕、宽屏幕根本不是为方便“扫视”准备的。所以说以内容为基础的网站设计不用考虑超宽、超大的场景,甚至包括服务类
- 以下以 IE 代替 Internet Explorer,以 MF 代替 
- 下面示例代码是防止用网页刷新过快,如果多个页面使用,最好将<%...%>代码存为一个asp文件,在需要的页面最前面include