文中使用函数“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 步骤二 列模型...
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基础 ....................................................................................................... 24 DomQuery基础 ......................................................................
包括从基础到深入的EXTjs组件解释，EXTjs实例，EXT核心API详解，Ext.DomQuery类
6.4 Ext.core.DomQuery 6.4.1 compile（） 6.4.2 filter（） 6.4.3 is（） 6.4.4 jsSelect（） 6.4.5 selectNode（） 6.5 Ext.util.CSS 6.5.1 createStyleSheet（） 6.5.2 getRule（） 6.5.3 ...
1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用...
6.4 DomQuery入门 6.4.1 元素选择符Selector 6.4.2 属性选择符Attributes Selectors 6.4.3 CSS值元素选择符 6.4.4 Ext.query与Ext.select 6.5 应用模板 6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计...
6.4 DomQuery入门 6.4.1 元素选择符Selector 6.4.2 属性选择符Attributes Selectors 6.4.3 CSS值元素选择符 6.4.4 Ext.query与Ext.select 6.5 应用模板 6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计...