YUI学习 Selector选择器

准备

使用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还不够熟悉吧，也许可以找到同样的简洁方式。