现在的位置: 首页 > 综合 > 正文

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

2012年08月13日 ⁄ 综合 ⁄ 共 3151字 ⁄ 字号 评论关闭
理一下用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实验里看到的方法。

抱歉!评论已关闭.