MooTools Selectors(选择器)

 

什么是MooTools选择器

在《MooTools DOM 之 Accessing elements（访问元素）》日志中，以$$()为代表，以及众多对Element prototype扩展的方法，让您更轻松的操作DOM元素。默认情况下，这些方法只允许以标签名为参数。
当你使用了Selectors，这些方法变得更为强大。因为Selectors.js 文件扩展其功能，以允许你可以使用CSS选择器。
它不会改变你对原有方法的使用方式，您可以灵活的使用这些方法，它只会帮你更好的，更方便的，选择你想要的DOM内容。

这里有一个简单的例子：

 

//Without Selectors.js, all you can select//on are tag names.//All the divs on the page:$$('div');//All the divs and paragraphs//note: this returns an array with all the divs first,//then all the paragraphs:$$('div', 'p');//When you include Selectors.js, you can//pass in CSS selectors.//All the divs with the css class 'myClass':$$('div.myClass')/All the paragraphs that are inside divs:$$('div p');//All the bold tags in paragraphs with//Class 'foo' in divs with class 'myClass':$$('div.myClass p.foo b');

此函数性适用于任何方法,接受作为参数选择。

除了$$（），以下元素的方法，同样如此：

可以继承Selectors的DOM方法Element.getElement Element.getAllNext Element.getElements Element.getFirst Element.match Element.getLast Element.getPrevious Element.getParent Element.getAllPrevious Element.getParents Element.getNext Element.getChildren

通俗的讲, Selector选择器就是"一个表示特殊语意的字符串". 只要把选择器字符串传入上面的方法中就能够选择不同的Dom元素，如果取得指定的DOM元素,则返回该元素，返回值可以是一个元素对象，元素集合或元素数组等。

复杂的CSS3表达式

除了标准的CSS表达式，如在上一节的例子，Selectors.js还可以选择元素属性，如名称，值，或 href 。请参考 标准CSS3表达式(见 http://www.w3.org/TR/css3-selectors/#attribute-representation) 。

下面的表达式是支持的：

= 匹配给定的属性是某个特定值的元素^= 匹配给定的属性是以某些值开始的元素$= 匹配给定的属性是以某些值结尾的元素!= 匹配给定的属性是不包含某个特定值的元素*= 匹配给定的属性是以包含某些值的元素~=

该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。

|=

属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)

请看Example:

//All the inputs where name equals 'email'$$('input[name=email]')//All the images with urls that end in .gif:$$('img[src$=gif]')//All the links without target="_blank":$$('a[target!=_blank]')

Note that these expressions can take double or single quotes when you
want to search for something that has a space or other character:

$$('input[name!="user[username]"]')$$('img[src$=".gif"]')

MooTools Selectors 分类

在我们学习之前，如果你对Css Selectors不是很了解的话，我建议你学习一下，《征服，高级CSS选择器》 。

基本选择器

MooTools的基本选择器，是我们常用的选择器，也是最简单的选择器，它是通过id,class和标签名等来查找DOM元素的。在网页中，id名称只能使用一次，class名称允许重复使用。

选择器描述示例备注#id根据给定的id匹配一个元素$$(‘#myid’)选取文档中id为myid的一个元素 .class根据给定的类名匹配元素$$(‘.myclass’)选取文档中所有class为myclass的元素 element根据给定的标签名匹配元素$$(‘p’)选取文档中所有的<p>元素 * 匹配所有元素$$(‘*’)选取所有的元素IE中$$(‘*’)有问题

Selector1,

Selector2,

…..,SelectorN

