作为一个初学者,最开始需要掌握关于 ext js 的选择器。那么,我们现在分三部分学习。只要你学习过jquery的知识,这个就是小菜一碟了,语法基本上类似。
第一部分:元素选择符Selector
Ext.query("span"); // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span", "foo"); // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。注意刚才怎么传入一个普通的字符串作为第一个参数。
Ext.query("#foo"); //按id获取标签,你需要加上“#”的前缀,这个查询会返回包含我们foo div一个元素的数组!
Ext.query(".foo"); //按class name获取标签,你需要加上“.”的前缀,这个查询会返回有一个元素的数组, 包含与之前例子一样的div但是我们使用了class name来获取
Ext.query("*"); //你也可以使用关键字“*”来获取所有的元素,这会返回一个数组,包含文档的所有元素。
Ext.query("div p"); //要获取子标签,我们只须在两个选择符之间插入一个空格,这会返回有一个元素的数组,包含p标签的div标签
Ext.query("div span"); // 这会返回有两个元素的数组,包含span标签的div标签
第二部分:属性选择符Attributes selectors
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。
Ext.query("*[class]"); // 我们检查出任何存在有class属性的元素。 // 这个查询会返回5个元素的数组。结果: [body#ext-gen2.ext-
gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
Ext.query("*[class=bar]"); // 这会得到class等于“bar”的所有元素
Ext.query("*[class!=bar]"); // 这会得到class不等于“bar”的所有元素
Ext.query("*[class^=b]"); // 这会得到class从“b”字头开始的所有元素
Ext.query("*[class$=r]"); //这会得到class由“r”结尾的所有元素
Ext.query("*[class*=a]"); //这会得到在class中抽出“a”字符的所有元素
第三部分: CSS值元素选择符
这些选择符会匹配DOM元素的style属性。尝试在那份html中加上一些颜色:
先看下面的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" 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" 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="#" 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#]
Ext.query("*{color^=yel}"); // 获取所有颜色属性是从“yel”开始的元素 结果:[a www.extjs.com]
Ext.query("*{color$=ow}"); // 获取所有颜色属性是以“ow”结束的元素 结果: [a www.extjs.com]
Ext.query("*{color*=ow}"); // 获取所有颜色属性包含“ow”字符的元素 结果: [a www.extjs.com, span.bar]