Ext4.2 select 和 query 区别与联系

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

一、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]");

参考 ：http://www.studyofnet.com/news/386.html