Ext.query与Ext.select 的用法

Ext.query和Ext.select的作用是一致的，同是根据CSS选择符查找出一个或多个元素。区别在于返回类型上。分别是：query方法返回的是JavaScript标准的数组类型；select方法返回的是CompositeElement类型.

CompositeElement类型属于Ext自定义的类型，简单地说是以一个Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口，也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元素，均被视为一个单独元素处理。

它的用法和单个的Element对象没有不同。select方法返回的结果可直接如同Element般地操作，一般比query方法常用。

一、Ext.select

select方法可以用来获得指定标签的DOM对象，其返回值是一个Ext.CompositeElement对象。是一个Element的数组

返回的结果可直接如同Element般地操作，一般比query方法常用。

实例

1、多选择符
 

你可以输入多个查询条件，然后在一个对象上面返回。

例如

// 匹配所有的带foo class的div和带bar class的span
Ext.select('div.foo, span.bar');

2、根节点

使用选择符，它可以支持一个根节点的概念。根节点的意思是如果有指定选择符的根节点表示从该节点上开始进行搜索。这样可以助于提升性能，因为若不存在根节点表示从document body开始进行搜索，速度自然比较慢。

Ext.get('myEl').select('div.foo');// 这是等价的
Ext.select('div.foo', true, 'myEl');// 这是等价的

3、查询链

对于构成复杂的查询情况，可以由多个查询条件组成查询链。依次按顺序进行属性链的查询。

例如

// 匹配class为foo的div，要求是有title属性为bar的div，而且还是这个div下面最前头的子元素
Ext.select('div.foo[title=bar]:first');

 

 

二、Ext.query

query方法和select方法非常类似，不同的是，它返回的是一个封装了DOM的数组，它是Ext.DomQuery.select()的简写方式。
 

实例

1、元素选择符

// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span");

// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");
 

// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");
 

/*这个查询会返回有一个元素的数组， 包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");

// 这会返回一个数组，包含文档的所有元素。
Ext.query("*");

// 这会返回有一个元素的数组，包含p标签的div标签
Ext.query("div p");

// 这会返回有两个元素的数组，包含span标签的div标签
Ext.query("div span");

 

2、属性选择符

// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
Ext.query("*[class]");

// 这会得到class等于“bar”的所有元素
Ext.query("*[class=bar]");

// 这会得到class不等于“bar”的所有元素
Ext.query("*[class!=bar]");

// 这会得到class从“b”字头开始的所有元素
Ext.query("*[class^=b]");
 

//这会得到class由“r”结尾的所有元素
Ext.query("*[class$=r]");
 

//这会得到在class中抽出“a”字符的所有元素
Ext.query("*[class*=a]");

---

 

元素选择符
? * 任意元素
? E 一个标签为 E 的元素
? E F 所有 E 元素的分支元素中含有标签为 F 的元素
? E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素
? E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素
? E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素
// Matches all div elements
Ext.select('div');
// Matches all span elements contained inside a div at any level
Ext.select('div span');
// Matches all li elements with a ul as their immediate parent
Ext.select('ul > li');

属性选择符
? E[foo] 拥有一个名为 “foo” 的属性
? E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
? E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
? E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性
? E[foo*=bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性
? E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性
? E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性
// Matches all div elements with the class news
Ext.select('div.news');
// Matches all a elements with an href that is http://extjs.com
Ext.select('a[href=http://extjs.com]');
// Matches all img elements that have an alt tag
Ext.select('img[alt]');

伪类选择符
? E:first-child E 元素为其父元素的第一个子元素
? E:last-child E 元素为其父元素的最后一个子元素
? E:nth-child(n) E 元素为其父元素的第 n 个子元素（由1开始的个数）
? E:nth-child(odd) E 元素为其父元素的奇数个数的子元素
? E:nth-child(even) E 元素为其父元素的偶数个数的子元素
? E:only-child E 元素为其父元素的唯一子元素
? E:checked E 元素为拥有一个名为“checked”且值为“true”的元素
（例如：单选框或复选框）
? E:first 结果集中第一个 E 元素
? E:last 结果集中最后一个 E 元素
? E:nth(n) 结果集中第 n 个 E 元素（由1开始的个数）
? E:odd :nth-child(odd) 的简写
? E:even :nth-child(even) 的简写
? E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串
? E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于
“foo”
? E:not(S) 一个与简单选择符 S 不匹配的 E 元素
? E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
? E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
? E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素
// Matches the first div with a class of code
Ext.select('div.code:first');
// Matches spans that fall on an even index.
Ext.select('span:even');
// Matches all divs whos next sibling is a span with class header.
Ext.select('div:next(span.header));

CSS 值选择符
? E{display=none} css 的“display”属性等于“none”
? E{display^=none} css 的“display”属性以“none”开始
? E{display$=none} css 的“display”属性以“none”结尾
? E{display*=none} css 的“display”属性包含字串“none”
? E{display%=2} css 的“display”属性能够被2整除
? E{display!=none} css 的“display”属性不等于“none”

参考：http://www.studyofnet.com/news/386.html      http://evol1216.blog.163.com/blog/static/1301995802011314102855447/