此文同来记录学习笔记

•Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了。这个类一共提供了8个方法供开发人员去使用。
•要说最常用的方法,无非就是Ext.query这个方法,之前我们已经简单接触过了这个方法,下面是此方法的详细使用规则:
–基本元素选择器 id选择器 css的类选择器 标签选择器(简单选择器)
–属性选择器
–伪类选择器(也可以说是相当于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){
alert(el.innerHTML);
});
//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);
});
//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);
}); //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]');
Ext.Array.each(arr,function(el){
alert(el.id);
}); //3: 伪类选择器
//E:first-child
var arr = Ext.query('li:first-child');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
}); //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);
Ext.Array.each(filterarr,function(el){
alert(el.id);
});
//is:判断元素是否匹配简单选择符
alert(Ext.DomQuery.is(Ext.getDom('d1'),'div[id]')); });
 给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养;

Ext JS学习第十五天 Ext基础之 Ext.DomQuery的更多相关文章

  1. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. Ext JS学习第十四天 Ext基础之 Ext.DomHelper

    此文用来记录学习笔记   •我们已经学过了Element这个类,无疑是非常强大的,里面提供了丰富的方法供我们使用,但是Ext为了更加的方便我们去操作DOM元素,特提供了DomHelper这个辅助的工具 ...

  3. Ext JS学习第十天 Ext基础之动态加载JS文件(补充)

    此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...

  4. Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)

    此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ------------------------------------------ ...

  5. Ext JS学习第十六天 事件机制event(一)

    此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件,相信你一定不陌生, 基本事件是什么?就类似于click.keypress.focus. ...

  6. 介绍Ext JS 4.2的新特性的《深入浅出Ext JS》上市

    以用户为中心的时代,应用的界面外观变得越来越重要.然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易.Ext JS的出现,为广大程序员解决了这一难题.它有丰富多彩的界面和强大的功能,是开发 ...

  7. 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录

    风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...

  8. python3.4学习笔记(十五) 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)

    python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...

  9. 201671010140. 2016-2017-2 《Java程序设计》java学习第十五周

    java学习第十五周 Java的GUI界面设计,框架以及主要部件填充,归置,布局管理,在第十一章和第十二章进行了系统的学习,在这两章的知识奠基下,可以简单的构造一个GUI用户界面,在两周的学习后,可以 ...

随机推荐

  1. .Net 类型、对象、线程栈、托管堆运行时的相互关系

    JIT(just in time)编译器 接下来的会讲到方法的调用,这里先讲下JIT编译器.以CLR书中的代码为例(手打...).以Main方法为例: static void Main(){ Cons ...

  2. javascript小练习—记住密码提示框

    px/px solid redpxpx]; var oTips = document.getElementById("tips"); oP.onmousemove = functi ...

  3. codevs 3013 单词背诵 hash

    题目链接 题目描述 Description 灵梦有n个单词想要背,但她想通过一篇文章中的一段来记住这些单词. 文章由m个单词构成,她想在文章中找出连续的一段,其中包含最多的她想要背的单词(重复的只算一 ...

  4. OP(Over-provisioning)预留空间

    SSD上的OP指的是用户不可操作的容量,大小为实际容量减去用户可用容量,OP区域一般被用于优化操作如:WL,GC和坏块映射等.       OP一般分三层(见下图).第一层容量固定为SSD标称容量的7 ...

  5. CodeForces 154B- Colliders

    预处理...由于10^5<2^20..所以每个数的质因子个数最多20个..为了避免重复运算..将素有数的质因子打表出来... 两个数如果互质..那么他们的最大公约数为1..反过来说..两个数如果 ...

  6. NSArray 与 NSMutableArray 的排序

    由于集合的使用过程中,经常需要对数组进行排序操作,此博客用于总结对在OC中对数组排序的几种方法 1.当数组中存放的是Foundation框架中提供的对象时,直接使用 compare:方法 如:NSSt ...

  7. oracle 获取系统时间(转)

    Oracle中如何获取系统当前时间   select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') from dual;    ORACLE里获取一个时间的年.季. ...

  8. list根据所存对象属性排序

    比如有个list,里面存的是一个个对象,对象有个list属性,其值可以是字符串和数字. private void getSortList(List<AclResource> newList ...

  9. 控制所生成的servlet的结构: JSP page指令

    在JSP中,主要有3种类型的指令:page, include和taglib.page指令允许我们通过类的导入.servlet超类的定制.内容类型的设置.以及诸如此类的事物来控制servlet的结构.p ...

  10. HDU 2087 剪花布条(模式串在主串中出现的次数主串中子串不可重叠)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2087 题意:求模式串在主串中出现的次数,与模式串匹配的子串之间不可重叠. 思路:用kmp算法解决,在匹 ...