文中使用函数“Ext.query”但须谨记它是“Ext.DomQuery.select()”的简写方式。
HTML源码:
1: <html>
2: <head>
3: </head>
4: <body>
5: <script type="text/javascript" src="../ext/ext-base.js"></script>
6: <script type="text/javascript" src="../ext/ext-core.js"></script>
7: <div id="bar" class="foo">
8: I'm a div ==> my id: bar, my class: foo
9: <span class="bar">I'm a span within the div with a foo class</span>
10: <a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
11: </div>
12: <div id="foo" class="bar">
13: my id: foo, my class: bar
14: <p>I'm a P tag within the foo div</p>
15: <span class="bar">I'm a span within the div with a bar class</span>
16: <a href="#">An internal link</a>
17: </div>
18: </body>
19: </html>
第一部分：元素选择符Selector
JS源码:
1: // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
2: Ext.query("span");
3: // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
4: Ext.query("span", "foo");
5: // 这个查询会返回包含我们foo div一个元素的数组！
6: Ext.query("#foo");
7: /*这个查询会返回有一个元素的数组，包含与之前例子一样的div但是我们使用了class name来获取*/
8: Ext.query(".foo");
9: // 这会返回一个数组，包含文档的所有元素。
10: Ext.query("*");
11: // 这会返回有一个元素的数组，包含p标签的div标签
12: Ext.query("div p");
13: // 这会返回有两个元素的数组，包含span标签的div标签
14: Ext.query("div span");
第二部分：属性选择符Attributes selectors
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。
JS源码:
1: // 我们检查出任何存在有class属性的元素。
2: // 这个查询会返回5个元素的数组。
3: // -[body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
4: Ext.query("*[class]");
5: // 这会得到class等于“bar”的所有元素
6: Ext.query("*[class=bar]");
7: // 这会得到class不等于“bar”的所有元素
8: Ext.query("*[class!=bar]");
9: // 这会得到class从“b”字头开始的所有元素
10: Ext.query("*[class^=b]");
11: //这会得到class由“r”结尾的所有元素
12: Ext.query("*[class$=r]");
13: //这会得到在class中抽出“a”字符的所有元素
14: Ext.query("*[class*=a]");
第三部分： CSS值元素选择符
HTML源码:
1: <html>
2: <body>
3: <script type="text/javascript" src="../ext/ext-base.js"></script>
4: <script type="text/javascript" src="../ext/ext-core.js">
5: <div id="bar" class="foo" style="color:red;">
6: 我是一个div ==> 我的id是： bar, 我的class: foo
7: <span class="bar" style="color:pink;">I'm a span within the div with a foo class</span>
8: <a href="http://www.extjs.com" target="_blank" style="color:yellow;">An ExtJs link with a blank target!</a>
9: </div>
10: <div id="foo" class="bar" style="color:fushia;">
11: my id: foo, my class: bar
12: <p>I'm a P tag within the foo div</p>
13: <span class="bar" style="color:brown;">I'm a span within the div with a bar class</span>
14: <a href="#" style="color:green;">An internal link</a>
15: </div>
16: </body>
17: </html>
JS源码:
1: // 获取所以红色的元素
2: Ext.query("*{color=red}"); // [div#bar.foo]
3: // 获取所有粉红颜色的并且是有红色子元素的元素
4: Ext.query("*{color=red} *{color=pink}"); // [span.bar]
5: // 获取所有不是红色文字的元素
6: Ext.query("*{color!=red}");
7: //[html, head, script firebug.js, link, body#ext-gen2.ext-gecko,
8: // script ext-base.js, script ext-core.js, span.bar,
9: //a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]
10: // 获取所有颜色属性是从“yel”开始的元素
11: Ext.query("*{color^=yel}"); // [a www.extjs.com]
12: // 获取所有颜色属性是以“ow”结束的元素
13: Ext.query("*{color$=ow}"); // [a www.extjs.com]
14: // 获取所有颜色属性包含“ow”字符的元素
15: Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]
分享到：
相关推荐
DomQuery基础 Ext中的事件 简述模板 模板（Templates）的函数 教你创建Ext UI控件 事件的处理 Ext中的继承 Ext的类设计 Ajax通讯 JSON处理方法 函数的原型扩展 组件的使用: Tab标签页 Ext 1.x中的布局 Grid...
DomQuery基础 22 DomQuery基础 22 扩展EXT组件 29 文件的创建 30 Let's go 33 完成 35 EXT的布局（Layout） 37 简单的例子 38 加入内容 42 开始使用Grid 51 步骤一 定义数据(Data Definition) 51 步骤二 列模型...
19 重写公共变量 21 重写（Overriding）公共函数 21 DomQuery基础 22 DomQuery基础 22 扩展EXT组件 29 文件的创建 30 Let's go 33 完成 35 EXT的布局（Layout） 37 简单的例子 38...
19 重写公共变量 21 重写（Overriding）公共函数 21 DomQuery基础 22 DomQuery基础 22 扩展EXT组件 29 文件的创建 30 Let's go 33 完成 35 EXT的布局（Layout） 37 简单的例子 38...
DomQuery基础与EXT组件扩展 `DomQuery`是EXT提供的一个用于操作DOM的强大工具，它类似于jQuery，但专门针对EXT进行了优化。掌握`DomQuery`的基础用法对于高效开发EXT应用至关重要。此外，扩展EXT组件也是开发中...
- **DomQuery基础**: - 使用`Ext.get()`和`Ext.query()`方法进行DOM元素的选择。 - 可以使用链式调用来执行一系列操作。 #### 7. 扩展EXT组件 - **文件的创建**: 描述了如何创建新的EXT组件。 - **Let's go**: ...
#### DomQuery基础 DomQuery是ExtJS中的一个功能，用于简化DOM查询和操作。它提供了一系列方法，如`$`, `query`, `get`等，使得DOM操作变得更加简单直观。 #### 扩展EXT组件 ExtJS允许开发者扩展现有的组件，以满足...
DomQuery基础 - **DomQuery介绍**：DomQuery是ExtJS提供的一个强大的DOM操作库，类似于jQuery。 - **基础用法**：包括选择器、遍历、过滤等基础操作。 #### 13. 扩展EXT组件 - **组件扩展**：可以通过继承现有的...
DomQuery基础 - **基础操作**: - 选择DOM元素。 - 操作CSS样式。 - 绑定事件。 - **高级用法**: - 动态添加元素。 - 处理复杂的选择器。 #### 11. 模板(Templates)起步 - **HTML模板**: 创建基本的HTML模板。...
DomQuery基础 - **基础知识**：DomQuery是EXT中用于操作DOM的核心模块之一，提供了类似jQuery的语法来查询和操作DOM元素。 - **实际应用**：通过一系列实例展示了如何使用DomQuery来选取、修改DOM元素。 #### 12. ...
DomQuery 基础 - **选择器语法**：使用类似于 CSS 的选择器语法来选择页面中的元素。 - **链式调用**：支持链式调用来简化多步操作。 #### 6. 扩展 EXT 组件 - **创建自定义组件**：通过继承现有的组件来创建新...