YUI的Selector类库实现JQUERY的选择器的方法
一。基本
1.#ID 选择指定ID的元素
YAHOO.util.Selector.query(’#ID’)
2.element 选择指定类型的元素
YAHOO.util.Selector.query(’div’)
3..className 选择指定类名的元素
YAHOO.util.Selector.query(’.className’)
4.* 选择所有元素
YAHOO.util.Selector.query(’*')
5.selector1,selector2,…selectorN
YAHOO.util.Selector.query(’selector1,selector2,…selectorN’)
二。层级
1.ancestor descendant 指定祖先元素下的所有指定类型的后代元素
YAHOO.util.Selector.query(’div p’)
2.parent>child 指定父级元素下的所有子元素
YAHOO.util.Selector.query(’div>p’)
3.prev+next 文档流中指定元素的后一个元素
YAHOO.util.Selector.query(’div+p’)
4.prev~siblings 文档流中指定元素后的所有同级元素
YAHOO.util.Selector.query(’div~*’)
三.简单
1.：first 指定元素下的第一个元素
YAHOO.util.Selector.query(’table tr:first-child’)
2.：last 指定元素下的最后一个元素
YAHOO.util.Selector.query(’table tr:last:child’)
3.:not(selector) 指定不具备某属性的元素
YAHOO.util.Selector.query(’input:not([type=text])’)
4.：even 指定索引值为偶数的元素
YAHOO.util.Selector.query(’tr:nth-child(2n)’)
或者
YAHOO.util.Selector.query(’tr:nth-child(even)’)
5.：odd 指定索引值为奇数的元素
YAHOO.util.Selector.query(’tr:nth-child(2n+1)’)
或者
YAHOO.util.Selector.query(’tr:nth-child(odd)’)
同理，前面的:first也可以写成YAHOO.util.Selector.query(’tr:nth-child(1)’)
注意，在JS里，计数是从0开始，比如公式中的2n+1，n从0开始；但是CSS 3中，计数是从自然数1开始的，这点不能混淆。
6.:eq(index) 指定索引值的元素
YAHOO.util.Selector.query(’tr:nth-child(5)’)
7.:gt(index) 索引值大于指定数字的元素
YAHOO.util.Selector.query(’tr:nth-child(n+2)’)
排序第2以及之后的元素，即大于指定索引值1的元素
8.:lt(index) 索引值小于指定数字的元素
这个YUI似乎不能实现？我没在CSS 3中找到方法
9.:header 指定标题元素，H1-H6
这个在YUI里只能用YUI.util.Selector.query(’h1,h2,h3,h4,h5,h6′)实现了
10.animated 指定正在执行动画的元素
同样，不能实现；
四。内容
很遗憾，YUI的Selector是通过CSS 3来实现的，没找到根据内容匹配的方法
五。可见性
1.：hidden
选择所有不可见元素，包括display为hidden的元素以及hidden类型的input
只知道后者可以通过属性选择符实现
YAHOO.util.Selector.query(’input:[type=hidden]‘)
六。属性
1.[attribute] 选择所有包含指定属性的元素
这个在YUI里需要通过filter方法实现，filter方法的第一个参数类型是数组，并不能直接选择元素或者ID等，所以需要多定义一次。
var link= document.getElementsByTagName(’a');
YAHOO.util.Selector.filter(a, ‘[href]‘);
2.[attribute=value] 选择所有属性的值为指定值的元素
YAHOO.util.Selector.query(’input[name=accept]‘);
例外：a 不能通过href的值直接匹配
3.[attribute!=value] 选择属性值不包含制定值的元素
YAHOO.util.Selector.query(’input:not([name=accept])’);
伪类选择+属性选择来实现。
4.[attribute^=value] 选择属性值以指定值开始的元素
YAHOO.util.Selector.query(’a[href^=www]‘);
5.[attribute$=value] 选择属性值以指定值结束的元素
YAHOO.util.Selector.query(’a[href$=www]‘);
6.[attribute^=value] 选择属性值包含指定值的元素
YAHOO.util.Selector.query(’a[href*=google]‘);
- <a href=”google.com”>链接1</a>
- <a href=”www.google.com>链接2</a>
- <a href=”google.cn”>链接3</a>
例子：
YAHOO.util.Selector.query(’a[href^=www]‘);返回链接2（以www开头）
YAHOO.util.Selector.query(’a[href$=com]‘)返回链接1和链接2（以com结尾）
;YAHOO.util.Selector.query(’a[href*=google]‘);返回全部三个链接（包含google）
7.[selector1][selector2][selectorN]
YUI实现不了
七。子元素
.:nth-child?? 同第三章
八。表单
:input，:textarea 同类型选择符
:text,:password等以input的type属性筛选的，同第六章的属性选择符.，YAHOO.util.query(’input[type=text]‘)
另外在JQUERY中，:button同时匹配button元素和input type=”button”
九。表单对象属性
1.：enabled 查找可用表单元素（与disabled对应）
YUI需要用:not伪类实现：YAHOO.util.Selector.query(’input:not([disabled=disabled])’)
即属性不为disabled的表单元素
2.：disabled
YAHOO.util.Selector.query(’input[disabled=disabled]‘)
3：checked和：selected，选择checked=”checked”的radio或者checkbox；和selected=”selected”的option元素
这个YUI无法实现。
不得不承认，选择器上，JQUERY上手比YUI要简单方便。另外如果不想打冗杂的YAHOO.util.Selected，可以定义成缩写：var YUS = YAHOO.util.Selector；YUS.query(’div’)。这个是在淘宝的一个JS实验里看到的方法。