将每一个选择器匹配到的元素合并后一起返回$$(‘div’,’span’,'p.myclass’)选取所有<div>,<span>和class为myclass的<p>标签的一组元素 

注意：$$()函数可以接受任意个数的参数, 参数类型如下: HTMLCollections, 元素数组, 多个单独的元素, 或者CSS选择器字符串.

在日常的使用中，基本选择器可以满足我们大多数的工作需要。

下面我们用具体的示例来测试一下：

演示: 基础选择器

层次选择器

如果想通过DOM元素之间关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，那么层次选择器是一个非常好的选择器。

选择器描述示例注意

后代选择器

$$(‘ancestor descendant’)选取ancestor元素里的所有descendant（后代）.元素即ancestor(祖先),descendant(子孙)。$$(‘body div’) 选取body里的所有的div元素。后代选择器是基于一个元素是否是另一个元素的后代来决定是否应用样式的直接子选择器$$(‘parent>child’)选取parent元素下的child(子)元素，与$$(‘ancestor descendant’)是有区别的，$$(‘ancestor descendant’)选择的是后代元素。$$(‘body > div’) 选取body里元素是div的子元素。选择parent的直接子节点child.  child必须包含在parent中并且父类是parent元素。

兄弟（相邻）组合选择器

$$(‘prev+next’)选取紧跟在prev元素后的下一个元素。$$(‘.one + div’) 选取class为one的下一个 div 元素。prev和next是两个同级别的元素. 选中在prev元素后面的next元素。普通兄弟组合选择器$$(‘prev~siblings’)选取prev元素之后的所有siblings元素。

$$(‘.two ~ div’)选择 class为two的元素后面的所有div兄弟元素。

$$(‘#someDiv~[title]’)选择id为someDiv的对象后面所有带有title属性的元素。

siblings是过滤器

下面我们用具体的示例来测试一下：

演示: 层次选择器

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS的伪类选择器语法相同，即选择器都以一个冒号（:）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，可见性过滤，内容过滤，子元素过滤，表单对象属性过滤选择器。

选择器描述示例备注基本过滤选择器:index 根据索引号查取元素查找列表索引号是3的所有li ：$$(‘li:index(3)’)从 0 开始计数（自定义伪类选择器）:even 匹配所有索引值为偶数的元素查找列表li的1、3、5…行:$$(‘li:even’)

从 0 开始计数（自定义伪类选择器）

强烈推荐使用本选择器来替代nth-child(even), 因为它返回的是实际的偶数序子元素.

dd 匹配所有索引值为奇数的元素查找列表li的1、3、5…行:$$(‘li:odd’)

从 0 开始计数（自定义伪类选择器）

强烈推荐使用本选择器来替代nth-child(odd), 因为它返回的是实际的奇数序子元素.

可见性过滤选择器 :enabled 匹配所有可用元素$$(‘*:enabled’)
$$(‘myElement’).getElements(‘:enabled’); （自定义伪类选择器）内容过滤选择器 :empty 匹配所有内容为空的元素$$(‘div:empty’);  :contains(text) 匹配含有文本内为“text”的元素$$("p:contains(‘find me’)");  :not(selector)

检测当前元素是否符合指定的CSS规则.

 

# 除 .foobar 以外的所有 <div> 的背景为黑色

$$(‘div:not(.foobar) ‘).setStyle(‘background’,'#000′);

# 除 .foo 和 .bar 以外的所有 <h2> 的背景都为 #ccc

$$(‘h2:not(.foo, .bar) ‘).setStyle(‘background’,’#ccc‘);

 子元素过滤选择器

:nth-child

(expression)

匹配其父元素下的第N个子或奇偶元素。

可以使用:
‘:nth-child(3n) ‘
‘:nth-child(2) ‘
‘:nth-child(3n+1)’
‘:nth-child(3n+2)’

所有奇数序子元素:

‘:nth-child(odd)’

所有偶数序子元素:

‘:nth-child(even)’

无兄弟节点的子元素:

‘:nth-child(only)’

第一个子元素:

‘nth-child(first)’

最后一个子元素:

‘nth-child(last)’

在每个 ul 查找第 2 个li:
$$(‘ul li:nth-child(2)’):nth-child从1开始的。:first-child

选取每个父元素的第一个子元素

在每个 ul 中查找第一个 li:
$$(‘ul li:first-child’) :last-child

匹配最后一个子元素。

‘:last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

在每个 ul 中查找最后一个 li:
$$(‘ul li:last-child’) : only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配。

如果父元素中含有其他元素，那将不会被匹配。

在 ul 中查找是唯一子元素的 li:
$$(‘ul li:only-child’) 表单对象属性过滤选择器:selected匹配所有选中的option元素查找所有选中的选项元素:
$$(’select option:selected’)自定义伪类选择器:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)查找所有选中的复选框元素:
$$(‘input:checked’) 

下面我们用具体的示例来说明：

演示:基本过滤选择器 & 子元素过滤选择器

演示:表单对象属性过滤选择器

演示:内容过滤器选择器

属性过滤选择器

名称描述示例[attribute]匹配包含给定属性的元素查找所有含有 id 属性的 div 元素:
$$(‘div[id]‘)[attribute=value]匹配给定的属性是某个特定值的元素查找所有 name 属性是 newsletter 的 input 元素:
$$(“input[name='newsletter']“).attr(‘checked’, true);[attribute!=value]匹配给定的属性是不包含某个特定值的元素查找所有 name 属性不是 newsletter 的 input 元素:
$$(“input[name!='newsletter']“).attr(‘checked’, true);[attribute^=value]匹配给定的属性是以某些值开始的元素$$(“input[name^='news']“)[attribute$=value]匹配给定的属性是以某些值结尾的元素查找所有 name 以 ‘letter’ 结尾的 input 元素:
$$(“input[name$='letter']“)[attribute*=value]

匹配给定的属性是以包含某些值的元素

查找所有 name 包含 ‘man’ 的 input 元素:
$$(“input[name*='man']“)

[attribute~=value]该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。

查找所有的a 元素，并且class属性中含有tit的元素

$$(‘a[class~=tit]‘)

[attribute|=value]属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)

该语句将匹配所有class属性包含”post”并带”-”字符的div元素。

$$(“[class|='post'] “)

[attributeFilter1]

[attributeFilter2]

[attributeFilterN]

复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:
$$("input[id][name$='man']")

下面我们用具体的示例来说明：

演示：属性过滤选择器

全部示例包下载

下载：MooTools-Selectors