面壁者语

整理一下用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实验里看到的方法。

————-简单翻译———

准备

使用Selector，需要调用两个JS文件

基础库：
<script src=”http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js”></script>

Selector文件：
<script src=”http://yui.yahooapis.com/2.5.2/build/selector/selector-beta-min.js”></script>

一、基础用法

query

var nodes = YAHOO.util.Selector.query(’div p’);

这个语句返回了一个P的数组，P的条件:祖先容器为DIV。

query()可以使用可选的第三个布尔属性值来选定数组中的第一个元素。比如，下面语句返回ID为foo的容器下的DIV的第一个P元素：

var node = YAHOO.util.Selector.query(’div p’,'foo’,’ true’);

二、使用选择器

2.1 使用Selector加入事件——Using Selector to Attach Event Listeners

query方法可以方便的为一组元素加入事件。

var handleClick = function(e) {
alert(’click’);
);
var nodes = YAHOO.util.Selector.query(’li a’);
YAHOO.util.Event.on(nodes,’click’,handleClick);

这个例子，所有祖先元素为li的a元素被点击时，都会触发handleClick动作。

2.2 测试节点——Testing a Node

另外一个有用的选择器方法为test 。包含两个值，一个元素节点和一个Simple Selector.返回布尔值，判断此元素节点是否符合Simple Select的选择条件。

var node = document.getElementById(’foo’);
alert(YAHOO.util.Selector.test(node,’div.bar’));

这个例子，判断ID为foo的元素是否为DIV并且具有类名bar。如果符合则返回true,否则返回false。

2.3 筛选节点——Filtering Nodes

filter方法可以方便的筛选出具备特定条件的元素，返回值为数组。

var candidates = document.getElementsByTagName(’a');
var nodes = YAHOO.util.Selector.filter(candidates,’[href]‘);

这个例子返回所有具有href属性的链接。

2.4 使用属性选择——Using Attribute Operators

YUI Selector可以实现CSS 3的属性选择。

比如，如果你想选择所有name属性的开头是yui的input，在CSS 3中，是使用^=选择符。

var nodes = YAHOO.util.Selector.query(’input[name^=yui]‘);

更多强大的CSS 3属性选择方法，请参考CSS 3的属性选择文档。

补充：属性选择符中，如果是以class属性选择，那么在这个方法中，使用class而不是className,即class是元素的一个属性，这个和YUI的DOM选择有区别。

2.5 使用伪类选择——Using Pseudo-classes

YUI Selector同样可以实现大部分CSS 3的伪类选择。使用伪类选择，可以实现许多禅桂选择实现不了的功能。

比如：选择一个ul的第一个li元素。

var nodes = YAHOO.util.Selector.query(’ul li:first-child’);

not伪类可以让你排除具有特定属性的元素。

var nodes = YAHOO.util.Selector.query(’input:noe(type=button])’);

这个例子可以让你选择所有除了button类型外的input元素。

———-笔记———-

学习YUI的Selector，首先需要熟悉CSS 3的选择符。

最初以为filter和筛选选择重复，但是仔细看看，filter以元素是否具有某属性来筛选，比如a的href属性；而属性选择倾向于由属性的值来判断。

比如a href=“google.com”及a href=“www.google.cn”
用a[href*=google]来判断，则结果为两个都符合；
用a[href$=cn]来判断，则返回www.google.cn
用 a[href^=www]来判断，则返回google.com

原理：

att*=val：att属性的值中包含val字段；
att^=val：att属性的值以val开头；
att$=val：att属性的值以val结尾。

query方法返回的均为数组，那么JS原生写法选择最后一个元素，需要

var links = YAHOO.util.Selector.query(’li a’);
var lastlink = links[links.langth-1]

但是CSS 3里的:last伪类，则可以直接

var lastlink = YAHOO.util.Selector.qurey(’li a:last-child’).CSS 3中的文档举例是li>a:last-child，如果你只是想获得li的字级链接的话需要这么写。

CSS 3 最变态的则是结构伪类（structural pseudo-classes），比如tr:nth-child(2n+1)，获取一个表格内全部奇数行。如果说奇偶数判断很简单，那么诸如nth-child(3n+3)或者(4n+4)就很爽了。

不过看过JQuery的选择器会觉得YUI的选择符强大但是不够灵活，因为JQuery提供了不少CSS 3需要运算的快捷选择方式，比如prev+next等。可能是自己对CSS 3还不够熟悉吧，也许可以找到同样的简洁方式。

首先，记下YUI的基本类：YAHOO.util.Dom

一.定位元素

var pos = YAHOO.util.Dom.getXY("id1");
YAHOO.util.Dom.setXY("id2",pos);

同理还有setX,setY等方法。

二.设置样式

YAHOO.util.Dom.setStyle(["id1","id2"],"opacity","0.5");
YAHOO.util.Dom.getStyle("id2","opacity")';

第一行为设置id1和id2两个元素的透明度为0.5；第二行为取得id2元素的透明值。

注：OPERA 9一下版本不支持opacity透明；

另外，本例也演示了如何在一个请求中调用多个元素，即使用[“element1”,“element2”]的方式。

三.获取视窗大小

var viewport = [
YAHOO.util.Dom.getViewportWidth();
YAHOO.util.Dom.setViewportHeight();
]

获取当前可见尺寸的大小，而非绝对物理大小

四.管理样式

YUI有多种样式管理方式。

getElementsByClassName(className, tagName, rootNode)

获取具有指定样式名的元素——结果为数组。可以通过指定根节点（父节点）名称来缩小检索范围

hasClass(element,className);

判断元素是否具有样式，返回的是布尔值true或false

addClass(element,className);

增加样式；

removeClass(element,className);

移除已有样式；

replaceClass(element,oldClassName,newClassName)

替换旧的样式为新的；

例子：var element = YAHOO.util.Dom.getElementsByClassName(”red”,”div”)

即为获取class=”red”的DIV的集合。

另外，YUI里获取一个元素的class名的函数是YAHOO.util.Dom.get(”id”).className。

找到篇网上的同类文章：《翻译：YUI DOM集合》