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

随机推荐

JVM类加载过程学习总结
JVM类加载过程学习总结先不说JVM类加载的原理,先看实例: NormalTest类,包含了一个静态代码块,执行的任务就是打印一句话. /** * 在正常类加载条件下,看静态代码块是否会执行 * @ ...
vld(Visual Leak Detector) 内存泄露检测工具
初识Visual Leak Detector 灵活自由是C/C++语言的一大特色,而这也为C/C++程序员出了一个难题.当程序越来越复杂时,内存的管理也会变得越加复杂,稍有不慎就会出现内存问题.内存 ...
html5 canvas 实现一个简单的叮当猫头部
原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...
PHP学习之-1.1 PHP 可以做什么？
PHP 可以做什么? 为什么要学习PHP,"我可以用javascript来实现程序的编写."但是javascript的能力是有限的,javascript通常运行在浏览器(客户端), ...
第三天学习内容 if--else
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
ASP.NET - 多级分类
表结构: 表数据: 最终效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehin ...
Servlet过滤器——使用过滤器禁止浏览器缓存页面
1.概述 IE缓存虽然能提高已储存网站的访问速度,但是过度的IE缓存会影响浏览器的响应速度.同时还可能为网站的运行带来一些不必要的麻烦.例如:可能会因为浏览器缓存的应用,而导致Web服务器不能准确的计 ...
delphi删除只读文件
只读文件就是不能删除的文件,用DeleteFile函数对它来说是毫无意义的,要删除只读文件,只有先改变它的属性.如果你要删除一个文件,最好先作两个方面的考虑: (1)判断该文件的属性.可以用上面提到的 ...
ALV判断修改后是否有不合法数据，有则选中错误行,高亮度显示。
alv数据表维护表时错误行需要高亮度显示 gt_index_rows TYPE lvc_t_row,"用以存放要选择行的内表 gs_index_rows TYPE lvc_s_row.&qu ...
[置顶] cocos2d-x 3.0游戏开发xcode5帅印博客教学 004.[HoldTail]主角的上下飞行跟移动
cocos2d-x 3.0游戏开发xcode5帅印博客教学 004.[HoldTail]主角的上下飞行跟移动写给大家的前言,在学习cocos2d-x的时候自己走了很多的弯路,也遇到了很多很多问题,不 ...

ExtJs选择器

ExtJs选择器的更多相关文章

随机推荐

热门专题