ExtJs选择器

想要利用ExtJS的库函数对DOM进行各类操作，就要得到Element类型的对象，但是Ext.get()取到的虽然是Element，但是参数只能是id，如果大家对jQuery的selector方式很喜欢和崇拜，那么就一定要学习Ext.get()和Ext.query()的组合方式。

前面写的get()和query()我都省略参数了，先看看文档中的函数原型：

Ext.get(Mixed el ):Element
Parameters:
el :Mixed
The id of the node, a DOM Nodeor an existing Element.
Returns:
Element
TheElementobject

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>

</html>

（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代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<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;">AnExtJs link with a blank target!</a></div>

<div id="foo"class="bar" style="color:fushia;">my id: foo,myclass: 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：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<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]

ExtJs选择器的更多相关文章

Extjs学习笔记--（六，选择器）
文档对象dom是javascript与页面元素的桥梁选择器的作用就是通过元素的标签名,属性名,css属性名对页面进行快速,准确的定位及选择 Extjs的选择器:Ext.DomQuery Ext.qu ...
Extjs文件选择器
Ext.hoo.component.FileBrowserComponent.js /** * Ext.hoo.component.FileBrowserWindow 系统文件浏览选择组件,可以选定电 ...
ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...
ExtJS 4.2 Date组件扩展：添加清除按钮
ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. ...
ExtJs基础知识总结：Dom、IFrame和TreePanel、TabPanel（三）
概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFram ...
Extjs DOM操作的几个类
Extjs提供了非常完善的DOM操作方法,可以方便的操作DOM.另外Extjs还可以方便的查询DOM元素,并把这些DOM元素封装成Ext.Element对象,通过Element对象我们可以操作DOM元 ...
ExtJs知识点概述
1.前言 ExtJS的前身是YUI(Yahoo User Interface).经过不断的发展与改进,ExtJS现在已经成功发布到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基 ...
ExtJs 4 中的MVC应用架构
一.ExtJs 4.x MVC模式的原理与作用大规模客户端应用通常不好实现不好组织也不好维护,因为功能和人力的不断增加,这些应用的规模很快就会超出掌控能力,ExtJS4带来了一个新的应用架构,不但可 ...
ExtJS远程数据-本地分页
背景一般情况下,分页展示是前端只负责展示,后台通过SQL语句实现分页查询.当总数据量在千条以下,适合一次性查询出符合条件的所有数据,让前端页面负责分页也是一种选择. 实例现通过ExtJS 4扩展类 ...

随机推荐

修改Android 4.2.2的原生Camera引出的java.lang.UnsatisfiedLinkError: Native method not found，及解决方法
修改Android 4.2.2的原生Camera应用,做一些定制,将Camera的包名从之前的 package com.android.* 修改成了com.zhao3546.*. 调整后,应用可以正常 ...
KMP算法 KMP模式匹配一（串）
A - KMP模式匹配一(串) Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:131072KB ...
ZOJ 3790 Consecutive Blocks 模拟题
problemCode=3790">Consecutive Blocks 先离散一下,然后模拟,把一种颜色i所在的位置都放入G[i]中.然后枚举一下终点位置,滑动窗体使得起点和终点间花 ...
Eclipse用法和技巧一：还原视图和编辑器
链接地址:http://blog.csdn.net/maybe_windleave/article/details/8763744 在实际使用eclipse过程中,由于经常关闭或者打开视图,某一刻你会 ...
Qt图片显示效率的比较转
转http://blog.sina.com.cn/s/blog_5c70dfc80100r257.html 在Qt中处理图片一般都要用到QImage类,但是QImage的对象不能够直接显示出来,要想能 ...
Linux下select函数的使用
一.Select 函数详细介绍 Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如connect. accept.recv ...
[jQuery] check if an id exists - Google 网上论坛
[jQuery] check if an id exists - Google 网上论坛 From: http://docs.jquery.com/Frequently_Asked_Questions ...
js实现表格的选中一行-------Day58
最開始想很多其它的用js来动态操作表格,是由于在应用了easyUI之后,发现直接写一个<table id="tt"></table>,这就够了,界面里面就剩 ...
FFMPEG H264/H265 编码延迟问题
最新使用FFmpeg进行H264的编码时,发现视频编码有延迟,不是实时编码.进过一番研究发现,仅仅要在调用avcodec_open2函数打开编码器时,设置AVDictionary參数就可以.关键代码 ...
Servlet的学习之Session（2）
在上一篇中我们学习了Session对象默认在一个会话过程中,由服务器创建,能保存在这个会话过程中用户访问多个web资源时产生的需要保存的数据,并在访问服务器中其他web资源时可以将这些数据从Sessi ...

ExtJs选择器

ExtJs选择器的更多相关文章

随机推荐

热门专题