ExtJS学习--------Ext.Element中的查询方法学习(实例)
具体实例:(实验结果可复制代码后进行演示)
Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , width:'100%' , height:400 , renderTo:Ext.getBody(), html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></div>' }); //查询系最常用的方法: //Ext.dom.Element get fly getDom var d1 = Ext.get('d1'); var sp = Ext.get('sp'); //查询系方法: //1: contains:判断元素是否包含另一个元素 alert(d1.contains(sp)); alert(d1.contains('sp')); //2: child:从元素的直接子元素中选择与选择符匹配的元素 (返回的只是一个元素,并不能返回数组) ,2个参数 第二个参数是可选的 如果为true表示取得的是原生的HTMLElement元素 var ch1 = d1.child('span'); //Ext.dom.Element alert(ch.dom.innerHTML); var ch2 = d1.child('span',true); //HTMLElement alert(ch.innerHTML); //3: down:选择与选择符匹配的元素的子元素//findParentNode、up:查找与简单选择符匹配的元素的父元素 var ch1 = d1.down('#d2'); alert(ch1.dom.innerHTML); //4: first:选择元素第一个子元素 //last:选择元素的最后一个子元素 var f1 = d1.first('div'); alert(f1.dom.innerHTML); //5: findParent:查找与简单选择符匹配的元素的父元素 //parent:返回元素的父元素 var parent = sp.findParent('div'); alert(parent.innerHTML); //6: is:判断元素是否匹配选择符 alert(d1.is('div')); //7: next:选择元素同层的下一个元素 //prew:选择元素同层的上一个元素 var next = sp.next(); alert(next.dom.nodeName); //8: Ext.query:根据选择符获取元素 (Ext.dom.Element.query) var arr = Ext.query('span','d1'); //HTMLElement[] Ext.Array.each(arr , function(item){ alert(item.innerHTML); }); //9: Ext.select/Ext.dom.Element.select:根据选择符获取元素集合 // 返回的都是元素集合: Ext.dom.CompositeElementLite(HTMLElemennt)/Ext.dom.CompositeElement(Ext.dom.Element) // 参数说明: 3个参数 , // 1:selector 选择器 (不要使用id选择器) // 2:返回的集合对象(boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement) // 3: 指定的根节点开始查找 //参数为false时的 var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite Ext.Array.each(list1.elements,function(el){ alert(el.innerHTML); }); //参数为true时的 var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElement Ext.Array.each(list2.elements,function(el){ alert(el.dom.innerHTML); }); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。