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


Posted in Javascript onSeptember 26, 2011

前面写的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://www.extjs.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> 
<div name="BlueLotus7">BlueLotus7@126.com</div> 
</body> 
</hmlt>

(1)根据标记取:// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span");
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");// 这会返回有一个元素的数组,内容为div标签下的p标签
Ext.query("div p");
// 这会返回有两个元素的数组,内容为div标签下的span标签
Ext.query("div span");(2)根据ID取:// 这个查询会返回包含我们foo div一个元素的数组!
Ext.query("#foo"); //或者直接Ext.get("foo");(3)根据class的Name去取:Ext.query(".foo");// 这个查询会返回5个元素的数组。
Ext.query("*[class]"); // 结果: [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar](4)万能法去取:(用这个方法可以通过id、name、class、css等取)// 这会得到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]");//这会得到name等于“BlueLotus7”的所有元素
Ext.query("*[name=BlueLotus7]");
我们换个html代码:
<html> 
<head> 
</head> 
<body> 
<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>

// 获取所以红色的元素
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]
(5)伪操作符取法换个html:
<html> 
<head> 
</head> 
<body> 
<div id="bar" class="foo" style="color:red; border: 2px dotted red; margin:5px; padding:5px;"> 
我是一个div ==> 我的id是bar,我的class是foo 
<span class="bar" style="color:pink;">这里是span元素,外层的div元素有foo的class属性</span> 
<a href="http://www.extjs.com" target="_blank" style="color:yellow;">设置blank=target的ExtJS链接</a> 
</div> 
<div id="foo" class="bar" style="color:fushia; border: 2px dotted black; margin:5px; padding:5px;"> 
这里的id是:foo,这里的class是bar 
<p>“foo” div包围下的p元素。</p> 
<span class="bar" style="color:brown;">这里是一个span元素,外层是div包围着,span还有一个bar的class属性。</span> 
<a href="#" style="color:green;">内置链接</a> 
</div> 
<div style="border:2px dotted pink; margin:5px; padding:5px;"> 
<ul> 
<li>条目 #1</li> 
<li>条目 #2</li> 
<li>条目 #3</li> 
<li>条目 #4 带有<a href="#">链接</a></li> 
</ul> 
<table style="border:1px dotted black;"> 
<tr style="color:pink"> 
<td>第一行,第一列</td> 
<td>第一行,第二列</td> 
</tr> 
<tr style="color:brown"> 
<td colspan="2">第二行,已合并单元格!</td> 
</tr> 
<tr> 
<td>第三行,第一列</td> 
<td>第三行,第二列</td> 
</tr> 
</table> 
</div> 
<div style="border:2px dotted red; margin:5px; padding:5px;"> 
<form> 
<input id="chked" type="checkbox" checked/><label for="chked">已点击</label> 
<br /><br /> 
<input id="notChked" type="checkbox" /><label for="notChked">not me brotha!</label> 
</form> 
</div> 
</body> 
</html>

//SPAN元素为其父元素的第一个子元素
Ext.query("span:first-child"); // [span.bar]
//A元素为其父元素的最后一个子元素
Ext.query("a:last-child") // [a www.extjs.com, 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]
Javascript 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
JavaScript原型链详解
Nov 07 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 #Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 #Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 #Javascript
在Windows上安装Node.js模块的方法
Sep 25 #Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 #Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 #Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 #Javascript
You might like
虫族 Zerg 历史背景
2020/03/14 星际争霸
PHP4之COOKIE支持详解
2006/10/09 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
关于JavaScript中string 的replace
2013/04/12 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JSONP之我见
2015/03/24 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
vue使用vue-cli快速创建工程
2017/07/28 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python实现PCA降维的示例详解
2020/02/24 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
竞选团支书演讲稿
2014/04/28 职场文书
广告学专业求职信
2014/06/19 职场文书
争先创优个人总结
2015/03/04 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技