Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式

时间：2021-05-28

前面写的get()和query()我都省略参数了，先看看文档中的函数原型：
Ext.get( Mixed el ) : Element
Parameters:
el : Mixed
The id of the node, a DOM Node or an existing Element.
Returns:
Element
The Element object
Ext.query( String path, [Node root] ) : Array
Parameters:
path : String
The selector/xpath query
root : Node
(optional) The start of the query (defaults to document).
Returns:
Array
query函数返回的其实是一个DOM Node的数组，而Ext.get的参数el可以是DOM Node，哈哈，明白了吗？就是说要实现最灵活的取法，应该用query取到DOM Node然后交给get去变成Element。也就是：
var x=Ext.query(QueryStr);
//我为什么不写成内联函数形式？因为这里的x只能是一个元素，而上面那句的x是一个Array，大家自己转换和处理吧
var y=Ext.get(x);
那么接下来需要介绍QueryStr的格式（其实和jQuery里的selector的格式很像啦），至于获得Element后可以干些啥，大家自己去看ExtJS文档里关于Ext.Element的说明，我就不摘过来了。
先给一个html代码，好做演示说明
复制代码 代码如下:
<html>
<body>
<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://, a test.html#]
//SPAN元素为其父元素的第2个子元素（由1开始的个数）
Ext.query("span:nth-child(2)") // [span.bar]
//TR元素为其父元素的奇数个数的子元素
Ext.query("tr:nth-child(odd)") // [tr, tr]
//LI元素为其父元素的奇数个数的子元素
Ext.query("li:nth-child(even)") // [li, li]
//返回A元素，A元素为其父元素的唯一子元素
Ext.query("a:only-child") // [a test.html#]
//返回所有选中的（checked）的INPUT元素
Ext.query("input:checked") // [input#chked on]
//返回第一个的TR元素
Ext.query("tr:first") // [tr]
//返回最后一个的INPUT元素
Ext.query("input:last") // [input#notChked on]
//返回第二个的TD元素
Ext.query("td:nth(2)") // [td]
//返回每一个包含“within”字符串的DIV
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
//返回没有包含FORM子元素以外的那些DIV
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
//返回包含有A元素的那些DIV集合
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
//返回接着会继续有TD的那些TD集合。尤其一个地方是，如果使用了colspan属性的TD便会忽略
Ext.query("td:next(td)") // [td, td]
//返回居前于INPUT元素的那些LABEL元素集合
Ext.query("label:prev(input)") //[label, label]

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章