YUI的Selector类库实现JQUERY的选择器的方法

理一下用YUI的Selector类库实现JQUERY的选择器的方法，分类参照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]‘);

1. <a href=”google.com”>链接1</a>
2. <a href=”www.google.com>链接2</a>
3. <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实验里看到的方法。