`
cyd198633
  • 浏览: 26170 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Ext.get() 和 Ext.query() 取元素方式

 
阅读更多
想要利用ExtJS的库函数对DOM进行各类操作,就要得到Element类型的对象,但是Ext.get()取到的虽然是Element,但是参数只能是id,如果大家对jQuery的selector方式很喜欢和崇拜,那么就一定要学习Ext.get()和Ext.query()的组合(个人推荐)方式。
前面写的get()和query()我都省略参数了,先看看文档中的函数原型:
Ext.get( Mixed el ) : Element
Parameters:
el : Mixed
The id of the node, a DOM Node or an existing Element.
Returns:
Element
The Element object

Ext.query( String path, [Node root] ) : Array
Parameters:
path : String
The selector/xpath query
root : Node
(optional) The start of the query (defaults to document).
Returns:
Array

query函数返回的其实是一个DOM Node的数组,而Ext.get的参数el可以是DOM Node,哈哈,明白了吗?就是说要实现最灵活的取法,应该用query取到DOM Node然后交给get去变成Element。也就是:

var x=Ext.query(QueryStr);

//我为什么不写成内联函数形式?因为这里的x只能是一个元素,而上面那句的x是一个Array,大家自己转换和处理吧

var y=Ext.get(x);

那么接下来需要介绍QueryStr的格式(其实和jQuery里的selector的格式很像啦),至于获得Element后可以干些啥,大家自己去看ExtJS文档里关于Ext.Element的说明,我就不摘过来了。

先给一个html代码,好做演示说明
(1)根据标记取:

Ext.query(“span”);            // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。

Ext.query(“span”, “foo”);  // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。

Ext.query(“div p”);             // 这会返回有一个元素的数组,内容为div标签下的p标签

Ext.query(“div span”);      // 这会返回有两个元素的数组,内容为div标签下的span标签

(2)根据ID取:

Ext.query(“#foo”);                         //这个查询会返回包含我们一个id为foo的元素的数组!或者直接Ext.get(“foo”);

(3)根据class的Name去取:Ext.query(“.foo”); // 这个查询会返回多个含有class为foo的元素的数 组。

Ext.query(“*[class]“);

(4)万能法去取:(用这个方法可以通过id、name、class、css等取)

Ext.query(“*[class=bar]“);                           // 这会得到class等于“bar”的所有元素

Ext.query(“*[class!=bar]“);                          // 这会得到class不等于“bar”的所有元素

Ext.query(“*[class^=b]“);                              // 这会得到class从“b”字头开始的所有元素

Ext.query(“*[class$=r]“);                               //这会得到class由“r”结尾的所有元素

Ext.query(“*[class*=a]“);                               //这会得到在class中抽出“a”字符的所有元素

Ext.query(“*[name=BlueLotus7]“);            //这会得到name等于“BlueLotus7”的所有元素
分享到:
评论

相关推荐

    Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式

    前面写的get()和query()我都省略参数了,先看看文档中的函数原型: Ext.get( Mixed el ) : Element Parameters: el : Mixed The id of the node, a DOM Node or an existing Element. Returns: Element The Element ...

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...

    Ext Js权威指南(.zip.001

    6.1.2 使用ext.query选择页面元素 / 215 6.1.3 基本选择符 / 223 6.1.4 属性选择符 / 229 6.1.5 css属性值选择符 / 234 6.1.6 伪类选择符 / 235 6.1.7 扩展选择器 / 248 6.1.8 ext.domquery的使用方法 / 249 ...

    EXTJS总结.txt

    1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注:享元模式(Flyweight Design ...

    ExtJSWeb应用程序开发指南(第2版)

    6.2.4 Ext.query() 6.2.5 Ext.getCmp() 6.2.6 Ext.getDom() 6.2.7 Ext.isEmpty() 6.2.8 Ext.namespace() 6.2.9 Ext.each() 6.2.1 0Ext.apply() 6.2.1 1Ext.encode() 6.2.1 2Ext.htmlDecode...

    Ext深入浅出 数据传输

    11.1.3 query函数和select函数.....260 11.1.4 encode函数和decode函数...263 11.1.5 extend函数.............................265 11.1.6 apply和applyIf函数..........266 11.1.7 namespace函数.....................

    ext 编程开发指南

    这里`Ext.query`方法返回一个包含匹配元素的数组。 ##### 响应事件 EXT简化了事件处理,使得绑定事件变得非常直观: ```javascript Ext.get('someElement').on('click', function() { // 当元素被点击时执行的回...

    EXT JS 3.0 Core Class Diagram

    - `Ext.query()`: 类似于jQuery的选择器,用于选取DOM元素。 - `Ext.removeNode()`: 删除DOM节点。 - `Ext.toArray()`: 将对象转换为数组。 - `Ext.urlDecode()`, `Ext.urlEncode()`: URL编码和解码。 2. `Ext....

    EXT核心API详解(第一部分)

    `Ext.get`和`Ext.fly`方法用于获取Element实例,`Ext.query`则类似于jQuery的`$`,用于选取DOM元素。Element对象还支持事件监听和动画效果。 3. **基本数据类型扩展**:EXT JS扩展了JavaScript的基本数据类型,如...

    ext入门必学.docx

    EXT为此提供了`Ext.select`方法,可以按照CSS选择器获取一组元素,或者使用`Ext.query`(等同于jQuery的`$`函数)进行DOM查询。 6. 学习路径 如果你时间有限,建议优先深入学习Ext.Element,因为它是EXT库的基础,...

    Ext获取对象

    类似于jQuery,Ext JS提供了`Ext.query`(基于Sizzle引擎)方法来查询DOM元素。例如,`var elements = Ext.query('.myClass')`将返回所有类名为`myClass`的元素数组。 3. **父容器查找**: 如果知道一个对象存在...

    Extjs常用函数和事件.pdf

    2. `Ext.get(Mixed el)`:这个函数用于获取DOM元素,可以接受ID、DOM元素对象或者Ext.Element对象作为参数,并返回一个Ext.Element封装的对象,便于进行进一步的操作。 3. `Ext.select(String/Array selector, ...

    Ext Core手册word版

    然而,直接操作DOM可能涉及性能和兼容性问题,Ext Core通过`Ext.Element`类提供了更高级和便捷的操作方式。`Ext.Element`的方法可以分为几个类别,如: 1. CSS和样式方法:如`setStyle`用于设置元素的CSS样式,`...

    EXT dojochina Ext类实例方法.rar

    4. **Ext.ComponentQuery.query()**: 使用CSS选择器风格的语法,查询EXT JS中的组件,返回匹配组件的数组。 5. **Ext.getCmp()**: 通过组件的ID获取组件实例,这是EXT JS中获取特定组件常用的方式。 6. **...

    Extjs-常用函数和事件

    4. **Ext.query**: 类似于jQuery的`$()`,用于根据CSS选择器选取元素,但返回的是一个NodeList或数组。 5. **Ext.getCmp**: 获取具有特定ID的Ext组件。这个方法是基于组件的ID,而不是DOM元素的ID。 6. **Ext.get...

    Ext combo 下拉框级联

    Combobox是Ext JS中一个用于创建下拉列表的控件,它结合了输入框和下拉列表的功能。通过配置store、displayField、valueField等属性,可以实现数据的展示和选择。 1. **配置store** - Store是Ext JS中用于存储数据...

Global site tag (gtag.js) - Google Analytics