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 相关文章推荐
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
js控制div弹出层实现方法
May 11 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
Angular2自定义分页组件
Apr 19 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
JavaScript对象原型链原理详解
Feb 05 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
js中作用域的实例解析
2017/03/16 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
layui 实现表格某一列显示图标
2019/09/19 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Python continue语句用法实例
2014/03/11 Python
Python素数检测的方法
2015/05/11 Python
Python算法应用实战之栈详解
2017/02/04 Python
python基于opencv检测程序运行效率
2019/12/28 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
大学英语专业求职信
2014/06/21 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
楚门的世界观后感
2015/06/03 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
患者身份识别制度
2015/08/06 职场文书
2019新员工心得体会
2019/06/25 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang