Ext.query与Ext.select 的用法

Ext.query与Ext.select 的用法

一、Ext.select

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

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

实例

1、多选择符
 

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

例如

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

2、根节点

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

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

3、查询链

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

例如

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

二、Ext.query

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

实例

1、元素选择符

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

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

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

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

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

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

// 这会返回有两个元素的数组，包含span标签的li标签
Ext.query("li 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]");