Extjs学习笔记--(六,选择器)
文档对象dom是javascript与页面元素的桥梁
选择器的作用就是通过元素的标签名,属性名,css属性名对页面进行快速,准确的定位及选择
Extjs的选择器:Ext.DomQuery
Ext.query(path[,root,type])
path:查询要使用的选择符,或xpath
root:查询开始的节点或节点id。如果不设置,默认为document对象,为了提高速度,不要使用document开始查询
type:查询的类型,值可以为select和simple,当值为simple时使用id或标签属性值等座简单的查询
demo:
var el=Ext.get(rootId); //rootId为节点id
el.query(path);
Ext.get
Ext.get()可接收这几种类型的参数,如HTMLElement,Ext.Element、字符型,
返回的新实例。以下三种类型如下例:
var el1 = Ext.get('elId'); // 接收元素id
var el2 = Ext.get(el1); // 接受Ext.Element
var el3 = Ext.get(el1.dom); //接受HTMLElement Ext.fly
Ext.fly在参数方面与Ext.get的完全相同,但其内置控制返回Ext.Element
的方法就完全不同,Ext.fly从不保存享元对象的引用,每次调用方法都返回
独立的享元对象。其实区别在于“缓存”中,因为缓存的缘故,Ext.get需要
为每个元素保存其引用,就形成了缓存,如果有相同的调用就返回,但
Ext.fly没有所谓的缓存机制,得到什么就返回什么,不是多次使用的情况下
“一次性地”使用该元素就应该使用Ext.fly(例如执行单项的任务)。
使用Ext.fly的例子:
// 引用该元素一次即可,搞掂了就完工
Ext.fly('elId').hide();
Ext.get和Ext.fly却别
全选功能
Ext.fly("selectAll").on("click",function(e,el){
var els=Ext.query("input[name=articleId]");
for(var i=0;ln=els.length,i<ln;i++){
els[i].checked=el.checked;
}
})
Ext.Query是Ext.DomQuery.select的简写形式
基本选择符
1:*:选择任何元素 Ext.qurey("*")
2: E:根据元素标记E选择元素 Ext.query("E") //E为元素标记,input,div
3: E F:选择包含在标记E中的标记F Ext.query("E F") //E,F均为元素标记
4: E>F:选择包含在标记E中的直接子标记F Ext.query("E>F") //E,F均为元素标记
5: E+F:选择所有紧接在元素E后的元素F Ext.query("E+F")
6: E~F:选择在元素E之后同层的元素F Ext.query("E~F")
7: #ID :选择id属性值为ID的元素 Ext.query("#ID")
8:.classname:选择css类名为classname的元素 Ext.query("E .classname") //E为元素标记,className为css类名
属性选择符
1.[attribute]:选择带有属性attribute的元素
语法:
Ext.query("[attribute]")
Ext.query("E[attribute]")
2.[attribute=value];选择attribute的属性元素为value的元素
Ext.query("[attribute=value]")
Ext.query("E[attribute=value]")
3.[attribute^=value]:选择attribute的属性以value开头的元素
Ext.query("[attribute^=value]")
Ext.query("E[attribute^=value]")
4.[attribute$=value]:选择attribute的属性以value结尾的元素
Ext.query("[attribute$=value]")
Ext.query("E[attribute$=value]")
5.[attribute*=value]:选择attribute的属性值包含value的元素
Ext.query("[attribute*=value]")
Ext.query("E[attribute*=value]")
6,[attribute%=value]:选择attribute的属性值能整除value的元素
Ext.query("[attribute%=value]")
Ext.query("E[attribute%=value]")
7.[attribute!=value]:选择attribute的属性值不等于value的元素
Ext.query("[attribute!=value]")
Ext.query("E[attribute!=value]")
Css属性值选择器
和属性选择符类似
不同之处:
1,使用{}代替属性选择符中的[]
2,不要使用没有属性值的语法,如:Ext.qurey("input{display}"),原因-css属性和元素属性不同,一直是存在的,所以使用Ext.qurey("input")的结果是一样的
3,经过compile方法变异后的属性函数中,byAttribute方法调用的custom参数值为‘{’
4,在byAttribute方法中,会调用DomQurey对象的getStyle方法获取css属性值
5,注意padding,background等可以合并定义的css属性,查询时必须拆分成单一的属性
如padding-left,padding-right,或background-color
伪类选择符
1,E:first-child:选择元素E,且其为父节点的第一个子节点
Ext.query("E:first-child") 如: Ext.query("input:first-child")
2,E:last-child:选择元素E,且其为父节点的最后一个子节点
Ext.query("E:last-child") 如: Ext.query("input:last-child")
3,E:nth-child(n) :选择标记为E,且其为父节点的第N(N>=1)个子节点
Ext.query("E:nth-child(n)") 如:Ext.query("input:nth-child(10)")
4.E:nth-child(odd)或:E:odd 选择标记为E,且其为父节点的 奇数子节点的元素
Ext.qurey("E:nth-child(odd)")如:Ext.qurey("input:nth-child(odd)")
5.E:nth-child(even)或:E:even 选择标记为E,且其为父节点的 偶数子节点的元素
Ext.qurey("E:nth-child(even)")如:Ext.qurey("input:nth-child(even)")
6.E:only-child 选择标记其为父节点的唯一子节点的元素
Ext.qurey("E:only-child ")如:Ext.qurey("input:E:only-child ")
7.E:checked 选择标记为E,且其checked属性为true的元素
Ext.qurey("E:checked")
8.E:first 选择标记为E,的第一个元素
Ext.qurey("E:first ")
9.E:last 选择标记为E的最后一个元素
Ext.qurey("E:checked")
10.E:nth(n) 标记为E的元素集合中的第n个元素
Ext.qurey("E:nth(n)")
11.E:contains(str) 选取标记为E,且其innerHtml属性值包含str的元素
Extjs学习笔记--(六,选择器)的更多相关文章
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(六) 常用快捷键使用技巧,持续更新
python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...
- Go语言学习笔记六: 循环语句
Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...
- 【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
- Linux学习笔记(六) 进程管理
1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...
- # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)
目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...
- Spring Boot 学习笔记(六) 整合 RESTful 参数传递
Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...
随机推荐
- 启用div作为编辑器 添加contentEditalbe = “true”,如何让在Html中特殊字符不被转义
今天项目中碰到了两个难以解决的问题,一个是ctrl + enter键换行,enter键发送和支持html特殊字符的发送,二人会话和群会话都必须支持,发送短信的模块也必须支持特殊的字符,但是现在碰到的问 ...
- 在Eclipse中给JRE-Library添加本地Javadoc
Eclipse中的JRE-Library的Javadoc默认是一个URL,指向oracle的一个web-page,那你在离线的时候就无法使用了,为了解决这个问题,你可以从oracle下载JDK-Spe ...
- poi 抽取execl表面数据源代码工具
开发中 ,导入导出execl避免不了数据类型格式的校验,在使用poi要使用抽取表面数据,poi暂时不支持单元格抽取,查询poi源码抽取工具类如下,如使用jxl就不必使用,jxl取出的单元格数据已是抽取 ...
- javaee 架构师之路
Java程序员 高级特性 反射.泛型.注释符.自动装箱和拆箱.枚举类.可变 参数.可变返回类型.增强循环.静态导入 核心编程 IO.多线程.实体类. 集合类.正则表达式. XML和属性文件 图形编程 ...
- svn 版本导致
Malformed network data svn: Unable to parse URL '/svn/PROJECT/13.深大出版社/trunk/sdcbs/' svn 版本导致 1 ...
- 通过Windows PowerShell远程管理计算机(精简版)
现在你手中有一台server(主控端),你打算通过主控端远程管理多台server(被控端).这个过程可以通过Windows PowerShell来完成. 首先在被控端上以管理员权限打开PowerShe ...
- 【Unity笔记】UGUI的Image、RawImage控件
Image控件只能使用Sprite图片,RawImage通常使用Texture类型图片.项目设为2D模式后导入的图片Texture Type会自动转为Sprite. 没有选择源图片时,可以只选择颜色. ...
- 【Unity笔记】UGUI中Canvas屏幕适配
1.通过RectTransform中的Anchors和Pivot来进行控件和窗体的布局适配. Anchors控制当前Panel相对于父窗体的布局位置,可以设置为居中或者左上角,当父窗体拉伸的时候当前P ...
- 【WPF】使用Popup控件做浮窗/提示框
需求:当鼠标移入某个区域时,弹出一个浮窗,以便用户进行下一步操作. 效果如下图: 当鼠标移入左上角的[多选显示]框内,出现下面的浮窗(悬浮在原UI之上).当在浮窗外点击鼠标左键时,隐藏该浮窗. 由于该 ...
- umount 强制卸载
umount -lf /mnt 强制卸载文件 -f Force unmount (in case of an unreachable NFS system). (Requires kern ...