Tutorial:DomQuery Basics(Chinese)
From Learn About the Ext JavaScript Library
Summary: DomQuery基础 |
Author: Bernard Chhun (译者:Frank Cheung) |
Published: 2007-8-5 |
Ext Version: 1.1+ / 2.0+ |
Languages: English ChineseKorean |
本教程旨在为读者了解怎样利用单例对象Ext.DomQuery,浏览穿梭于DOM树之中和获取对象,提供一个起点。
Contents[hide] |
DomQuery基础
DomQuery的select函数有两个参数。第一个是选择符字符(selector string )而第二个是欲生成查询的标签ID(TAG ID)。本文中我准备使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式。
这是要入手的html:
<html> <head> <script type= src=></script> </head> <body> <script type= src=></script> <script type= src=></script> <div id= => Im a span within the div a foo class</span> <a href= target=>An ExtJs link</a> </div> <div id= => my id: foo, my : bar <p>Im a span within the div a bar class</span> <a href=>An internal link</a> </div> </body> </hmlt>
第一部分:元素选择符Selector
假设我想获取文档内所有的“span”标签:
Ext.; Ext., ;
注意刚才怎么传入一个普通的字符串作为第一个参数。
按id获取标签,你需要加上“#”的前缀:
Ext.;
按class name获取标签,你需要加上“.”的前缀:
Ext.;
你也可以使用关键字“*”来获取所有的元素:
Ext.;
要获取子标签,我们只须在两个选择符之间插入一个空格:
Ext.; Ext.;
还有三个的元素选择符,待后续的教程会叙述。 ""
如果朋友你觉得这里说得太简单的话,你可以选择到DomQuery 文档看看,可能会有不少收获:)
第二部分:属性选择符Attributes selectors
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 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] " );
第三部分: CSS值元素选择符
这些选择符会匹配DOM元素的style属性。尝试在那份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" style ="color:red;" >
我是一个div ==> 我的id是: bar, 我的class: foo
< span class ="bar" style ="color:pink;" > I'm a span within the div with a foo class </ span >
< a href ="http://www.extjs.com" temp_href ="http://www.extjs.com" target ="_blank" style ="color:yellow;" > An ExtJs link with a blank target! </ a >
</ div >
< div id ="foo" class ="bar" style ="color:fushia;" >
my id: foo, my class: bar
< p > I'm a P tag within the foo div </ p >
< span class ="bar" style ="color:brown;" > I'm a span within the div with a bar class </ span >
< a href ="#" temp_href ="#" style ="color:green;" > An internal link </ a >
</ div >
</ body >
</ html >
基于这个CSS的颜色值我们不会作任何查询,但可以是其它的内容。它的格式规定是这样的:
元素{属性 操作符 值}
注意我在这里是怎么插入一个不同的括号。
所以,操作符(operators)和属性选择符(attribute selectors)是一样的。
Ext.query( " *{color=red} " ); // [div#bar.foo]
// 获取所有粉红颜色的并且是有红色子元素的元素
Ext.query( " *{color=red} *{color=pink} " ); // [span.bar]
// 获取所有不是红色文字的元素
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 www.extjs.com, div#foo.bar, p, span.bar, a test.html#]
// 获取所有颜色属性是从“yel”开始的元素
Ext.query( " *{color^=yel} " ); // [a www.extjs.com]
// 获取所有颜色属性是以“ow”结束的元素
Ext.query( " *{color$=ow} " ); // [a www.extjs.com]
// 获取所有颜色属性包含“ow”字符的元素
Ext.query( " *{color*=ow} " ); // [a www.extjs.com, span.bar]
第四部分:伪类选择符Pseudo Classes selectors
仍然是刚才的网页,但是有所不同的只是新加上了一个UL元素、一个TABLE元素和一个FORM元素,以便我们可以使用不同的伪类选择符,来获取节点。
< 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" style ="color:red; border: 2px dotted red; margin:5px; padding:5px;" >
I'm a div ==> my id: bar, my class: foo
< span class ="bar" style ="color:pink;" > I'm a span within the div with a foo class </ span >
< a href ="http://www.extjs.com" target ="_blank" style ="color:yellow;" > An ExtJs link with a blank target! </ a >
</ div >
< div id ="foo" class ="bar" style ="color:fushia; border: 2px dotted black; margin:5px; padding:5px;" >
my id: foo, my class: bar
< p > I'm a P tag within the foo div </ p >
< span class ="bar" style ="color:brown;" > I'm a span within the div with a bar class </ span >
< a href ="#" style ="color:green;" > An internal link </ a >
</ div >
< div style ="border:2px dotted pink; margin:5px; padding:5px;" >
< ul >
< li > Some choice #1 </ li >
< li > Some choice #2 </ li >
< li > Some choice #3 </ li >
< li > Some choice #4 with a < a href ="#" > link </ a ></ li >
</ ul >
< table style ="border:1px dotted black;" >
< tr style ="color:pink" >
< td > 1st row, 1st column </ td >
< td > 1st row, 2nd column </ td >
</ tr >
< tr style ="color:brown" >
< td colspan ="2" > 2nd row, colspanned! </ td >
</ tr >
< tr >
< td > 3rd row, 1st column </ td >
< td > 3rd row, 2nd column </ td >
</ tr >
</ table >
</ div >
< div style ="border:2px dotted red; margin:5px; padding:5px;" >
< form >
< input id ="chked" type ="checkbox" checked />< label for ="chked" > I'm checked </ label >
< br />< br />
< input id ="notChked" type ="checkbox" />< label for ="notChked" > not me brotha! </ label >
</ form >
</ div >
</ body >
</ html >
off we go:
Ext.; Ext. Ext. Ext. Ext. Ext. Ext. Ext. Ext. Ext. Ext. Ext. div#bar., div#foo., div Ext. Ext. Ext.
总结
API依然最重要的资讯来源。本篇教程做的仅仅是拿一张现实中的网页示范了一些结果。
如读者已了解过API的DomQuery内容,可跳过本文,直接阅读 DomQuery advanced tutorial!