Ext选择器

文档对象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.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的元素

posted @ 2016-09-30 15:41  阿银  阅读(1841)  评论(0编辑  收藏  举报