ext4 学习笔记(十五)[Query 常用方法](白鹤翔第一季)
2016-11-16 23:07
330 查看
Ext.dom.Query 嗯,这个类一共提供了8个方法供开发人员去使用。
要说最常用的方法,无非就是Ext.query这个方法,之前我们已经简单接触过了这个方法,下面是此方法的详细使用规则:
1.基本选择器(简单选择器) id选择器 css的类选择器 标签选择器
2属性选择器
3.伪类选择器(也可以说是相当于JQ过滤选择器)
Ext.query基本使用形式:
Ext.query('span') 返回整个文档的span标签
Ext.query('span' , 'root') 根据跟节点进行查询
Ext.query('#id') 根据id进行查询,但返回数组
Ext.query('.class') 根据样式进行查询,返回数组
Ext.query('div span') 根据标签进行包含选择器过滤
Ext.query('*') 匹配所有元素
Ext.query('input[value*=val]') 进行一个属性的选择匹配
Ext.query('E>F') 进行一个层次查找父节点为E的F节点
Ext.dom.Query其他方法:
compile:将选择符或xpath编译成一个可重复使用的函数
filter:使用简单选择符过滤元素数组
is:判断元素是否匹配简单选择符
jsSelect:根据选择符选择元素
要说最常用的方法,无非就是Ext.query这个方法,之前我们已经简单接触过了这个方法,下面是此方法的详细使用规则:
1.基本选择器(简单选择器) id选择器 css的类选择器 标签选择器
2属性选择器
3.伪类选择器(也可以说是相当于JQ过滤选择器)
Ext.query基本使用形式:
Ext.query('span') 返回整个文档的span标签
Ext.query('span' , 'root') 根据跟节点进行查询
Ext.query('#id') 根据id进行查询,但返回数组
Ext.query('.class') 根据样式进行查询,返回数组
Ext.query('div span') 根据标签进行包含选择器过滤
Ext.query('*') 匹配所有元素
Ext.query('input[value*=val]') 进行一个属性的选择匹配
Ext.query('E>F') 进行一个层次查找父节点为E的F节点
Ext.dom.Query其他方法:
compile:将选择符或xpath编译成一个可重复使用的函数
filter:使用简单选择符过滤元素数组
is:判断元素是否匹配简单选择符
jsSelect:根据选择符选择元素
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){ console.info(el.innerHTML); }); //2 Ext.query('#id') 根据id进行查询,但返回数组 var arr = Ext.query('#d1'); Ext.Array.each(arr,function(el){ console.info(el.innerHTML); }); //3 Ext.query('.class') 根据样式进行查询,返回数组 var arr = Ext.query('.mycolor'); Ext.Array.each(arr,function(el){ console.info(el.innerHTML); }); //Ext.query('*') 匹配所有元素 console.info(Ext.query('*')); //复杂选择器: //1 :Ext.query('div span') 根据标签进行包含选择器过滤 var arr = Ext.query('div[id=d1] span'); Ext.Array.each(arr,function(el){ console.info(el.innerHTML); }); //1.1:Ext.query('E>F') 进行一个层次查找父节点为E的F节点 var arr = Ext.query('div>span'); //Xpath:div/span 查找xml文件比较实用 Ext.Array.each(arr,function(el){ console.info(el.innerHTML); }); //2 :属性选择器Ext.query('E[attr=val]') 进行一个属性的选择匹配 var arr = Ext.query('div[id*=d]'); Ext.Array.each(arr,function(el){ console.info(el.id); }); //3: 伪类选择器 //E:first-child var arr = Ext.query('li:first-child'); Ext.Array.each(arr,function(el){ console.info(el.innerHTML); }); //Ext.DomQuery其他方法: //1:compile:将选择符或xpath编译成一个可重复使用的函数 var fn = Ext.DomQuery.compile('span'); console.info(fn); var arr = fn(Ext.getDom('d1')); Ext.Array.each(arr,function(el){ console.info(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); Ext.Array.each(filterarr,function(el){ console.info(el.id); }); //is:判断元素是否匹配简单选择符 console.info(Ext.DomQuery.is(Ext.getDom('d1'),'div[id]')); });
相关文章推荐
- ext4 学习笔记(十三)[常用事件方法](白鹤翔第一季)
- ext4 学习笔记(十一)[操作系方法](白鹤翔第一季)
- ext4 学习笔记(六)[Ext.js方法 ](白鹤翔第一季)
- ext4 学习笔记(十二)[样式操作系方法](白鹤翔第一季)
- ext4 学习笔记(十)[查询系方法](白鹤翔第一季)
- ext4 学习笔记(八)[动态加载Js](白鹤翔第一季)
- ext4 学习笔记(三) Ext.window.Window(白鹤翔第一季)
- ext4 学习笔记(二) [Ext.window.MessageBox](白鹤翔第一季)
- ext4 学习笔记(四) [Ext.windowGroup](白鹤翔第一季)
- ext4学习笔记(二十)[为Ext的UI组件绑定事件](白鹤翔第一季)
- ext4 学习笔记一,[自定义类](白鹤翔第一季)
- ext4.X(白鹤翔第一季)学习笔记(二十一)[Observable 自定义事件类]
- ext4 学习笔记(七)[ExtJS扩展原生Javascript](白鹤翔第一季)
- ext4 学习笔记(五)[Ext.define 新建类](白鹤翔第一季)
- ext4 学习笔记(九)[dom操作一 获取元素](白鹤翔第一季)
- 学习笔记 --android将数据存放及xml文档常用的 方法
- django_book学习笔记7-django常用方法总结
- Guava学习笔记:复写的Object常用方法
- PopupWindow 常用方法学习笔记
- python学习笔记——Thread常用方法