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扩展类 ...

随机推荐

EL显示List里嵌套map（Spring MVC3）返回的model
<c:forEach items="${requestScope.courseList}" var="cMap" varStatus="stat ...
[置顶] 程序员面试之道（《程序员面试笔试宝典》）之看着别人手拿大把的offer，不淡定了怎么办？
不管是在哪里,不管发生什么事,不要随便放下自己. ——<当男人恋爱时> 很多求职者都会面临一个问题:别人手拿大把大把的offer了,而自己却是两手空空,别人签约之后已经过着“猪狗不如”的悠 ...
ctfmon.exe开机无法自己主动启动
打开命令提示符(開始菜单--执行--输入:cmd),输入下面命令(复制粘贴就可以): reg add HKCU\Software\Microsoft\Windows\CurrentVersion\Ru ...
linux内核中send与recv函数详解
Linux send与recv函数详解 1.简介 #include <sys/socket.h> ssize_t recv(int sockfd, void *buff, size_t n ...
cocos2d-x在win32和iOS、android下获取当前系统时间的方法
最近在游戏里要显示当前系统时间的功能,网上一搜很多写着获取的方法,大都是如下 struct cc_timeval now; CCTime::gettimeofdayCocos2d(&now, ...
centOS设为文本启动方式
centOS图形界面须要点用系统大量的内存和CPU资源,对于server而言,高效率是最重要的,因此将Centos 默认启动改为文本方式. 在终端中输入: vi /etc/inittab 有段说明文字 ...
使用JDBC对数据库实现批处理操作
本篇讲述如何使用JDBC对数据库实现批处理操作.很多时候单条SQL命令不能满足我们的需求,我们需要对数据库一次实现很多操作,需要发送一批SQL命令给数据库执行. 而JDBC也提供了相应的方法给我们实现 ...
Indy10.2.5的危险做法
为了排查一个Bug今天无意看了看Indy源码,结果吓了一跳.TIdIOHandler.ReadLongWord函数用于读取通讯数据并转换成LongWord类型返回,它做用了一种危险的做法可能会导致数据 ...
oracle 表连接 - hash join 哈希连接
一. hash 连接(哈希连接)原理指的是两个表连接时, 先利用两表中记录较少的表在内存中建立 hash 表, 然后扫描记录较多的表并探測 hash 表, 找出与 hash 表相匹配的行来得到结果集 ...
FairScheduler的任务调度机制——assignTasks
首先需要了解FairScheduler是如何在各个Pool之间分配资源,以及每个Pool如何在Job之间分配资源的.FairScheduler的分配资源发生在update()方法中,而该方法由一个线程 ...

ExtJs选择器

ExtJs选择器的更多相关文章

随机推荐

热门专题