ExtJS得知--------Ext.Element学习的查询方法(示例)
2015-10-03 13:37
633 查看
详细实例:(实验结果可复制代码后进行演示)
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); }); });
相关文章推荐
- 151003-动起来-Javascript
- JS(ajax笔记)
- JavaScript显示和隐藏某个div
- javascript 面向对象程序设计--深刻理解对象
- javascript 面向对象程序设计--深刻理解对象
- Json和map相互转换工具类
- JS中的定时器
- javascript 单体模式
- JSP知识总结
- javascript接口实现
- JS学习笔记
- JSP之Cookie的实现
- JSP之Cookie的实现
- JSON的学习与使用
- javascript中argument1 === void 0的意思
- JS获取浏览器的高度和宽度
- JS操作Cookies的小例子
- 使用ExtJs实现文件下载
- JavaScript权威指南学习之第6章 对象
- JavaScript设计模式——工厂模式