第3章 EXT-DomQuery基础
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第3章DomQuery基础
DomQuery基础
DomQuery的select函数有两个参数。第一个是选择符字符（selector string ）而第二个是欲生成查询的标签ID(TAG ID)。本文中我准备使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式。这是要入手的html：
第一部分：元素选择符Selector
假设我想获取文档内所有的“span”标签：
// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。Ext.query("span");
// 这个查询会返回有一个元素的数组因为查询到了id=”foo”的div的span标签。
Ext.query("span", "foo");
注意刚才怎么传入一个普通的字符串作为第一个参数。
按id获取标签，你需要加上“#”的前缀：
// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");
按class name获取标签，你需要加上“.”的前缀：
/*这个查询会返回有一个元素的数组，
包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");
你也可以使用关键字“*”来获取所有的元素：
// 这会返回一个数组，包含文档的所有元素。
Ext.query("*"); //[html, head, link, 11 more...]
要获取子标签，我们只须在两个选择符之间插入一个空格：
// 这会返回有一个元素的数组，包含p标签的div标签
Ext.query("div p");
// 这会返回有两个元素的数组，包含span标签的div标签
Ext.query("div span");
第二部分：属性选择符Attributes selectors
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id或class。
// 我们检查出任何存在有class属性的元素。用css的name查询时用[]
// 这个查询会返回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]");
第三部分： CSS值元素选择符
Ext.query("*{color!=red}");
//[html, head, script firebug.js, link, body#ext-gen2.ext-gecko,
// script ext-base.js, script ext-core.js, span.bar,
//a , div#foo.bar, p, span.bar, a test.html#]
// 获取所有颜色属性是从“yel”开始的元素
Ext.query("*{color^=yel}"); // [a ]
// 获取所有颜色属性是以“ow”结束的元素
Ext.query("*{color$=ow}"); // [a ]
// 获取所有颜色属性包含“ow”字符的元素
Ext/query(“*{color*=ow}”);
// [a , span.bar]
第四部分：伪类选择符Pseudo Classes selectors
仍然是刚才的网页，但是有所不同的只是新加上了一个UL元素、一个TABLE 元素和一个FORM元素，以便我们可以使用不同的伪类选择符，来获取节点。