[javascript]MooTools Selectors(MooTools 选择器)

工作有时会要写js 公司的产品用的是mootools框架,记下以后好找

ELEMENT DOM选择

//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

CSS3表达式选择

//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"]')

CSS3表达式匹配规则
=	匹配给定的属性是某个特定值的元素
^=	匹配给定的属性是以某些值开始的元素
$=	匹配给定的属性是以某些值结尾的元素
!=	匹配给定的属性是不包含某个特定值的元素
*=	匹配给定的属性是以包含某些值的元素
~=	该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。
|=	属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)

 

基本选择器

选择器	描述	示例	备注
#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>标签的一组元素

层次选择器

选择器	描述	示例	注意
后代选择器
$$(‘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是过滤器

过滤选择器

选择器	描述	示例	备注
基本过滤选择器
: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']")