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);

Extjs学习笔记--(六,选择器)
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类名

 

 

属性选择符

Extjs学习笔记--(六,选择器),布布扣,bubuko.com

Extjs学习笔记--(六,选择器)

上一篇:Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪


下一篇:ASP.net 判断上传文件类型的三种方法