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

随机推荐

基于visual Studio2013解决面试题之1408桶排序
题目
最大似然预计（Maximum likelihood estimation）
一.定义最大似然预计是一种依据样本来预计模型參数的方法.其思想是,对于已知的样本,如果它服从某种模型,预计模型中未知的參数,使该模型出现这些样本的概率最大.这样就得到了未知參数的预计值. 二 ...
QT在构造函数中退出程序
原地址:http://www.tuicool.com/articles/RZnYze 在QT的界面类的构造过程中,如果想退出整个程序,暴力的做法是调用exit(-1)进行,另外一种不是那么暴力的方式如 ...
Thymeleaf Javascript 取值
<script th:inline="javascript"> var openid = /*[[${session.wxuser.openId}]]*/ </s ...
通过判断浏览器的userAgent，用正则来判断是否是ios和Android客户端
<script type="text/javascript">var u = navigator.userAgent, app = navigator.appVersi ...
hdu4726贪心
Kia's Calculation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
Android手势识别（单击双击抬起短按长按滚动滑动）
对于触摸屏,其原生的消息无非按下.抬起.移动这几种,我们只需要简单重载onTouch或者设置触摸侦听器setOnTouchListener即可进行处理.不过,为了提高我们的APP的用户体验,有时候我们 ...
ASP.NET - JQuery的.getJSON给Dropdownlist绑定Item
http://www.cnblogs.com/Mac_Hui/archive/2010/07/27/1785864.html 1.首先建立以个.ashx文件(Generic Handler),在此文件 ...
使用mex进行混合编程的一些注意事项
1.mxGetPr的使用: Use mxGetPr on arrays of type double only. Use mxIsDouble to validate the mxArray type ...
iText 文本
iText中用文本块(Chunk).短语(Phrase)和段落(paragraph)处理文本. 文本块(Chunk)是处理文本的最小单位,有一串带格式(包括字体.颜色.大小)的字符串组成.如以下代码就 ...

ExtJs选择器

ExtJs选择器的更多相关文章

随机推荐

热门专题