ExtJS学习----------Ext.Dom.Query类学习（实例）

具体实例：

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

	//Ext.DomQuery.select ==  Ext.query  //返回内容:HTMLElement[]
	///Ext.DomQuery.jsSelect：根据选择符选择元素	（这个方法和Ext.DomQuery.select差不多）
	//我把他分为三大类：
	//基本选择器 id选择器 css的类选择器 标签选择器（简单选择器）
	//属性选择器、伪类选择器（也可以说是相当于JQ过滤选择器）（复杂选择器）

	//元素选择器
	//Ext.query('span')   	返回整个文档的span标签（数组形式）
	//1 Ext.query('span' , 'root') 	根据跟节点进行查询
//	var arr = Ext.query('span' , 'd1');//使用指定父节点的方式进行查找
//	Ext.Array.each(arr,function(el){//对查询的结果进行遍历
//		alert(el.innerHTML);
//	});

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

	//3 Ext.query('.class')	根据样式进行查询，返回数组
//	var arr = Ext.query('.mycolor');
//	Ext.Array.each(arr,function(el){
//		alert(el.innerHTML); //结果：我是第二个span
//	});
	//jsp文件中的样式
//	<style type="text/css">
//		.mycolor{color:green;}
//	</style>

	//Ext.query('*')	匹配所有元素
	//alert(Ext.query('*'));

	//复杂选择器：
	//1 :Ext.query('div span')	根据标签进行包含选择器过滤
//	var arr = Ext.query('div[id=d1] span');//可以添加限制条件，否则会查找出所有的
//	Ext.Array.each(arr,function(el){
//		alert(el.innerHTML);//结果：我是sp内容   我是第二个span
//	});

	//1.1:Ext.query('E>F')		进行一个层次查找父节点为E的F节点
//	var arr = Ext.query('div>span');		//Xpath:div/span 查找xml文件比较实用
//	Ext.Array.each(arr,function(el){
//		alert(el.innerHTML);
//	});	

	//2 :属性选择器Ext.query('E[attr=val]') 	进行一个属性的选择匹配
//	var arr = Ext.query('div[id*=d]');//将所有id包含d的都查找出来// * 表示包含；^表示前半部分；$表示后半部分
//	Ext.Array.each(arr,function(el){
//		alert(el.id);
//	});
/*	元素选择:
    * 任意元素
    E 带一个E标签的元素
    E F E派生的元素中所有带F标签的
    E > F or E/F E直接子元素中所有带F标签的
    E + F 带有E标签的元素后跟着的带F标签的所有元素
    E ~ F 带有E标签的兄弟元素后跟着的带F标签的所有元素

属性选择:
'@'和引用都是可选的. 例如, div[@foo='bar'] 就是个有效的属性选择.
    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"

伪类:
    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是一个带有检查真属性的元素(例如：一个radio或checkbox)
    E:first 结果集中的第一个E
    E:last 结果集中的最后一个E
    E:nth(_n_) 结果集中的第n个E(1为基准)
    E:odd 快捷方式:第n个孩子(奇数位)
    E:even 快捷方式:第n个孩子(偶数位)
    E:contains(foo) E的innerHTML中包含子字符串"foo"
    E:nodeValue(foo) E中包含一个文本节点，且节点值等于“foo”
    E:not(S) 一个与简单选择符S不匹配的E元素
    E:has(S) 一个拥有可以与简单选择符S匹配的子集的E元素
    E:next(S) 下一个兄弟元素是与简单选择符S匹配的E元素
    E:prev(S) 前一个兄弟元素是与简单选择符S匹配的E元素
    E:any(S1|S2|S2) 和任意的简单选择符S1, S2 或 S3匹配的E元素

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"
    */

	//3: 伪类选择器
	//E:first-child
//	var arr = Ext.query('li:first-child');	//过滤所有的li,并选择第一个
//	Ext.Array.each(arr,function(el){
//		alert(el.innerHTML);//结果：item1
//	});		

	//Ext.DomQuery其他方法：

	//1：compile：将选择符或xpath编译成一个可重复使用的函数
//	var fn = Ext.DomQuery.compile('span');
//	alert(fn);
//	var arr = fn(Ext.getDom('d1'));
//	Ext.Array.each(arr,function(el){
//		alert(el.innerHTML);
//	});	

	//2: filter：使用简单选择符过滤元素数组
	//参数说明 HTMLElement[] el, String selector, Boolean nonMatches
//	var arr = document.getElementsByTagName('div');
//	var filterarr = Ext.DomQuery.filter(arr,'div[id=d1]',false);//true过滤相反的，默认false
//	Ext.Array.each(filterarr,function(el){
//		alert(el.id);
//	});
	//is：判断元素是否匹配简单选择符
	//alert(Ext.DomQuery.is(Ext.getDom('d1'),'div[id]'));//判断获取的Dom元素是否是一个包含id的Div
	//结果：true
});