Ext中常用选择器

基础用例：

Ext.create('Ext.Panel',{
 		title:'Ext.DomQuery示例',
 		width:500,
 		height:400,
 		renderTo:Ext.getBody(),
 		html:'<ul id=u1><li>item1</li><li>item2</li></ul><div id=d1><span id=sp>我是Span内容</span><span class=mycolor>我是colorSpan内容</span></div>'
 	});

在Ext中利用Ext.DomQuery.select 和 Ext.query 可以获取元素，返回HTMLElement[]，可以使用一下选择器进行元素的获取过滤。

• 简单选择器
  id选择器， css的类选择器，标签选择器
• 复杂选择器
  属性选择器、伪类选择器（相当于JQuery的过滤选择器）

简单选择器

• 根据元素类型选择

Ext.query('span') //返回整个文档的span标签
Ext.query('span', 'root') //根据根节点进行查询, 只适用于简单选择器
var arr = Ext.query('span', 'd1');
Ext.Array.each(arr, function(el){
	alert(el.innerHTML);
});

• 根据元素ID选择

// Ext.query('#id') 根据id进行查询，但返回数组
var arr = Ext.query('#d1');
Ext.Array.each(arr, function(el){
	alert(el.innerHTML);
});

• 根据样式查询

var arr = Ext.query('.mycolor');
Ext.Array.each(arr, function(el){
	alert(el.innerHTML);
});

复杂选择器

• 属性选择器

// Ext.query('div span');  根据标签进行包含选择器过滤
// Ext.query('div[id=d1] span') 找到id=d1的div元素，找出其中所有的span元素
var arr = Ext.query('div[id=d1] span');
Ext.Array.each(arr, function(el){
	alert(el.innerHTML);
});

Ext.query('*') 匹配所有的元素

// Ext.query('E[attr*=val]')  // 进行属性的选择匹配  E[attr!=val] 等
//var arr = Ext.query('div[id=d1]');// 过滤id为d1的元素
var arr = Ext.query('div[id^=d]');// 过滤id以span开头的元素
Ext.Array.each(arr, function(el){
	alert(el.id);
});

// Ext.query('div span');  根据标签进行包含选择器过滤
// Ext.query('div[id=d1] span') 找到id=d1的div元素，找出其中所有的span元素
var arr = Ext.query('div[id=d1] span');
Ext.Array.each(arr, function(el){
	alert(el.innerHTML);
});

// Ext.query('E > F'); E > F or E/F all direct children elements of E that have the tag F
// E > F or E/F 层次查找，查找父节点为E的F节点
// E/F  XPath方式，查找xml文件较为方便
var arr = Ext.query('div > span');
Ext.Array.each(arr, function(el){
	alert(el.innerHTML);
});

• 伪类选择器

// E:first-child E:last-child E:first E:last E:contains(foo) E:has(S) E:next(S) E:prev(S)
var arr = Ext.query('li:first-child');
Ext.Array.each(arr, function(el){
	alert(el.innerHTML);
});

Ext.DomQuery的其它方法

• jsSelect

// jsSelect 根据选择符选择元素

• compile 将选择符或xpath编译成一个可重复使用的函数

var func = Ext.DomQuery.compile('span');// 创建一个可复用的查找span的方法,标签选择器

// 使用方法
var arr = func(Ext.getDom('d1'));// 从id为d1的div中查找所有的span标签
Ext.Array.each(arr, function(el){
	alert(el.innerHTML);
});

• filter 使用简单选择符过滤数组元素

// filter( HTMLElement[] el, String selector, Boolean nonMatches ) 
// nonMatches代表是否过滤掉与selector匹配的元素，true则会过滤掉与selector匹配的元素，false则会只选择与selector匹配的元素
// nonMatches: If true, it returns the elements that DON'T match the selector instead of the ones that match
var arr = document.getElementsByTagName('div');
var filterArr = Ext.DomQuery.filter(arr, 'div[id=d1]', false);
var filterArr = Ext.DomQuery.filter(arr, 'div[id=d1]', true);
Ext.Array.each(filterArr, function(el){
	alert(el.id);
});

• is 判断元素是否匹配简单选择器

alert(Ext.DomQuery.is(Ext.getDom('d1'), 'div[id]'));