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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
JavaScript 学习技巧
Feb 17 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
详解JS WebSocket断开原因和心跳机制
May 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
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
php二分法在IP地址查询中的应用
2008/08/12 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
python 元组和列表的区别
2020/12/30 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
竞聘演讲稿范文
2014/01/12 职场文书
中学生评语大全
2014/04/18 职场文书
工程部文员岗位职责
2015/02/04 职场文书
《失物招领》教学反思
2016/02/20 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby