关于Ext3选择器

cmp选择器

http://blog.csdn.net/hyeidolon/article/details/38759665

选择器 Ext.ComponentQuery.query

基于xtype查找组件: var panels = Ext.ComponentQuery.query(‘panel‘);

查找二级xtype:var buttons = Ext.ComponentQuery.query(‘panel button‘);

基于属性值检索组件:var saveButton = Ext.ComponentQuery.query(‘button[action="saveUser"]‘);

混合查找组件:var buttonsAndTextfields = Ext.ComonentQuery.query(‘button, textfield‘);

基于ID查找组件:var usersPanel = Ext.ComponentQuery.query(‘#usersPanel‘);

基于组件的presence(不太明白这个应该怎么翻译):var extraOptionsComponents = Ext.ComponentQuery.query(‘component[extraOptions]‘);

使用组件的成员方法查找:var validField = Ext.ComponentQuery.query(‘form > textfield{isValid()}‘);

dom选择器

http://www.cnblogs.com/anbylau2130/p/3598400.html

基本选择符

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的元素

时间: 2024-10-08 09:11:08

关于Ext3选择器的相关文章

CSS3选择器:nth-child和:nth-of-type之间的差异

对于p:nth-child选择器,选择一个元素如果: 这是个段落元素 这是父标签的第二个子元素 对于p:nth-of-type选择器,选择一个元素如果: 选择父标签的第二个段落子元素 :nth-of-type选择器,限制条件少

刨根问底:ext3/ext4文件系统最大空间及单个文件大小演算法则

从ext3和ext4文件系统来窥探空间和文件大小的演算法则 学习操作系统就不得不研究磁盘以及磁盘文件系统,磁盘是底层物理设备,而文件系统则是管理磁盘的上层工具,文件系统规划了磁盘存放数据的格式,确定了一个操作系统能够支持多大的磁盘空间,每个分区能够支持多大的数据空间,以及每个文件所能支持的大小.通常对系统管理员而言,最需要的知道的就是最大磁盘空间,最大分区空间以及最大文件的大小.本论题只讨论这三种大小到底是怎么算出来的,而不是死记硬背.知道了原理,以后不管遇到什么文件系统,都会有章可循,至少知道

CSS3选择器 ::selection选择器

"::selection"伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本).浏览器默认情况下,用鼠标选择网页文本是以"深蓝的背景,白色的字体"显示的,效果如下图所示: 从上图中可以看出,用鼠标选中"专注IT.互联网技术"."纯干货.学以致用"."没错.这是免费的"这三行文本中,默认显示样式为:蓝色背景.白色文本. 有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时

jQuery选择器补充

------------------------------------------------------------------------------------------------------------ --------------------------- 简单选择器(使用频率最高) ---------------------------- ----------------------- 进阶选择器(使用频率不如简单选择器) ----------------------- 高级选

微信小程序组件解读和分析:十二、picker滚动选择器

picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date), 默认是普通选择器. picker滚动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

CSS3选择器

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 选择器的使用 通过选择器的使用,可以不再需要在编辑任何多余的无语义的class属性. 属性选择器: 在使用属性选择器时,需要声明属性和属性值. 声明方法:[att=val],其中att代表属性,val代表属性值. E[att=val]:前面的E表示在何种标签如:div[id=momo],a[he

jQuery 选择器2

jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class=&qu

优化jQuery选择器

优化jQuery选择器 选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任.记住这些小技巧可以让你轻松突破学习选择器时的瓶颈. jQuery 扩展 如果可能的话,避免使用jQuery扩展选择器.这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧. 1 2 3 4 5 // Slower (the zero-based :even sele

Test_赋值多个class选择器

ZC: 元素属性"class"中,可以赋值 多个 class选择器 ZC: 多个选择器,相同的属性设置,哪个起作用:晚定义的起作用 1.代码 <!--内联 HTML5--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .bgc01 { width :500px; he