MooTools教程(2):DOM选择器

2016-02-20 00:40 14 1 收藏

下面这个MooTools教程(2):DOM选择器教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

如果你还没有准备好,请先阅读上一篇《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

$$();

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

参考代码: [复制代码] [保存代码]// 选择这个页面中的所有div $$('div');    // 选择ID为id_name的元素和所有的div $$('#id_name', 'div'); 参考代码: [复制代码] [保存代码]div     diva 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'); 参考代码: [复制代码] [保存代码] divEven/div!-- 上面的代码将选中这个元素 -- divOdd/div divEven/div!-- 上面的代码将选中这个元素 -- divOdd/div

odd(奇数选择)

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

参考代码: [复制代码] [保存代码] // 选择所有序号为奇数的div $$('div:odd'); 参考代码: [复制代码] [保存代码] divEven/div divOdd/div!-- 上面的代码将选中这个元素 -- divEven/div divOdd/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"     spanEven/span     span class="middle_spans"Odd/span     span class="middle_spans"Even/span     spanOdd/span /div

下载zip包并尝试一下

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

更多学习

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

这里有非常多的有关元素(Element)选择器的文档 顺便也可以看一下选择器(Selectors)

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

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

Slickspeed选择器

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

W3C选择器

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

来源:http://www.tulaoshi.com/n/20160220/1632372.html

延伸阅读
标签: Web开发
基本的CSS选择器 熟悉web开发的人员一定对css的选择功能相当的了解,通过css选择功能,我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制,使jQuery的元素选择能力易常强大。 a——选择所有a元素 #specialID——选择匹配id为specialID的元素 .specialClass——选择匹配拥有css类sepcialClass的元素 a...
标签: Web开发
上节课我们讲了一下CSS通过什么方式去控制页面,如果不记得,我来帮大家回忆一下,总共有四种方式行内方式、内嵌方式、链接方式、导入方式,大家通过这四种方式就可以实现CSS对HTML页面样式的控制,如果要让这些样式对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,HTML页面中的元素就是通过CSS选择器进行控...
CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。 避免让这些瘟疫在你的标签中传播并保持其简洁...
标签: Web开发
最近在 看到一篇关于css选择器的文章《 》,我英文太差,在翻译软件和朋友的帮助下稍微的看懂了一些, 看本文需要谨慎,谨防被我误导,如果你英文强,能翻译作者原文那就更好了,大家都会感谢你的; 看懂的整理了如下几点: 1.作者先前的文章里说:不用去优化CSS选择器,因为优化CSS选择器对网友的性能提升很小,不值得去计较;这个...
标签: Web开发
这个是网页版,直接用ctrl+F搜索,如果大家不是经常上网,可以用chm版的更方便些。 jQuery 1.3 API 参考手册 CHM 锋利的jquery 电子书 近期将会将一些jquery学习教程逐步发一些。参考了锋利的jquery一书。 $的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常...

经验教程

717

收藏

72
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部