本教程旨在为读者了解怎样利用单例对象Ext.DomQuery,浏览穿梭于DOM树之中和获取对象,提供一个起点。
DomQuery的select函数有两个参数。第一个是选择符字符(selector string )而第二个是欲生成查询的标签ID(TAG ID)。
本文中我准备使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式。
这是要入手的html:
<html>
<head>
<script type="text/javascript" src="../js/firebug/firebug.js"></script>
</head>
<body>
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-core.js"></script>
<div id="bar" class="foo">
I'm a div ==> my id: bar, my class: foo
<span class="bar">I'm a span within the div with a foo class</span>
<a href="http://www.Vevb.com" target="_blank">An ExtJs link</a>
</div>
<div id="foo" class="bar">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar">I'm a span within the div with a bar class</span>
<a href="#">An internal link</a>
</div>
</body>
</html>
假设我想获取文档内所有的“span”标签:
// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。Ext.query("span"); // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。Ext.query("span", "foo");
注意刚才怎么传入一个普通的字符串作为第一个参数。
按id获取标签,你需要加上“#”的前缀:
// 这个查询会返回包含我们foo div一个元素的数组!Ext.query("#foo");
按class name获取标签,你需要加上“.”的前缀:
/*这个查询会返回有一个元素的数组,包含与之前例子一样的div但是我们使用了class name来获取*/Ext.query(".foo");
你也可以使用关键字“*”来获取所有的元素:
// 这会返回一个数组,包含文档的所有元素。Ext.query("*");
要获取子标签,我们只须在两个选择符之间插入一个空格:
// 这会返回有一个元素的数组,包含p标签的div标签 Ext.query("div p");// 这会返回有两个元素的数组,包含span标签的div标签 Ext.query("div span");
还有三个的元素选择符,待后续的教程会叙述。 ""
如果朋友你觉得这里说得太简单的话,你可以选择到DomQuery 文档看看,可能会有不少收获:)
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。
// 我们检查出任何存在有class属性的元素。// 这个查询会返回5个元素的数组。Ext.query("*[class]"); // 结果: [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
现在我们针对特定的class属性进行搜索。
// 这会得到class等于“bar”的所有元素Ext.query("*[class=bar]");// 这会得到class不等于“bar”的所有元素Ext.query("*[class!=bar]"); // 这会得到class从“b”字头开始的所有元素Ext.query("*[class^=b]"); //这会得到class由“r”结尾的所有元素Ext.query("*[class$=r]"); //这会得到在class中抽出“a”字符的所有元素Ext.query("*[class*=a]");
新闻热点
疑难解答